详解NodeList 和 HTMLCollection 和 Array

HTMLCollection 认识了NodeList，我们再来认识一下HTMLCollection，同样我们先获取到一个HTMLCollection，在控制台中输入并执行： document.getElementsByTagName 可以看到得到的HTMLCollection继承于一个HTMLCollection对象，而HTMLCollection又直接继承于Object对象，所以它和NodeList是平级的。 什么情况下得到的是NodeList，什么情况是HTMLCollection呢？ MDN上是这么介绍HTMLCollection的： Note: This interface is called HTMLCollection for historical reasons (before 翻译一下就是： 之所以叫它HTMLCollection是因为某些历史原因，在新一代DOM出现之前，实现HTMLCollection这个接口的集合只包含HTML元素，所以命名为HTMLCollection

JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)

为什么有时候返回HTMLCollection ，有时候返回NodeList？ HTMLCollection 和  NodeList 的区别又是什么？带着这些问题进入本篇的学习。 DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。 HTMLCollection 是表示 HTML 元素的集合。 对象 HTMLCollection只能包含 元素节点(ElementNode)类型的节点, 以下方法返回HTMLCollection对象 document.getElementsByClassName HTMLCollection.namedItem(name) 或 HTMLCollection[name] 使用示例，以下两种方法都可以 // namedItem 根据id 或name属性取值 console.log 与NodeList区别 HTMLCollection 是表示 HTML 元素的集合，元素也是节点的一种，也就是元素节点，NodeList 是表示节点的集合 我们可以理解为 HTMLCollection

JavaScript HTML DOM 节点列表

NodeList 对象类似 HTMLCollection 对象。 一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。 与 NodeList 的区别 HTMLCollection 是 HTML 元素的集合。 NodeList 与 HTMLCollection 有很多类似的地方。 NodeList 与 HTMLCollection 都有 length 属性。 HTMLCollection 元素可以通过 name，id 或索引来获取。 NodeList 只能通过索引来获取。

【Web APIs】DOM 文档对象模型 ② ( 根据标签名获取 DOM 元素 - getElementsByTagName 函数 | 获取指定标签下的 DOM 元素 )

文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection 一、获取 DOM 元素 1、根据标签名获取 DOM 元素 - 对象 ; 该对象中的 DOM 元素顺序是按照 DOM 树的 DOM 元素 发现顺序 进行排列的 ; HTMLCollection 对象是一个 " 伪数组 " , 有数组长度 , 也可以使用索引下标访问 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection 完整代码示例 : <! 对象 ; HTMLCollection 对象是 时刻 动态改变的 , 如果 HTML 文档结构发生了改变 , HTMLCollection 对象会进行自动更新 , 如果要操作 HTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection 完整代码示例 : <!

JavaScript HTML DOM 集合(Collection)

---- HTMLCollection 对象 getElementsByTagName() 方法返回 HTMLCollection 对象。 HTMLCollection 对象类似包含 HTML 元素的一个数组。 访问第二个

元素可以是以下代码: y = x[1]; HTMLCollection 对象 length 属性 HTMLCollection 对象的 length 属性定义了集合中元素的数量。 HTMLCollection 看起来可能是一个数组，但其实不是。 你可以像数组一样，使用索引来获取元素。 HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

DOM中历史遗留的那些天坑 ...

老师的课件归纳如下： 两者的不同点在于： HTMLCollection对象具有namedItem()方法，可以传递id或name获得元素； HTMLCollection的item()方法和通过属性获取元素 范畴，两者的区别在于： 方法略有差异：HTMLCollection比NodeList多了一个namedItem方法，其他方法保持一致 包含节点类型不同：NodeList可以包含任何节点类型，HTMLCollection 的区别是： NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（elementNode），elementNode就是HTML中的标签 HTMLCollection比 由于HTMLCollection仅包含elementNode，因此最终的结果就是由p.para, p.attr组成的类数组对象。 NodeList and HTMLCollection Interface HTMLCollection Element和Node的区别你造吗？

JS魔法堂：那些困扰你的DOM集合类型

不同点（主要表现在HTMLCollection比NodeList能力更强大）： 　　　　1. 注意：IE9、10、11的HTMLCollection与其他浏览器的HTMLCollection可不相同哦，具体请看下一节吧！ ，也就是上文说到的带有HTMLCollection特征的[object Object]对象。 八、HTMLAllCollection——HTMLCollection的子类　　　　　　　　　　　　　　　 　　IE11、Chrome开始，document.all将返回HTMLCollection子类 HTMLAllCollection的对象，其行为特征和HTMLCollection一致。

JavaScript选择器

// [object HTMLDivElement] </script> getElementsByClassName 通过class属性来定位，返回文档中指定class属性值的元素的引用，返回类型为HTMLCollection text/javascript"> var t2List = document.getElementsByClassName("t2"); console.log(t2List); // HTMLCollection div.t2, div.t2] // 使用for循环遍历 for(let i=0,n=t2List.length;i<n;++i) console.log(t2List[i]); // HTMLCollection prototype中forEach通过call绑定对象实例并传参 Array.prototype.forEach.call(t2List,v => console.log(v) ); // HTMLCollection "text/javascript"> var t4List = document.getElementsByTagName("p"); console.log(t4List); // HTMLCollection

面试题：HTML标签的相关操作判断题目

一些基础知识 getElementsByTagName() 在DOM中根据标签去获取元素的原生api是 getElementsByTagName()，它返回的是一个包含所有给定标签名称的元素 HTML集合HTMLCollection HTMLCollection 还有一点需要注意： HTMLCollection 对象是一种类数组对象，可以通过位置来访问。 请注意，虽然可以通过方括号语法来访问 HTMLCollection 的值，而且这个对象也有length属性，但是它并不是Array的实例。 下面几种方法都可以实现： 扩展运算符可以将其转为真正的数组，这个里面也是有一点需要注意，是因为 HTMLCollection 对象实现了 Iterator。 参考资料 [1] HTMLCollection: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection [2] ECMAScript

【Web APIs】DOM 文档对象模型 ③ ( 根据类名获取 DOM 元素 - getElementsByClassName 函数 | 代码示例 )

getElementsByTagName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagName HTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection getElementsByClassName 文档 : https getElementsByClassName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName HTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection 2、代码示例 - 获取 文档中 指定类名的 DOM 元素 在下面的代码中 document.getElementsByClassName("box"); // 控制台打印获取结果 console.log(elements); // 遍历 HTMLCollection

【Web APIs】JavaScript 操作多个元素 ① ( 多选一互斥按钮案例 | getElementsByTagName 方法获取 HTMLCollection 伪数组对象 )

案例核心要点 - getElementsByTagName 方法获取多个元素 通过调用 Document 对象 或 Element 对象的 getElementsByTagName 方法 , 可以得到一个 HTMLCollection 对象 , 这是一个 伪数组 , 可通过数组下标获取 DOM 对象 ; getElementsByTagName 函数原型如下 : HTMLCollection getElementsByTagName (String tagName); tagName 参数 : 元素的标签名称 , 表示要查找的元素的标签名 , 该参数是不区分大小写 ; 返回一个 HTMLCollection 对象 , 这是一个动态更新的集合 , 包含了所有匹配的元素 , HTMLCollection 类似于数组 , 但它并不是一个真正的数组 , 无法使用数组的许多方法 , 可以使用数组下标访问 Element 元素 ; HTMLCollection 是 实时集合 , 也就是 如果该方法被调用后 , 文档结构发生了改变 , 那么 HTMLCollection 集合中的元素 , 也要跟着更新 ; 调用 document.getElementsByTagName

获取DOM节点的方法汇总

$(".A").eq(0) 获取所有A节点中的第一个A节点 $("A").filter("B") 获取A节点中的所有B节点 $("A").not("B") 获取A节点中的不包括B节点的所有节点 3.HTMLCollection HTMLCollection和NodeList的共同点： 都是类数组对象，都有length属性; 都有共同的方法：item，可以通过item(index)或者item(id)来访问返回结果中的元素; 一般都是实时变动的 注意：document.querySelectorAll返回的NodeList不是实时的）; HTMLCollection和NodeList的不同点： NodeList可以包含任何节点类型，HTMLCollection HTMLCollection比NodeList多一项方法：NamedItem，可以通过传递id或name属性来获取节点信息 规定返回结果： node.childNodes 结果返回类型是 NodeList ，即所有子节点； node.children 结果返回类型是 HTMLCollection ，即所有子元素节点； getElementsByXXX 结果返回类型是HTMLCollection 旧版本浏览器

Dom的高级应用

1.对表格的操作 HTML 属性或方法 说明 caption 保存着元素的引用 tBodies 保存着元素的HTMLCollection集合 tFoot 保存着对元素的引用 tHead 保存着对元素的引用 rows 保存着对 元素的HTMLCollection集合 rowIndex 返回该表格行在表格内的索引值 sectionRowIndex 返回该表格行在其所在元素(,等元素)的索引值 cells 保存着元素中单元格的HTMLCollection cellIndex 返回该单元格在该表格行内的索引值。 deleteRow(pos) 删除指定的行 insertRow(pos) 向rows集合中的指定位置插入一行 元素添加的属性和方法 属性或方法 说明 rows 保存着元素中行的HTMLCollection deleteRow(pos) 删除指定位置的行 insertRow(pos) 向rows集合中的指定位置插入一行，并返回引用 元素添加的属性和方法 属性或方法 说明 cells 保存着元素中单元格的HTMLCollection

【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )

getElementsByTagName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagName HTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection getElementsByClassName 文档 : https 如果字符串内容不是 CSS 选择器则会抛出 SYNTAX_ERR 异常 ; 返回值 : 返回 符合 CSS 选择器的 所有 DOM 元素 , 类型是 NodeList 对象 ; NodeList 对象 与 HTMLCollection 对象类似 , 都封装了若干 Element 对象 , 都是 类数组 ( Like Array Object ) 对象 , 可使用 数组下标的方式进行访问 ; NodeList 对象 与 HTMLCollection 对象 的区别是 : HTMLCollection 对象会实时更新 , 如果其中的 DOM 元素发生了改变 , HTMLCollection 对象会马上进行更新 ; NodeList 对象 是静态的 ,

JavaScript 学习-27.查找HTML DOM节点(元素)

document.getElementsByClassName('text') console.log(ele1.length) // 2 console.log(ele1) // HTMLCollection (2) [p.text, p#demo.text.text-info, demo: p#demo.text.text-info] </script> </body> 返回的结果是HTMLCollection document.getElementsByClassName('text-info') console.log(ele2.length) // 1 console.log(ele2) // HTMLCollection [p#demo.text.text-info, demo: p#demo.text.text-info] HTMLCollection对象有length属性，可以统计查找到元素的个数 我们也可以通过class document.getElementsByTagName('p') console.log(ele1.length) // 1 console.log(ele1) // HTMLCollection

DOM Clobbering 的原理及应用

除了利用 HTML 本身的层级以外，还可以利用另外一个特性：HTMLCollection。 如果要返回的东西有多个，就返回 HTMLCollection。 <! Interface HTMLCollection[5] 中提到，可以利用 name 或是 id 去拿 HTMLCollection 里面的元素。 ? 像这样： <! 而如果把 form 跟 HTMLCollection 结合在一起，就能够做到三层： <! Interface HTMLCollection:https://dom.spec.whatwg.org/#interface-htmlcollection [6] DOM Clobbering strikes

09Document对象

name属性值定位元素 NodeList getElementsByName("pElement") getElementsByClassName() class 通过页面元素的class属性定位元素 HTMLCollection getElementsByClassName("pElements") getElementsByTagName() 元素名 通过元素的元素名定位元素 HTMLCollection getElementsByTagName HTML页面中的<title>元素 body 获取HTML页面中的<body>元素 links 获取HTML页面中的元素 images 获取HTML页面中的元素 NodeList与HTMLCollection HTMLCollection又成动态NodeList，所谓动态的 Nodelist集合，就是如果文档中的节点树发生变化，则已经存在的 Nodelist对象也可能会变化。

前端基础-文档对象模型 (DOM)

>

3333333333