htmlcollection转换成array

时间: 2023-04-25 11:04:20 浏览: 149

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

在JavaScript中，HTMLCollection、NodeList以及某些情况下创建的类似数组的对象被称为伪数组。它们具有类似于数组的特性，比如拥有`length`属性和通过索引访问元素的能力，但不具备数组的完整方法集，如`push`、`pop`、`shift`等。这种差异性在处理这些对象时可能会造成不便，因此将它们转换为真正的数组是常见的需求。 HTMLCollection和NodeList是DOM操作中经常遇到的两种伪数组类型。HTMLCollection通常由`document.getElementById`、`document.getElementsByName`或`element.getElementsByTagName`等方法返回，而NodeList则常由`element.childNodes`、`element.getElementsByTagName`等返回。这两种类型的对象都是实时更新的，即当DOM结构发生变化时，它们的内容也会相应更新。为了将这些伪数组转换为真正的数组，我们可以利用JavaScript的`Array.prototype.slice`方法。这个方法能够接受一个可迭代对象（如数组）并返回一个新的数组副本，但对HTMLCollection和NodeList来说，直接调用`slice`会抛出错误。因此，我们通常需要使用`call`方法将`slice`应用于伪数组对象： ```javascript var makeArray = function(obj) { return Array.prototype.slice.call(obj, 0); } ``` 然而，在某些老版本的浏览器中，`Array.prototype.slice`可能无法直接应用于非数组对象，如`document.documentElement.childNodes`。在这种情况下，我们需要用一个循环来手动创建数组： ```javascript makeArray = function(obj) { var res = []; for (var i = 0, len = obj.length; i < len; i++) { res.push(obj[i]); } return res; } ``` 这个`makeArray`函数可以处理上述提到的各种伪数组，包括HTMLCollection、NodeList以及自定义的类似数组的对象。通过`makeArray`，我们可以轻松地将这些伪数组转换为可以使用数组方法的数组。例如： ```javascript // 使用arguments function fun() { var ary = makeArray(arguments); console.log(ary.constructor === Array); // 输出：true } // 使用getElementsByTagName var els = document.getElementsByTagName("p"); var ary1 = makeArray(els); console.log(ary1.constructor === Array); // 输出：true // 使用自定义对象 var obj = { 0: "一", 1: "二", 2: "三", length: 3 }; var ary2 = makeArray(obj); console.log(ary2.constructor === Array); // 输出：true ``` 将HTMLCollection、NodeList和其他伪数组转换为数组是JavaScript中常见的操作，它能让我们充分利用数组的方法进行更灵活的数据处理。通过`makeArray`函数，我们可以确保这些对象能够适应各种需要数组功能的场景。

可以使用Array.from()方法将HTMLCollection转换成数组。例如： ``` const htmlCollection = document.getElementsByTagName('div'); const array = Array.from(htmlCollection); ``` 这样就将获取到的div元素集合转换成了数组。

阅读全文

htmlcollection转换成array

相关推荐

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

HTMLCollection 转换

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

08-HTMLCollection-NodeList-区别.md

js将类数组对象转换成数组对象

js中将具有数字属性名的对象转换为数组

js中将具有数字属性名的对象转换为数组.docx

JavaScript: HTMLCollection/NodeList 转换为真数组及示例

to-array.js：实现基元和对象的数组转换技术

JavaScript中的NodeList与HTMLCollection浏览器差异解析

HTMLCollection和NodeList的区别：前端面试基础知识

JavaScript将数字属性对象转换为数组的方法

HTMLCollection forEach

js遍历HTMLCollection

htmlcollection 如何修改

解释这段代码Array.from(document.getElementsByClassName('songItem')).forEach((element,i)

java的JavaScript中列表怎么转换成数组

cairo-devel-1.15.12-4.el7.x86_64.rpm.zip

abrt-devel-2.1.11-60.el7.centos.i686.rpm.zip

最新推荐

JS动态的把左边列表添加到右边的实现代码(可上下移动)

cairo-devel-1.15.12-4.el7.x86_64.rpm.zip

Angular程序高效加载与展示海量Excel数据技巧

管理建模和仿真的文件

【SecureCRT高亮技巧】：20年经验技术大佬的个性化设置指南

如何设计一个基于FPGA的多功能数字钟，实现24小时计时、手动校时和定时闹钟功能？

Argos客户端开发流程及Vue配置指南

"互动学习：行动中的多样性与论文攻读经历"

【SecureCRT高亮规则深度解析】：让日志输出一目了然的秘诀

在用友U8 UFO报表系统中，如何通过格式管理功能实现报表的格式与样式自定义？