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
为什么有时候返回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
NodeList 对象类似 HTMLCollection 对象。...一些旧版本浏览器中的方法(如:getElementsByClassName())返回的是 NodeList 对象,而不是 HTMLCollection 对象。...与 NodeList 的区别 HTMLCollection 是 HTML 元素的集合。...NodeList 与 HTMLCollection 有很多类似的地方。...NodeList 与 HTMLCollection 都有 length 属性。 HTMLCollection 元素可以通过 name,id 或索引来获取。 NodeList 只能通过索引来获取。
不同点(主要表现在HTMLCollection比NodeList能力更强大): 1....注意:IE9、10、11的HTMLCollection与其他浏览器的HTMLCollection可不相同哦,具体请看下一节吧!...,也就是上文说到的带有HTMLCollection特征的[object Object]对象。...八、HTMLAllCollection——HTMLCollection的子类 IE11、Chrome开始,document.all将返回HTMLCollection子类...HTMLAllCollection的对象,其行为特征和HTMLCollection一致。
---- HTMLCollection 对象 getElementsByTagName() 方法返回 HTMLCollection 对象。...HTMLCollection 对象类似包含 HTML 元素的一个数组。...访问第二个 元素可以是以下代码: y = x[1]; HTMLCollection 对象 length 属性 HTMLCollection 对象的 length 属性定义了集合中元素的数量。...HTMLCollection 看起来可能是一个数组,但其实不是。 你可以像数组一样,使用索引来获取元素。...HTMLCollection 无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。
老师的课件归纳如下: 两者的不同点在于: 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的区别你造吗?
// [object HTMLDivElement] 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
一些基础知识 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
$(".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 旧版本浏览器
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
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] 返回的结果是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
除了利用 HTML 本身的层级以外,还可以利用另外一个特性:HTMLCollection。...如果要返回的东西有多个,就返回 HTMLCollection。 <!...Interface HTMLCollection[5] 中提到,可以利用 name 或是 id 去拿 HTMLCollection 里面的元素。 ? 像这样: <!...而如果把 form 跟 HTMLCollection 结合在一起,就能够做到三层: <!...Interface HTMLCollection:https://dom.spec.whatwg.org/#interface-htmlcollection [6] DOM Clobbering strikes
name属性值定位元素 NodeList getElementsByName("pElement") getElementsByClassName() class 通过页面元素的class属性定位元素 HTMLCollection...getElementsByClassName("pElements") getElementsByTagName() 元素名 通过元素的元素名定位元素 HTMLCollection getElementsByTagName...HTML页面中的元素 body 获取HTML页面中的元素 links 获取HTML页面中的元素 images 获取HTML页面中的元素 NodeList与HTMLCollection...HTMLCollection又成动态NodeList,所谓动态的 Nodelist集合,就是如果文档中的节点树发生变化,则已经存在的 Nodelist对象也可能会变化。
> 3333333333 getElementsByTagName() 返回所有指定HTML标签的元素,返回值是一个类似数组的HTMLCollection...可以给标签节点设置css样式 p[3].style.background = 'red'; getElementsByClassName() 返回所有class名字符合指定条件的元素,返回值是一个类似数组的HTMLCollection...document.getElementsByClassName('p'); p[1].style.background = 'yellow'; getElementsByName() 选择拥有name属性的HTML元素,返回值是一个类似数组的HTMLCollection...如果没有发现匹配的节点,则返回null; document.querySelectorAll方法与querySelector用法类似, 区别是返回一个类似数组的HTMLCollection对象,包含所有匹配给定选择器的节点
Array.prototype.push, splice : Array.prototype.splice } 注:若类数组对象没有写push方法,则调用时即会报错 常见的类数组有 arguments 和 HTMLCollection...'1':'b', '2':'c', length:3 }; var arr = Array.from(arrayLike);//['a','b','c'] //demo2 // 把HTMLCollection...同样是ES6中新增的内容,扩展运算符(…)也可以将某些数据结构转为数组 //arguments对象的转换 function list(){ return [...arguments]; } //HTMLCollection
<HTMLCollection(2) [a#test1, a#test1, test1: a#test1] length: 2 0: a#test1 1: a#test1 test1: a#test1...__proto__: HTMLCollection 这里就有一个很有意思的点,HTMLCollection可以使用index进行访问,同时可以使用id访问,也就是window.test1.test1获取到的就是第一个元素...事实证明name属性也会直接注册为HTMLCollection的属性。 click! click2!... > window.test1 < HTMLCollection(2) [a#test1, a#test1, test1: a#test1, test2: a#test1]length: 20:...a#test11: a#test1test1: a#test1test2: a#test1__proto__: HTMLCollection > window.test1.test2 <a id="test1
但在IE5678中 document.links是个类函数,而在Webkit和Molliza中是个HTMLCollection对象。...但在IE5678中 document.scripts是个类函数,而在Webkit和Molliza中是个HTMLCollection对象。...该方法在IE5678下返回的是一个类函数,在Webkit、Molliza下返回一个HTMLCollection对象。...该方法在IE5678下返回的是一个类函数,在Webkit、Molliza下返回一个HTMLCollection对象。...该方法在IE5678下返回的是一个类函数,在Webkit、Molliza下返回一个HTMLCollection对象。
innnerHTML 比普通的创建 dom 节点的方法更快 同胞节点有相同的事件时利用事件委托冒泡给父节点,父节点的事件监听器里结合 switch 进行 event.target 判断 访问 HTMLCollection...的属性或者方法时,都是在文档上进行查询,这个过程会有性能开销,应该最小化访问 HTMLCollection 的次数。
HTMLCollection 对象 注意:IE9及以上版本才支持!... var ele1 = document.getElementsByTagName('p') console.log(ele1); //HTMLCollection...ppp">我是p1 var ele2 = document.getElementsByClassName('ppp') console.log(ele2); //HTMLCollection...(2) [p.ppp, p.ppp] console.log(ele2[0]); //HTMLCollection(2) [p.ppp, p.ppp] var ele3...-- 我是注释 --> var cnode = document.getElementById('test') //HTMLCollection
从何而来 从IE4开始IE的object model才增加了document.all对象,MSDN中也对 Object.all 有详细的说明,Object.all是个HTMLCollection,不是数组...没测试,根据微软的尿性,估计也一样)下: typeof(document.all) “object” 所以..判断为IE 附录: 从IE11、Chrome开始,document.all将返回HTMLCollection...子类HTMLAllCollection的对象,其行为特征和HTMLCollection一致。...(Xee:IE11之前的版本document.all返回HTMLCollection的对象)但IE11中的HTMLAllCollection还可以当作函数使用。 三.
领取专属 10元无门槛券
手把手带您无忧上云