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()
相关推荐
JosieBook1 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉1 小时前
2. Webpack 高级配置
前端·javascript·webpack
hqxstudying2 小时前
Java异常处理
java·开发语言·安全·异常
wjs20245 小时前
状态模式(State Pattern)
开发语言
我命由我123455 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
liulilittle5 小时前
C++ TAP(基于任务的异步编程模式)
服务器·开发语言·网络·c++·分布式·任务·tap
励志要当大牛的小白菜6 小时前
ART配对软件使用
开发语言·c++·qt·算法
灵感__idea7 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴9 小时前
Mix
前端·webgl
爱装代码的小瓶子9 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构