HTML5 HTMLCollection和NodeList的差别详解

日期：2020-12-11 类型：科技新闻我要分享

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

本文关键详细介绍了HTML5 HTMLCollection和NodeList的差别详解，共享给大伙儿，实际以下：

获得

HTMLCollection 目标

getElementsByTagName() 方式返HTMLCollection目标。
HTMLCollection 目标相近包括 HTML 元素的1个数字能量数组。

留意：

HTMLCollection 并不是1个数字能量数组！
HTMLCollection 看起来将会是1个数字能量数组，但实际上并不是。
你能够像数字能量数组1样，应用数据库索引来获得元素。
HTMLCollection 没法应用数字能量数组的方式： valueOf(), pop(), push(), 或 join()。

NodeList 目标

绝大多数访问器的querySelectorAll()回到 NodeList 目标。

留意

连接点目录并不是1个数字能量数组！
连接点目录看起来将会是1个数字能量数组，但实际上并不是。
你能够像数字能量数组1样，应用数据库索引来获得元素。
连接点目录没法应用数字能量数组的方式： valueOf(), pop(), push(), 或 join() 。

HTMLCollection 与 NodeList 的差别

HTMLCollection是 HTML 元素的结合。（仅包括元素）
NodeList 是1个文本文档连接点的结合。
NodeList 与 HTMLCollection 有许多相近的地区。
NodeList 与 HTMLCollection 都与数字能量数组目标有点相近，可使用数据库索引 (0, 1, 2, 3, 4, ...) 来获得元素。
NodeList 与 HTMLCollection 都有 length 特性。
HTMLCollection 元素能够根据 name，id 或数据库索引来获得。
NodeList 只能根据数据库索引来获得。
仅有 NodeList 目标有包括特性连接点和文字连接点。

编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <P>1</P>
    <P id="p2">2</P>
    <P>3</P>
    <P>4</P>
    <P>5</P>
    <script>
            //  getElementsByTagName() 方式回到 HTMLCollection 目标。 
            const myCollection = document.getElementsByTagName('p');
            console.log(myCollection)
            // 绝大多数访问器的 querySelectorAll() 回到 NodeList 目标。
            const myNodeList  = document.querySelectorAll("p");
            console.log(myNodeList)
            console.log(myNodeList ===myCollection) //false
            console.log(myCollection.p2)  // <P id="p2">2</P>
            console.log(myNodeList.p2) //undefine 

    </script>
</body>
</html>

到此这篇有关HTML5 HTMLCollection和NodeList的差别详解的文章内容就详细介绍到这了,更多有关HTML5 HTMLCollection NodeList內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：⊙﹏⊙css3完成文本首尾对接跑马灯的实例编码返回下一篇：html5 canvas手式解锁源代码共享