js document.getElementsByTagName().html

最新推荐文章于 2022-03-25 20:10:47 发布

学无止境慢慢来

最新推荐文章于 2022-03-25 20:10:47 发布

阅读量1.1k

点赞数

分类专栏： js

js 专栏收录该内容

133 篇文章

订阅专栏

本文通过一个简单的HTML示例介绍了HTMLCollection对象的动态特性。HTMLCollection是一个包含HTML元素的节点集合，当DOM树发生变化时，该集合会自动更新。文章通过获取页面中所有div元素并打印，展示了这一特性的具体应用。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName</title>
</head>
<body>
<div class="box1" id="frame1"></div>
<div class="box2" id="frame2"></div>

<script>
    // 参考：https://blog.youkuaiyun.com/The_X_One/article/details/86485960
    // 知识点：
    // HTMLCollection（html元素节点的集合）
    // 这个集合是动态的，它会根据DOM树的变化自动更新，而不必再次调用getElementsByTagName方法更新数据。
    let divObjs = document.getElementsByTagName("div");
    console.log("divObjs:", divObjs);
    // divObjs: HTMLCollection(2) [div#frame1.box1, div#frame2.box2, frame1: div#frame1.box1, frame2: div#frame2.box2]
    // console.log(divObjs.__proto__);
    console.log(Object.prototype.toString.call(divObjs));
    // [object HTMLCollection]
</script>
</body>
</html>