JS-NodeList和HTMLCollection对比

最新推荐文章于 2024-01-24 09:49:52 发布

书院二层楼

最新推荐文章于 2024-01-24 09:49:52 发布

阅读量202

点赞数 1

分类专栏： JS 文章标签： js NodeList HTMLCollection

本文链接：https://blog.csdn.net/caoxinjian423/article/details/113782288

版权

JS 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList和HTMLCollection对比</title>
</head>
<body>
    <div id="div">
        <p>p1</p>
        <h3>h1</h3>
        <p>p2</p>
        <!-- 注释 -->
        <p>p3</p>
        <h3>h2</h3>
        <p>p4</p>
        <h3>h3</h3>
        <p>p5</p>
        <p>p6</p>
    </div>    
    <script>
    /*
        nodeList
            childNodes
            querySelectorAll    
        HTMLCollection 
            children
            getElementsByTagName
            getElementsByClassName
    
        1. nodeList 有 forEach 方法，但是 HTMLCollection 没有forEach
        2. HTMLCollection 每次调用时都会动态的去获取, nodeList 中 childNodes 有动态更新，但是querySelectorAll 就不会动态更新
    */    
    {
        let div = document.querySelector("#div");
        let nodes = div.querySelectorAll("p");
        let collection = div.children;
        console.log(nodes);
        console.log(collection);
        div.innerHTML = "";
        console.log(nodes);
        console.log(collection);
    }
    
    </script>  
</body>
</html>

书院二层楼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-NodeList和HTMLCollection对比

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NodeList和HTMLCollection对比</title></head><body>.
复制链接

扫一扫