获取标签的那些事 之 动态集合
HTML5学堂：今天的内容从一道题开始，很简单，但是，你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签，但是真的对它们足够了解么？
一起来看例子：
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 - H5course</title>
-
<meta name="viewport" content="width=device-width,user-scalable=no">
-
<link rel="stylesheet" href="model/css/reset.css">
-
</head>
-
<body>
-
<ul id="con">
-
<li>HTML5学堂</li>
-
<li>获取标签的那些事儿</li>
-
<li>看上去很简单，但是你却未必能够正确</li>
-
</ul>
-
<script src="model/js/jquery-1.11.2.js"></script>
-
<script>
-
var con = document.getElementById('con');
-
// 通过基本的DOM操作获取li元素
-
var domLists = con.getElementsByTagName('li');
-
// 通过querySelectorAll获取li元素
-
var queryLists = con.querySelectorAll('li');
-
// 通过jQuery获取li元素
-
var jqLists = $('#con li');
-
-
console.log(domLists.length);
-
console.log(queryLists.length);
-
console.log(jqLists.length);
-
-
// 动态添加10个li
-
for (var i = 0; i < 10; i++) {
-
con.innerHTML += '<li>新增</li>';
-
};
-
-
console.log(domLists.length);
-
console.log(queryLists.length);
-
console.log(jqLists.length);
-
</script>
-
</body>
-
</html>
打印的结果
如果是3,3,3,3,3,3。那么恭喜你~！成功掉坑~！
到底结果是多少？先看如下解释，自然就明白了~~~
querySelectorAll与getElementsBy系列的区别
querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List。
Static Node List：静态的节点列表，如何理解静态呢？也就是一个快照。对文档的任何操作都不会产生影响。
Live Node List：动态的节点列表。每一次调用这种列表时（如上为：domLists这个变量）都会重复对文档进行查询。
so，答案是多少你知道了吗？jQuery选择器的原理又是什么你应该也能推算出来了吧~？
欢迎沟通交流~HTML5学堂
极客编程技术分享
