标签: htmlcollection

在ES6中,iterable是一个允许的对象for... of,并且具有Symbol.iterator键.

数组是可迭代的,就像集合和地图一样.问题是:HTMLCollection和NodeList是否可迭代？他们应该是吗？

MDN文档似乎暗示a NodeList是可迭代的.

for...of循环将在支持的浏览器for...of(如Firefox 13及更高版本)中正确循环NodeList对象

这似乎证实了Firefox的行为.

我在Chrome和Firefox中测试了以下代码,并且惊讶地发现Firefox似乎认为它们是可迭代的,但Chrome却没有.此外,火狐认为,迭代器返回的HTMLCollection和NodeList是同一个.

var col = document.getElementsByClassName('test'); // Should get HTMLCollection of 2 elems
var nod = document.querySelectorAll('.test');      // Should get NodeList of 2 elems
var arr = [].slice.call(col);                      // Should get Array of 2 elems

console.log(col[Symbol.iterator]);    // Firefox: iterator function, Chrome: undefined
console.log(nod[Symbol.iterator]);    // Firefox: iterator function, Chrome: undefined
console.log(arr[Symbol.iterator]);    // Firefox & Chrome: iterator function
console.log(col[Symbol.iterator] …

首先,抱歉我的英语不好......

我写了一个函数来改变元素类来改变它们的属性.出于某种原因,只有一些元素发生了变化,我花了几个小时才找到解决方案,但他对我来说似乎很奇怪,也许你可以向我解释一下.

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i++) {
    elements[i].className = 'classTwo';               
  }
}

不能正常工作,在这里演示,[在chrome 25和FF],所以我采用了循环系数:

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i) { // Here’s the difference
    elements[i].className = 'classTwo';               
  }
}

这很好用!似乎被称为"推",并且不需要系数......这是正常的吗？它与我见过的例子不同.

提前致谢!

我试过我的谷歌,但我似乎找不到任何好的答案.请帮忙.

编辑:好的,所以我找到了这篇博文.所以它们来自不同的DOM级别,但除此之外它并没有多说......

在我的javascript中,我有两个元素.

我记录了两个元素,它显示了......

要素1.

要素2.

有问题.

当我console.log的element小号.children他们显然还有些HtmlCollection小号

您将在一分钟内理解以下内容:但奇怪的是,一个HtmlCollection为空(并且长度为0),但有3个元素(并且长度为3).

如果您console.log为元素的孩子阅读下面的s,您将理解我在说什么...

元素1儿童和长度:

元素2儿童和长度:(搞砸了)

有谁知道这里发生了什么？

我如何解决这个问题,我需要通过HtmlCollection循环,但它不会让我因为长度是0 ...？

提前致谢!所有帮助赞赏.

将我的JS转换为TS严格模式（非常头痛哈哈）

下面的语法看起来好像没什么问题，但TS在抱怨for环路上allSubMenus有：

[ts] Type 'NodeListOf<Element>' is not an array type or a string type.

我想念什么

function subAct(target:Node){

  const allSubMenus : NodeListOf<Element> = document.querySelectorAll('.subMenuItems') 

  for (const sub of allSubMenus){
    sub.classList.remove('active')
  }  
}

DOM4使NodeList可迭代:

interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

根据WebIDL,这意味着

实现被声明为可迭代的接口的对象被迭代以获得一系列值.

注意:在ECMAScript语言绑定中,可迭代的接口将在其接口原型对象上具有"entries","forEach","keys","values"和 @@ iterator属性.

所以以下是可能的:

for (var el of document.querySelectorAll(selector)) ...

我注意到在Firefox和Chrome上同样适用于HTMLCollections:

for (var el of document.getElementsByTagName(tag)) ...

事实上,我得到了

HTMLCollection.prototype[Symbol.iterator] === [][Symbol.iterator]; // true

但是,HTMLCollection未定义为可迭代:

interface HTMLCollection {
  readonly attribute unsigned long length;
  getter Element? item(unsigned long index);
  getter Element? namedItem(DOMString name …

我想使用forEach方法迭代NodeList,我搜索了该方法,我发现解决方法是将NodeList转换为数组:

var nodesArray = Array.prototype.slice.call(nodeList);
nodesArray.forEach(function(node) { 
    //...
})

但我不明白为什么我们使用这种Array.prototype.slice方法？

我的HTML中有一些带有类的元素,我node-item在组件中使用以下命令访问它们:

let nodeItems = document.getElementsByClassName('node-item');

当我记录nodeItems它给我一个HTMLCollection[]长度为4.

我尝试了很多方法,但仍无法迭代nodeItems:

1-首先尝试:

let bar = [].slice.call(nodeItems);
for (var g of bar){
    console.log(g); //gives me nothing
} 

2秒尝试:

for(let c of <any>nodeItems) {
    console.log(c); //gives me nothing
}

我尝试了数组迭代和对象迭代,但仍然undefined或error.还尝试过:

let nodeItems = document.querySelector(selectors);

但同样的问题.

document.scripts返回一个HTMLCollection包含文档中所有脚本列表的对象。同样，document.getElementsByTagName("script")返回另一个HTMLCollection对象，其中包含文档中所有脚本的列表。

我预计以下陈述是正确的，但事实并非如此。

document.scripts === document.getElementsByTagName("script") // false

这两者不相等的原因是什么？

当引用 HTML 表单中的元素时，我经常使用 name 属性的名称/值。所以，如果表单的名称是“form01”，我指的是表单的书写document.forms.form01。这是一个例子：

let title = document.forms.form01.title;
console.log(title.value);

<form name="form01">
  <input type="text" name="title" value="Hello World">
</form>

这是一个 HTMLCollection，但在DOM 标准 #interface-htmlcollectiondocument.forms的文档中，它没有提到在这样的集合上直接使用名称作为属性（我认为它被称为“命名属性”）的可能性 -就像我用来指代表单元素时一样。相反，文档实际上指出这是“历史文物”——那么，我应该避免使用它吗？document.forms.form01

你能帮我找到这方面的文档吗？要么它是一个可以使用的（好）功能，要么它是应该避免的东西。