关于getElementsByTagName与getElementsByClassName的那些事

Posted 2020-09-06 bug_zero

　　很久以来我获取dom节点的方式都是getElementById,queryselector,queryselectorAll这三个为核心，一直认为有些API并没那么好用而选择弃用，直到后来。。。看到了关于getElementsByTagName的一个特性-动态，直接刷新了我对这个API的认知（果然基础还是不扎实啊 - -~~~~~~~~~），于是就把所有获取节点的API都试了个遍，最后发现只有getElementsByTagName,getElementsByClassName这两个API存在这个特性。　

　　场景例子（拿getElementsClassName来说）：　　　　比如我们有一个父元素ID为"box"，这个元素下有多个class名为“childs”的div元素，我们想把他们全部取到，这时候我们可以这样写：

var 
   box = document.getElementById(‘box‘),
   boxChilds = box.getElementsByClassName(‘childs‘);

console.log( boxChilds );//取到了所有class名为childs的div元素

　　突然我在某处想把他们全部换成a标签，class名字不变，并且同样需要把他们全部取到，这是就可以利用这个特性进行操作了,代码只需要这样写即可：

var 
     box = document.getElementById(‘box‘),
     boxChilds = box.getElementsByClassName(‘childs‘);

console.log( boxChilds );
box.innerhtml = ‘<a class="childs"></a><a class="childs"></a>‘;
console.log( boxChilds );//变量内保存的变成a标签了~~

　　可以看到我们并没有对boxChilds这个变量进行任何操作，但是boxChilds却自动发生了改变,极其的方便。getElementsByTagName同理可行，那么其他的是否可行呢？答案是：NO。诸如queryselectorAll之类的，并不会自动变化（getElementsByTagName:“谁还敢直接抛弃我！！！！”）