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()
相关推荐
irving同学462381 分钟前
TypeScript 后端入门全景:Hono + Zod + Drizzle + PostgreSQL
前端·后端
一致性1 分钟前
项目总结:桌宠(Desktop Pet)
前端
阳光九叶草LXGZXJ7 分钟前
自制数据库迁移工具-C版-07-HappySunshineV1.6-(支持PG、达梦、Gbase8a)
linux·c语言·开发语言·数据库·学习·postgresql
不吃土豆的马铃薯8 分钟前
5.SGI STL 二级空间配置器 _S_chunk_alloc核心函数解析
开发语言·c++·vscode·c·内存池
学掌门9 分钟前
JavaScript:为什么命名参数比位置参数更好
开发语言·javascript·ecmascript
JoneBB9 分钟前
ABAP上传EXCEL模板并将内表内容存到两个sheet中
java·前端·数据库
码界筑梦坊10 分钟前
124-基于Python的航空旅客满意度数据可视化分析系统
开发语言·python·信息可视化·数据分析·flask·毕业设计
XMYX-010 分钟前
31 - Go url 解析:从字符串到结构化请求的完整路径
开发语言·golang
hhb_61811 分钟前
PHP开发实战:高频难点解析与优化方案
开发语言·php
夕除14 分钟前
spring boot 8
java·开发语言