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()
相关推荐
iCxhust2 分钟前
微机原理实践教程(C语言篇)---A002流水灯
c语言·开发语言·单片机·嵌入式硬件·51单片机·课程设计·微机原理
是上好佳佳佳呀18 分钟前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记
莎士比亚的文学花园24 分钟前
Linux驱动开发(3)——设备树
开发语言·javascript·ecmascript
图码31 分钟前
如何用多种方法判断字符串是否为回文?
开发语言·数据结构·c++·算法·阿里云·线性回归·数字雕刻
U盘失踪了37 分钟前
python curl转python脚本
开发语言·chrome·python
charlie11451419138 分钟前
Linux 字符设备驱动:cdev、设备号与设备模型
linux·开发语言·驱动开发·c
handler0140 分钟前
Linux 内核剖析:进程优先级、上下文切换与 O(1) 调度算法
linux·运维·c语言·开发语言·c++·笔记·算法
FQNmxDG4S40 分钟前
Java泛型编程:类型擦除与泛型方法的应用场景
java·开发语言·python
CDN3601 小时前
排查实录:网站偶发502/504错误?360CDN回源超时配置与日志分析技巧
前端·数据库
我星期八休息1 小时前
IT疑难杂症诊疗室:AI时代工程师Superpowers进化论
linux·开发语言·数据结构·人工智能·python·散列表