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()
相关推荐
Aliex_git4 分钟前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕5 分钟前
useStorage:本地数据持久化利器
前端·vue.js
阿猿收手吧!11 分钟前
【C++】Ranges:彻底改变STL编程方式
开发语言·c++
云游云记18 分钟前
php 随机红包数生成
开发语言·php·随机红包
程序员林北北19 分钟前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript
全栈前端老曹19 分钟前
【Redis】Redis 持久化机制 RDB 与 AOF
前端·javascript·数据库·redis·缓存·node.js·全栈
NEXT0623 分钟前
受控与非受控组件
前端·javascript·react.js
NEXT0641 分钟前
防抖(Debounce)与节流(Throttle)解析
前端·javascript·面试
mqiqe1 小时前
pnpm 和npm 有什么区别?
前端·npm·node.js
gAlAxy...1 小时前
MyBatis-Plus 核心 CRUD 操作全解析:BaseMapper 与通用 Service 实战
java·开发语言·mybatis