<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
//获取到ul，为了之后动态的添加li
var ul = document.getElementById('box');
//获取到现有ul里面的li
var list = ul.getElementsByTagName('li');
for(var i =0; i < list.length; i++){
ul.appendChild(document.createElement('li')); //动态追加li
}
</script>
上述代码会陷入死循环，i < list.length 这个循环条件。
因为在第一次获取到里面的 3 个 li 后，每当往 ul 里添加了新元素后，list便会更新其值，重新获取ul里的所有li。
也就是 getElement(s)Byxxxx 获取的是动态集合，它总会随着 dom 结构的变化而变化。
也就是每一次调用 list 都会重新对文档进行查询，导致无限循环的问题。
示例1 修改：
将 for 循环条件修改为 i < 4，结果 在 ul 里新添加了4个元素，所有现在插入的 li 标签数量是7。
<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.getElementById('box');
var list = ul.getElementsByTagName('li');
for(var i = 0; i < 4; i++){
ul.appendChild(document.createElement('li'));
}
console.log('list.length：',list.length);
</script>
示例2：
下述代码静态集合体现在 .querySelectorAll(‘li') 获取到 ul 里所有 li 后，不管后续再动态添加了多少 li，都是不会对其参数影响。
<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.querySelector('ul');
var list = ul.querySelectorAll('li');
for(var i = 0; i < list.length; i++){
ul.appendChild(document.createElement('li'));
}
console.log('list.length：',list.length); //输出的结果仍然是 3，不是此时 li 的数量 6
</script>
为什么要这样设计呢？
在 W3C 规范中对 querySelectorAll 方法有明确规定：
The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).
An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes.Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
实际上，HTMLCollection 和 NodeList 十分相似，都是一个动态的元素集合，每次访问都需要重新对文档进行查询。
区别：HTMLCollection 属于 Document Object Model HTML 规范，而 NodeList 属于 Document Object Model Core 规范。
这样说有点难理解，看看下面的例子会比较好理解：
var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');
注意：querySelectorAll 所接收的参数是必须严格符合 CSS 选择符规范的
下面这种写法，将会抛出异常（CSS 选择器中的元素名，类和 ID 均不能以数字为开头）。
<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
//获取到ul，为了之后动态的添加li
var ul = document.getElementById('box');
//获取到现有ul里面的li
var list = ul.getElementsByTagName('li');
for(var i =0; i < list.length; i++){
ul.appendChild(document.createElement('li')); //动态追加li
}
</script>
上述代码会陷入死循环，i < list.length 这个循环条件。
因为在第一次获取到里面的 3 个 li 后，每当往 ul 里添加了新元素后，list便会更新其值，重新获取ul里的所有li。
也就是 getElement(s)Byxxxx 获取的是动态集合，它总会随着 dom 结构的变化而变化。
也就是每一次调用 list 都会重新对文档进行查询，导致无限循环的问题。
示例1 修改：
将 for 循环条件修改为 i < 4，结果 在 ul 里新添加了4个元素，所有现在插入的 li 标签数量是7。
<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.getElementById('box');
var list = ul.getElementsByTagName('li');
for(var i = 0; i < 4; i++){
ul.appendChild(document.createElement('li'));
}
console.log('list.length：',list.length);
</script>
示例2：
下述代码静态集合体现在 .querySelectorAll(‘li') 获取到 ul 里所有 li 后，不管后续再动态添加了多少 li，都是不会对其参数影响。
<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.querySelector('ul');
var list = ul.querySelectorAll('li');
for(var i = 0; i < list.length; i++){
ul.appendChild(document.createElement('li'));
}
console.log('list.length：',list.length); //输出的结果仍然是 3，不是此时 li 的数量 6
</script>
为什么要这样设计呢？
在 W3C 规范中对 querySelectorAll 方法有明确规定：
The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).
An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes.Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
实际上，HTMLCollection 和 NodeList 十分相似，都是一个动态的元素集合，每次访问都需要重新对文档进行查询。
区别：HTMLCollection 属于 Document Object Model HTML 规范，而 NodeList 属于 Document Object Model Core 规范。
这样说有点难理解，看看下面的例子会比较好理解：
var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');
注意：querySelectorAll 所接收的参数是必须严格符合 CSS 选择符规范的
下面这种写法，将会抛出异常（CSS 选择器中的元素名，类和 ID 均不能以数字为开头）。
