这篇文章主要介绍了关于NodeList 和 HTMLCollection 和 Array的解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下Array,NodeList, HTMLCollection这三个概念和它们之间的关系有很多做了几年前端的同学都搞不清楚,经常遇到但是又感觉很陌生,剪不断理还乱的感觉。今天咱们就来理清这三个东西。对于Array大家差不多都能弄明白,但是HTMLCollectio、NodeList和Array的关系好像总是很暧昧,有一点像但是又不那么...
在您开始本文的阅读前,我强烈建议您可以先读一读此篇:http://w3help.org/zh-cn/causes/SD9004.HTMLCollection 接口定义 interface HTMLCollection{ readonly attribute unsigned long length; Node item(in unsigned long index); Node namedItem(in DOMString name);}对于 HTMLCollection集合对象 必须要说一说的是 namedItem方法. 看看规范的解释.原文:namedItem methodThis metho...
代码如下: interface HTMLCollection { //包含结点的个数 readonly attribute unsigned long length; //根据指定的索引index,返回相应的结点 //HTMLCollection中的结点呈树形结构,索引值index是结点深度优先方式排序的序号 Node item (in unsigned long index); //根据结点的name或者id的属性返回相应的结点 Node namedItem (in DOMString name); }
这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments 。 2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。 3,特殊写法的对象 ,如 代码如下: var obj={}; obj[0] = "一"; obj[1] = "二"; ...
这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments 。 2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。 3,特殊写法的对象 ,如 代码如下: var obj={}; obj[0] = "一"; obj[1] = "二"; ...
这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments 。 2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。 3,特殊写法的对象 ,如 代码如下:var obj={}; obj[0] = "一"; obj[1] = "二"; o...
这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments 。 2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。 3,特殊写法的对象 ,如 代码如下:var obj={}; obj[0] = "一"; obj[1] = "二"; o...
代码如下:interface HTMLCollection { //包含结点的个数 readonly attribute unsigned long length; //根据指定的索引index,返回相应的结点 //HTMLCollection中的结点呈树形结构,索引值index是结点深度优先方式排序的序号 Node item (in unsigned long index); //根据结点的name或者id的属性返回相应的结点 Node namedItem (in DOMString name); }
在您开始本文的阅读前,我强烈建议您可以先读一读此篇:http://w3help.org/zh-cn/causes/SD9004.
HTMLCollection 接口定义
interface HTMLCollection{ readonly attribute unsigned long length; Node item(in unsigned long index); Node namedItem(in DOMString name);}
对于 HTMLCollection集合对象 必须要说一说的是 namedItem方法. 看看规范的解释.原文:namedItem...
本篇文章给大家带来的内容是关于了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。这三个都是类数组对象。HTMLCollection只包含元素节点,而NodeList包含任何节点类型。HTMLCollection对象可以调用item()和namedItem()方法,NodeList对象只能调用item()方法。在获取元素时,两者都可以通过方括号的语法或item()方法。HTMLCollection对象允许通过namedIt...
最近在看《Javascript高级程序设计》的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在。”,所以觉得应该写一篇关于NodeList和HTMLCollection的博客来好好了解和总结下这方面的知识点。 NodeList NodeList是一个节点的集合(既可以包含元素和其他节点),在DOM中,节点的类型总共有12种,通过判断节点的nodeType来判断节点的类型。 我们可以通过Node.childNodes和...
1.节点都是单个对象,DOM 提供两种节点集合NodeList和HTMLCollection,用于容纳多个节点。
2.NodeList可以包含各种类型的节点,HTMLCollection只能包含 HTML 元素节点。
3.NodeList实例是一个类似数组的对象,它的成员是节点对象。通过以下方法可以得到NodeList实例。
Node.childNodesdocument.querySelectorAll()等节点搜索方法
3.NodeList.prototype.length属性返回 NodeList 实例包含的节点数量。
4.NodeList.prototype.forEach(...
假设我们有这样的东西:<a href="1" class="my-list">1</a>
<a href="2" class="my-list">2</a>
<a href="3" class="my-list">3</a>当我尝试类似alert(document.getElementsByClassName("my-list"))我得到对象HTMLCollection.而且,如果我尝试类似alert(document.getElementsByClassName(“ my-list”)[0])之类的东西,则无法定义.如何获得列表中的第一个href?因此,在这种情况下将为“ 1”.解决方法:在Fiddler中进行检查.将document...
这听起来像是一个愚蠢的问题,但var arr1 = ['1', '2'];
var arr2 = ['3', '4'];
console.log(arr1.concat(arr2));将输出[“ 1”,“ 2”,“ 3”,“ 4”]
但var arr1 = ['1', '2'];
console.log(arr1.concat(document.getElementsByTagName('h1'))
);将输出[“ 1”,“ 2”,HTMLCollection [2]]
如何将html集合与数组连接在一起?解决方法:您需要将HTMLCollection转换为数组.在现代Javascript中,执行此操作的最佳方法是Array.from.这会...
我不确定我目前的实施是否始终可用:function isNodeList(nodes) {var result = Object.prototype.toString.call(nodes);// modern browser such as IE9 / firefox / chrome etc.if (result === '[object HTMLCollection]' || result === '[object NodeList]') {return true;}//ie 6/7/8if (typeof(nodes) != 'object') {return false;}// detect length and item if (!('length' in nodes) || !('item' in nodes)) {return false;...