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()
相关推荐
天若有情6731 天前
XiangJsonCraft v1.2.0重大更新解读:本地配置优先+全量容错,JSON解耦开发体验再升级
前端·javascript·npm·json·xiangjsoncraft
2501_944525541 天前
Flutter for OpenHarmony 个人理财管理App实战 - 预算详情页面
android·开发语言·前端·javascript·flutter·ecmascript
打小就很皮...1 天前
《在 React/Vue 项目中引入 Supademo 实现交互式新手指引》
前端·supademo·新手指引
C澒1 天前
系统初始化成功率下降排查实践
前端·安全·运维开发
1 天前
java关于内部类
java·开发语言
好好沉淀1 天前
Java 项目中的 .idea 与 target 文件夹
java·开发语言·intellij-idea
lsx2024061 天前
FastAPI 交互式 API 文档
开发语言
摘星编程1 天前
React Native + OpenHarmony:自定义useFormik表单处理
javascript·react native·react.js
VCR__1 天前
python第三次作业
开发语言·python
码农水水1 天前
得物Java面试被问:消息队列的死信队列和重试机制
java·开发语言·jvm·数据结构·机器学习·面试·职场和发展