关于JS中getElementsByTagName与querySelectorAll的区别

关于 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 方法时，却没有成功

图四

以上

关于JS中getElementsByTagName与querySelectorAll的区别

推荐阅读更多精彩内容