querySelectorAll与getElementsByTagName等区别

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

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

3,querySelector获取到的不是动态,而getElement获取到的是动态的。如下:

javascript 复制代码
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()
相关推荐
我是苏苏1 分钟前
C#基础:使用System.Speech.Synthesis离线播放/朗读文字内容
开发语言·c#
古韵3 分钟前
小程序上传进度条,还要自己监听 onProgressUpdate 吗?
前端·javascript·uni-app
古韵4 分钟前
axios 已经跑得好好的,还要不要上 alova?
前端·javascript·axios
噗噗1213 分钟前
企业微信侧边栏应用与前端 JS-SDK 的深度整合指南
前端·javascript·企业微信
Patrick在香港15 分钟前
Python依赖管理从踩坑到选型:pip/poetry/uv四种方案全面实测
开发语言·python·数据分析·scikit-learn·ai编程·pip·uv
我命由我1234516 分钟前
Kotlin 面向对象 - 枚举排序
android·java·开发语言·java-ee·kotlin·android studio·android-studio
程序喵大人19 分钟前
【C++进阶】STL容器与迭代器 - 10 把容器、迭代器和数据流串成一个小程序
开发语言·c++·容器·小程序·迭代器·stl
朝阳3919 分钟前
react19【实战】配置化路由登录鉴权完整方案
前端·javascript·react.js
ShuiShenHuoLe27 分钟前
vue如何实现国际化,它来了!
前端·javascript·vue.js
其美杰布-富贵-李29 分钟前
Vue Router 实战教程
前端·javascript·vue.js