首页 > 代码库 > 关于getElementsByTagName与getElementsByClassName的那些事

关于getElementsByTagName与getElementsByClassName的那些事

  很久以来我获取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:“谁还敢直接抛弃我!!!!”)

关于getElementsByTagName与getElementsByClassName的那些事