HTMLCollection

最新推荐文章于 2023-03-06 14:29:08 发布

转载最新推荐文章于 2023-03-06 14:29:08 发布 · 5.5k 阅读

文章标签：

#dom

JS小点专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了HTMLCollection接口，它是HTML DOM对象的一部分，用于获取DOM元素集合并进行操作。文章解释了HTMLCollection并非数组但具备类似特性，并介绍了其核心方法如item()和namedItem()等。

1、是什么？

它是HTML DOM对象的一个接口，这个接口包含了获取到的DOM元素集合，返回的类型是Object。
它很像数组，又不是数组，如果你想使用数组的一些方法操作这个集合，那么不好意思。
它是及时更新的，当文档中的DOM变化是，它是会随之变化的。
属性：HTMLCollection.length，返回集合当中子元素的数目。
它有自带的方法

    1.HTMLCollection.item(index)，参数为下标，返回具体的节点。
    2.HTMLCollection.namedItem(value),参数为字符串，返回具体的节点。

在获取dom节点时就会获取

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sliiva

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTMLCollection接口

weixin_51803498的博客

07-29

612

是 DOM（文档对象模型）中的一个接口，它表示了一个元素的集合，这些元素可以通过名称、ID 或其他属性进行访问。然而，主要通过 HTML 文档中的标签名（如）或特定属性（如，尽管后者返回的实际上是NodeList的一个特例，但行为类似）来获取。

HTMLCollection与NodeList

WEB, WEb, Web, web

06-23

4434

以下方法获取的为HTMLCollection对象 document.images //所有img元素 document.links //所有带href属性的a元素和area元素 document.anchors //所有带name属性的a元素 document.forms //所有form元素 document.scripts //所有script元素 document.applets //

参与评论您还未登录，请先登录后发表或查看评论

HTMLCollection 与 NodeList 的区别

Serena_tz的博客

03-10

917

HTMLCollection是 HTML 元素的集合。 NodeList 是文档节点的集合。 NodeList 和 HTML 集合几乎完全相同。 HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。它们都有定义列表（集合）中项目数的 length 属性。它们都可以通过索引 (0, 1, 2, 3, 4, …) 像数组那样访问每个项目。访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。访问 NodeList 项目，只能通过它们的索引号。只

【HTML】HTMLCollection 对象

Milk~每天分享一点点，技术进步一点点

10-16

806

HTMLCollection 对象 HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。 HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文档改变时，那些改变通过所有 HTMLCollection 对象会立即显示出来。下面的每个项目（以及它们指定的属性）都返回 HTMLCollection： Document (images, applets, links, forms, anchors) form (elements) m

JavaScript HTML DOM 集合(Collection)

笔记

02-14

1427

HTML DOM 集合 (Collection) 是一组 HTML 元素，这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成，并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常常见，因为它们可以帮助我们轻松地访问和操作网页中的多个元素。HTMLCollection: 该类型的集合包含了一组 HTML 元素，并且这些元素都是有序的。

js中将HTMLCollection/NodeList/伪数组转换成数组的代码

10-28

在JavaScript中，我们经常会遇到需要将HTMLCollection、NodeList或者伪数组（也就是通常所说的类数组对象）转换成真正的数组的情况。类数组对象并不是真正的数组类型，它们通常是函数的参数对象（比如arguments对象...

JavaScript之HTMLCollection接口代码

10-28

HTMLCollection 接口是 JavaScript 中用于表示一个包含 DOM 元素集合的对象。这个接口提供了一种方式来访问一组有序的元素集合，常用于诸如通过文档对象模型 (DOM) 获取一组元素的场景。HTMLCollection 接口虽然主要...

javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异

10-28

在处理DOM元素时，我们经常会遇到`NodeList`和`HTMLCollection`这两个概念。它们都是表示一组DOM节点的集合，但有其各自的特点和浏览器差异。首先，`NodeList`是DOM API中一个接口，它代表了一组动态更新的节点...

将HTMLCollection/NodeList/伪数组转换成数组的实现方法

09-05

在JavaScript中，HTMLCollection、NodeList以及某些情况下创建的类似数组的对象被称为伪数组。它们具有类似于数组的特性，比如拥有`length`属性和通过索引访问元素的能力，但不具备数组的完整方法集，如`push`、`pop...

foreach.js低版本IE数组和HTMLCollection元素集合不兼容forEach循环遍历的处理方法

12-11

低版本IE数组和HTMLCollection元素集合不兼容forEach循环遍历的处理方法原生JavaScript通过name获取dom元素得到的是 HTMLCollection元素集合要想循环遍历可以用forEach，但是在低于ie9的版本下不兼容 var list...

HTMLCollection 对象

bo646424926的博客

10-27

301

htmlcollection对象

html 定义集合对象吗,HTMLCollection 对象

weixin_33535402的博客

06-23

691

JavaScript HTML DOM 集合(Collection)本章节介绍如何向文档中添加和移除元素(节点)。HTMLCollection 对象getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。以下代码获取文档所有的元素：实例var x = document.getElement...

类数组对象HTMLCollection

weixin_44656639的博客

11-12

347

-Ele.getElementsByTagName() 根据节点名称返回集合 -document.scripts-document.links 返回全部script集合 -document.images 返回页面里全部a元素 -document.forms 返回页面全部图片元素 -tr.cells 返回所有td元素的子集合 -select.options 返回select的全部选项 myRea...

NodeList和HTMLCollection

Meskjei的博客

03-15

1715

以前从来没怎么注意NodeList和HTMLCollection之间的区别。直到我今天重新看了《JavaScript高级程序设计》才注意到它们之间是有着微妙的区别的。先来看下面的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&q

JavaScript - 父节点 - 兄弟节点 - 子节点 - 对象获取方法 - HTMLCollection对象和 NodeList 对象各自所能使用的方法 - 测试 - 新手笔记

Muxiu

03-06

2598

目录基本知识一、js 测试笔记：二、在线测试代码：三、js 方法解析：document.getElementById("demo")document.getElementById("demo").innerHTMLthis 关键字详解parentNodequerySelector()有趣的测试， HTML 语言被覆盖有趣的测试 1 - 获取子节点 - 有趣的 p 标签有趣的测试 2 - 获取子节点有趣的测试 3 - 获取子节点有趣的测试 4 - 获取子节点参考链接基本知识理解 HTML 父节点、兄弟节点

htmlcollection

最新发布

03-10

### HTMLCollection in JavaScript DOM API #### 定义与特性 HTMLCollection 是一种类数组的对象，用于存储一组具有相同特征的元素节点。这些集合通常由获取特定类型的元素的方法返回，比如 `getElementsByClassName` 或者 `getElementsByTagName` 方法[^2]。 #### 获取方式可以通过多种内置方法来获得一个 HTMLCollection 对象： - 使用 `document.getElementsByClassName()` 来基于类名检索； - 利用 `document.getElementsByTagName()` 基于标签名称查找； - 应用 `document.getElementsByName()` 根据 name 属性选取表单控件等。每种方法都会返回一个新的 live 集合实例，这意味着当文档结构发生变化时，该集合也会自动更新其成员列表而无需再次调用相应的方法。 #### 访问元素尽管看起来像数组，但是 HTMLCollection 并不是真正的 Array 类型，因此不支持所有的数组操作方法。不过可以使用方括号语法或者 `item(index)` 函数按索引来访问其中的具体项目；另外还可以借助 `namedItem(name)` 依据 ID 或者 name 属性值定位到某个具体项。 ```javascript // 方括号语法 const firstElement = myHTMLCollection[0]; // item() 方法 const secondElement = myHTMLCollection.item(1); // namedItem() 方法 (假设存在 id="uniqueId" 的元素) const specificElement = myHTMLCollection.namedItem('uniqueId'); ``` #### 转换为数组如果希望对 HTMLCollection 运行更复杂的迭代或其他仅适用于真实数组的操作，则可能需要将其转换成标准 JS 数组: ```javascript Array.from(myHTMLCollection); // 或者对于现代浏览器兼容性较好的情况可以直接使用扩展运算符 [...myHTMLCollection]; ``` #### 更新行为值得注意的是，由于 HTMLCollection 实现了实时同步机制，所以每当页面上的 DOM 发生变动（例如新增、删除或修改匹配条件下的元素），这个集合的内容就会随之调整，这不同于静态 NodeList，在某些情况下可能会带来性能方面的影响。