NodeList、HTMLCollection 和 Array详解

最新推荐文章于 2024-07-29 11:49:07 发布

MudOnTire

最新推荐文章于 2024-07-29 11:49:07 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端之路文章标签： html javascript NodeList HTMLCollection DOM

本文链接：https://blog.youkuaiyun.com/MudOnTire/article/details/80980876

本文详细探讨了NodeList、HTMLCollection和Array之间的关系。通过实例展示了NodeList的entries()、forEach()、item()、keys()、values()等方法，以及HTMLCollection的特点。NodeList用于存储DOM节点，包括HTML元素、text node和comment，而HTMLCollection仅包含HTML元素，两者在不同的DOM操作中被返回。虽然它们与Array有些相似，但并非继承关系，而是各自独立的类型。

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

Array，NodeList， HTMLCollection这三个概念和它们之间的关系有很多做了几年前端的同学都搞不清楚，经常遇到但是又感觉很陌生，剪不断理还乱的感觉。今天咱们就来理清这三个东西。

对于Array大家差不多都能弄明白，但是HTMLCollectio、NodeList和Array的关系好像总是很暧昧，有一点像但是又不那么像，可能是我比较笨，但是真的被它们弄得很头疼啊，所以今天下决心必须弄懂它们。

咱们先不管那么多概念和定义，先来看看这三个东西到底长什么样。咱们先创建一个html文件，里面就放三个嵌套的div：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="test-div">
        div1
        <div class="test-div">
            div2
            <div class="test-div">
                div3