<body>
<input type="button" id="btn" value="点击增加">
<ul id="ul">
极客观点
项目管理
HarmonyOS
<li>1</li>
<li>2</li>
<li>3</li></ul>
<script>
var btn=document.getElementById("btn");
var ul=document.getElementById("ul");
var num=0
btn.onclick=function(){
num++
var li=document.createElement("li")
li.innerHTML=num
ul.insertBefore(li,ul.children[0])---》在ul.children[0]中children是否在页面加载完成时取的一次值，后面不是实时动态获取元素的吗？（就是ul.children[0]指的元素不在变动？）
}</script>
</body>
没错 使用.children获取的是HTMLCollection 是一个实时更新的列表 可以看做一个数组对象 而使用querySelectorAll获取的是NodeList 与其他方式获取的NodeList不同 它不是节点集合 而是元素集合 并且是静态的 不会实时更新 相当于克隆了一个新数组 想让.children达到querySelector的效果 解决办法也很简单 将call与数组的slice方法配合使用: var foo = Array.prototype.slice.call(document.getElementsByClassName('bar').children)
那么此时foo就是一个新的元素集合的数组 并且是静态的 不会像HTMLCollection这样实时更新
13 回答12.8k 阅读
7 回答1.9k 阅读
3 回答1.1k 阅读✓ 已解决
2 回答1.2k 阅读✓ 已解决
6 回答873 阅读✓ 已解决
6 回答1k 阅读
2 回答1.3k 阅读✓ 已解决
Element.children是数组，数组是引用类型。Element.insertBefore(li)理解为Element.children.unshift(li)。你一直指着他的头，只是他换了个头。