获取dom元素列表

最新推荐文章于 2025-07-01 17:28:47 发布

阿喻

最新推荐文章于 2025-07-01 17:28:47 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/yudldl/article/details/86693158

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何获取DOM元素列表，重点讲述了elementList、querySelectorAll等方法的区别。elementList是一个实时更新的HTMLCollection，而querySelectorAll返回的是静态集合。讨论了NodeList和HTMLCollection的特性，以及如何将类数组对象转换为数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.获取dom元素列表

(1) elementList = document.querySelectorAll(selectors)

elementList 是一个静态的 NodeList 类型的对象
selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串（ id, class, 类型, 属性, 属性值）

(2) elementList =  Element.getElementsByClassName(className)

elementList 是一个即时更新的（live）HTMLCollection
className 是一个字符串，表示要匹配的类名列表；类名被空白符分隔
element 是文档中的任一element

　注意：　　Element可以为document，会检索整个文档，包括根元素。

(3) elementList＝Element.getElementsByTagName(tagName)

elementList 搜索到的元素的动态HTML集合HTMLCollection，它们的顺序是在子树中出现的顺序。如果没有搜索到元素则这个集合为空。
element 搜索从element开始
tagName 要查找的限定名。字符 "*" 代表所有元素

　注意：　

　　Element可以为document, 此时整个文件结构都会被搜索，包括根节点,

　　否则element的后代元素才会被搜索，不包括元素自己

(4) elementList＝document.getElementsByName(name)

elementList 是一个实时更新的 NodeList 集合
name 是元素的 name 属性的值

以上总得验证如下：

<ul id='ulList'>
    <li class='dateLi' name='liName'>周一</li>
    <li class='dateLi' name='liName' >周二</li>
    <li class='dateLi' name='liName' >周三</li>
    <li class='dateLi' name='liName'>周四</li>
  </ul>

    var ulBySelectorAll = document.querySelectorAll('.dateLi')
    var ulByClassName = document.getElementsByClassName('dateLi')
    var ulByTagName = document.getElementsByTagName('li')
    var ulByName = document.getElementsByName('liName')

    ulBySelectorAll[0].style.color = "red"

    // 在ul 的最后添加一个相同的li元素
    var ulList = document.querySelector('ul') 
    var newAddLi = document.createElement('li')
    newAddLi.classList.add("dateLi")
    newAddLi.setAttribute('name', 'liName')
    newAddLi.innerHTML = '周五'
    ulList.appendChild(newAddLi)


    console.log('ulBySelectorAll', ulBySelectorAll)
    console.log('ulBySelectorAll.length', ulBySelectorAll.length)
    
    console.log('ulByClassName', ulByClassName)
    console.log('ulByClassName.length', ulByClassName.length)

    console.log('ulByTagName', ulByTagName)
    console.log('ulByTagName.length', ulByTagName.length)

    console.log('ulByName', ulByName)
    console.log('ulByName.length', ulByName.length)

首先通过以上的四个方法获取得到对应列表组合，　然后动态的ul的后面新增一个相同的li元素，得到的结果和上面总结的结果一致，　通过querySelectorAll　得到的是一个静态的集合，　其他三个方法得到的是动态的集合．

以上得到的结果　类型属于　NodeList　和　HTMLCollection，　这两个是什么东西呢，我们一起来看一下

ＭＤＮ是这样说的：　

NodeList 对象是一个节点的集合，是由 Node.childNodes 和document.querySelectorAll 返回的，是“有时实时”的集合．

实时的：　Node.childNodes 得到的是实时的NodeLisｔ

静态的：　document.querySelectorAll 得到的是静态的 NodeLisｔ

HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection），还提供了用来从该集合中选择元素的方法和属性。

HTML DOM 中的 HTMLCollection 是即时更新的（live）当其所包含的文档结构发生改变时，它会自动更新

　　这两种集合在某些方面和数组非常相似，我们叫做＇类数组＇，　除了for 和for ...of 方法外，没有其他可以直接使用的方法，如果需要是用数组的方法，可以使用call,apply 将宿主对象（如 NodeList）作为 this 传递给数组的prototype 属性或者其他方法来转换.

类数组转为数组的方法