关于 getElementsByTagName 和 querySelectorAll 的一些区别
其实两个获取元素的基本用法是一样子的
（浏览器：Google）
<script>
var aDiv = document.getElementByTagName('div')
var aDiv = document.querySelectorAll('div')
</script>
这两种写法看起来是一样子的，用法也应该差不多，但是却有一个区别：
<script>
var aDiv = document.getElementByTagName('div')
for( var i = 0; i < 10; i++ ){
document.body.innerHTML += '<div>' + i + '</div>'
}
for( var i = 0; i < oDiv.length; i++ ) {
aDiv[i].style.left =10 + 60*i + 'px'
aDiv[i].style.top = 10 + 'px'
}
</script>
在使用 getElementByTagName 时，没有问题。
图1
然而在使用 querySelectorAll 时，结果是这样的
<script>
var aDiv = document.querySelectorAll('div')
for( var i = 0; i < 10; i++ ){
document.body.innerHTML += '<div>' + i + '</div>'
}
for( var i = 0; i < oDiv.length; i++ ) {
aDiv[i].style.left =10 + 60*i + 'px'
aDiv[i].style.top = 10 + 'px'
}
</script>
图2
再来看一个例子
<style>
ul li{ list-style: none; width: 50px; height: 50px; background: #000; display: block; margin-bottom: 10px; }
.active{ background: #fc7; }
</style>
<script>
window.onload = function(){
var oUl = document.getElementsByTagName("ul")[0]
var aLi = oUl.getElementsByTagName("li")
for (let i = 0; i < 5; i++) {
oUl.innerHTML += '<li></li>'
}
aLi[0].className = 'active'
}
</script>
<body>
<div>
<ul></ul>
</div>
</body>
这里我们想给 JS 里生成的第一个 li 添加一个名为 active 的 class ， 如果用 getElementsByTagName 方法的话，可以正常操作
图三
但是如果用 querySelectorAll 方法时，却没有成功
图四
以上
网友评论