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()
相关推荐
一路往蓝-Anbo3 分钟前
第 2 篇:单例模式 (Singleton) 与 懒汉式硬件初始化
开发语言·数据结构·stm32·单片机·嵌入式硬件·链表·单例模式
云飞云共享云桌面3 分钟前
SolidWorks如何实现多人共享
服务器·前端·数据库·人工智能·3d
321.。3 分钟前
从 0 到 1 实现 Linux 下的线程安全阻塞队列:基于 RAII 与条件变量
linux·开发语言·c++·学习·中间件
晚霞的不甘4 分钟前
Flutter for OpenHarmony《智慧字典》 App 底部导航栏深度解析:构建多页面应用的核心骨架
前端·经验分享·flutter·ui·前端框架·知识图谱
疯狂的喵5 分钟前
实时信号处理库
开发语言·c++·算法
h7ml5 分钟前
电商返利系统中佣金计算的幂等性保障与对账补偿机制实现
服务器·前端·php
程序员清洒5 分钟前
Flutter for OpenHarmony:Stack 与 Positioned — 层叠布局
开发语言·flutter·华为·鸿蒙
what丶k5 分钟前
深入理解Java NIO:从原理到实战的全方位解析
java·开发语言·nio
EndingCoder6 分钟前
高级项目:构建一个 CLI 工具
大数据·开发语言·前端·javascript·elasticsearch·搜索引擎·typescript
xianrenli386 分钟前
python版本配置
开发语言·python