首页 > 代码库 > 关于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的那些事
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。