HTML列表项目结点：HTMLCollection和NodeList-程序员宅基地

HTMLCollection是元素集合(元素顺序为文档流中的顺序)，它和NodeList很像，有length属性来表示HTMLCollection对象的长度，可以通过 item() 传入数字索引来访问单个元素(也可通过方括号[ ]的方式)。当时它还有一个 nameItem() 方法，可以返回集合中指定 name 属性值或 id 属性值的元素。

HTMLCollection是即时更新的，当其所包含的文档结构发生改变时，它会自动更新。

可以通过以下方法获取HTMLCollection对象

(1)getElementsByTagName()

(2)getElementsByClassName()

(3)document.forms.item()

(4)document.forms.namedItem()

下面的每个项目(以及它们指定的属性)都返回HTMLCollection：

Document (images, applets, links, forms, anchors)

form (elements)

map (areas)

select (options)

table (rows, tBodies)

tableSection (rows)

row (cells)

HTMLCollection 对象类似 HTML 元素的一个数组,获取的是html元素集合。

NodeList对象是一个从文档中获取的节点列表 (集合) 。所有浏览器中调用 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返回 NodeList 对象。NodeList对象有个length属性和item()方法，length表示所获得的NodeList对象的节点个数，这里还是要强调的是节点，而item()可以传入一个索引来访问Nodelist中相应索引的元素。

NodeList是一个节点的集合(可以包含元素和其他节点)。

注意：

(1)childNodes 是实时的，即如果文档中的节点树发生变化，已经存在的对应 childNodes也会随之变化。如下段代码所示。

let parent = document.getElementById('parent');

let child_nodes = parent.childNodes;

console.log(child_nodes.length); // 假设结果是“2”

parent.appendChild(document.createElement('div'));

console.log(child_nodes.length); // 此时的输出是“3”

(2)在其他情况下，NodeList 是一个静态集合，也就意味着随后对 dom 的任何改动都不会影响集合的内容。比如document.querySelectorAll 就会返回一个静态的 NodeList。

总体例子

item1

item2

item3

5a97888c493f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

div dom内部属性

对于以上dom结构，div 的 childNodes 就是 NodeList 对象。如上图所示，注意其中有9个节点，分别是div与注释节点的空白文本节点，注释节点，注释节点和之间的空白文本节点，然后依次类推，直到最后一个span与div的空白文本节点。而对于 childElementCount，其值为4，是因为不算空白文本节点。

let log=console.log;

let divs=document.getElementsByTagName('div');// HTMLCollection

let spans=document.getElementsByTagName('span');

let target=document.getElementsByClassName('target');

let spans2=document.querySelectorAll('span');//NodeList

let span3=document.querySelector('span');

log(divs);

log(divs.item(0))

log(divs.namedItem('span1'));// null

log(spans.length);

log(spans.namedItem('span2'));

log(target);

log(spans2)

log(spans2.length);

log(spans2.item(0));

log(span3)

divs[0].appendChild(document.createElement('span'));

log(spans.length);//4

log(spans2.length);//3

HTMLColection 与 NodeList 的区别：

(1)HTMLCollection 是 HTML 元素的集合；NodeList 是一个文档节点的集合。

(2)HTMLCollection 元素可以通过 name，id 或索引来获取；NodeList 只能通过索引来获取。

(3)NodeList内部还有 entries、forEach、keys 等方法。

5a97888c493f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

HTMLColection 与 NodeList内部属性

HTMLColection 与 NodeList 的相同点：

都是类数组，即具有 length 属性和数字索引。

本文链接：https://blog.csdn.net/weixin_34118593/article/details/118409490

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios