querySelectorAll与getElementsByTagName等区别

最新推荐文章于 2024-07-11 17:37:13 发布

837927397@QQ.COM

最新推荐文章于 2024-07-11 17:37:13 发布

阅读量163

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_22936647/article/details/138413008

版权

文章讲述了querySelector和getElement在JavaScript中的行为差异，指出querySelector获取的是nodeList，需要forEach处理，而getElement得到的是HTMLCollection，可能包含动态元素。通过示例展示了如何处理动态插入的元素在查询时的区别。

摘要由CSDN通过智能技术生成

1，querySelector 获取的是nodeList,可直妆forEach循环

2，getElement获取到的是HTMLCollection，需要使用Array.from转换为数组后才可遍历，当然，可以直接用for，不需要转换

3，querySelector获取到的不是动态，而getElement获取到的是动态的。如下：

const insert = () => {
    const div = document.createElement("div")
    div.innerHTML = "vvvvvv"
    document.getElementById("app").appendChild(div)
}
const test = () =>{
    const aa = document.querySelectorAll("div")
    const bb = document.getElementsByTagName("div")
    insert()
    console.log(aa.length) // 此处不会把insert插件的DIV计算入内
    console.log(Array.from(bb).length)// 此处会把insert插件的DIV计算入内
}

test()