Question

I m 试图在 紫外线/代码>中找到所有内容。我写道:



var list = document.getElementsByClassName("events");
console.log(list[0].id);
for (key in list) {
    console.log(key.id);
}


但我只想得出以下产出:

event1
undefined


which is not what I expected. Why is the second console output undefined but the first console output is event1?

Answer 1


在回答最初的问题时,你使用<条码>以内不正确。 在你的代码中,key是该指数。 因此,为了从纸浆中获取价值,你必须填写<条码>[关键]<>条/代码>,并领取该编码,请填写<条码>。 但是,你首先不应使用<条码>。
www.un.org/Depts/DGACM/index_spanish.htm 摘要(2018年12月增加)

从未使用<条形码>用于/in,用于复制名声器或超声波。避免这种情况的原因如下。

最新版本的现代浏览器(Safari、Emme、Khat、 Edge)所有支持文件<>for/of>>在多功能表中的编号为nodeList 或hexachloroCollection。

例如:

var list = document.getElementsByClassName("events");
for (let item of list) {
    console.log(item.id);
}

为了让年长的浏览器(包括像IE这样的东西)参与到各地:

var list = document.getElementsByClassName("events");
for (var i = 0; i < list.length; i++) {
    console.log(list[i].id); //second console output
}

<>t/in系指对物体的特性进行检索。这意味着它将归还物体的所有可变特性。虽然它似乎为阵列(恢复阵列元素或伪装元素)而努力,但它也可以归还不是你从类似阵列要素中期望的物体的其他特性。并且,对什么,<代码>,Collection或? 清单物体可同时拥有其他特性,并随附<> >代号>。我在“ Chrome”中尝试过这一尝试,并用你回收清单中的项目(指数0、1、2、......等)的方式,同时将检索<条码>第和<>项目。 <for/in, iteration一味赢得了超声波工作。



见http://jsfiddle.net/jLG00/FzZ2H/,因为你为什么可以把超文本的录音带上for/in。
在<0>上,for/in, 代谢将归还这些物品(所有物体的可变特性):
0
1
2
item
namedItem
@@iterator
length

希望现在能看到,你为什么希望使用<条码>(千分之0;一、二、三、四、四、五、八、四、五、八、四、五、八、九、八、八、九、八、四、八、九、八、八、九、八、四、八、九、八、九、八、九、八、九、八、八、九、八、八、九、八、九、八、八、八、九、八、八、八、八、八、九、八、八、八、九、八、八、八、八、八、八、八、八、八、八、九、八、八、八、八、八、八、八、八、九、八、八、八、八、八、八、八、八、八、八、八、八、八、八、九、八、八、八、八、八、八、八、八、八、八、八、九、八、八、八、八、八、八、八、八、八、八、八、八、八、八、八、八

Evolution of Browser Support for NodeList and HTMLCollection iteration
下面是浏览器在2015-2018年期间如何演变的演变过程,给你带来新的活力。 现在无需现代浏览器,因为你可以使用上述选择。
www.un.org/Depts/DGACM/index_spanish.htm Update for ES6 in 2015
Added to ES6 is Array.from() that will convert an array-like structure to an actual array.  That allows one to enumerate a list directly like this:
"use strict";

Array.from(document.getElementsByClassName("events")).forEach(function(item) {
   console.log(item.id);
});

Working demo (in, Zheng, andnor as of April2016):https://jsfiddle.net/jer00/8ar4xn2s/


www.un.org/Depts/DGACM/index_spanish.htm Update for ES6 in2016
您现在可以通过在您的法典中添加以下文字来使用ES6:
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

然后,你可以做到:
var list = document.getElementsByClassName("events");
for (var item of list) {
    console.log(item.id);
}

这在目前的 Chrome、 Firefox、 Firefox和 Edge。 这是因为它把Array的探测器放在NodeList和Curentlection原型上,以便当其/在其中利用Array的探测器进行消化。
Working demo: 。


 Second Update for ES6 in Dec2016 
到2016年12月为止,Symbol.iterator <>code>支持已建成-in to Zheng v54 和>50,因此,以下代码本身便可操作。 它尚未建树。

var list = document.getElementsByClassName("events");
for (let item of list) {
    console.log(item.id);
}

Working demo (in Zheng and Generation):

www.un.org/Depts/DGACM/index_spanish.htm 《2017年12月环境科学年鉴》第三次更新
至2017年12月,这一能力在以下条目中进行:<代码>nodeList,载于.querySelectorAll(),但并非载于的“紫外线捕获,载于。 这完全是它们为什么固定一种收集类型,而不是另一种类型。 但是,您至少可以使用以下文件的结果:document.querySelectorAll( with ES6 for/of syntax in current edition of Hur now.
I ve还更新了上述jsFiddle,从而测试了<代码>超声波<>和<代码>。 清单单独列出,并记录jsFiddle本身的产出。
http://www.un.org。
Per mesqueeeb, Symbol.iterator<>code> support has been established-in to Sato, sobre You can use for (let items of list) for orcode>。

<>Fifth Update for ES6 in Apr2018
Apparently, support for iterating an HTMLCollection with for/of will be coming to Edge 18 in Fall 2018.
Sixth Update for ES6 in Nov2018
我可以确认,在Microsoftvant v18(列入Fall2018Windows Update)的情况下,你现在可以把一个超声波和一位有色人/有色人听。
因此,现在所有现代浏览器都含有对<>t_for/of的本地支持,该编码包括超声波和NodeList物体。

Answer 2

可在<条码>上使用<条码>。但是,只要您的<代码>(<<<>>>>>>>,您可以使用某些<代码>Array.prototype方法。 NodeList or Collection as this/code>。

因此,将以下案文视为

var list= document.getElementsByClassName("events");
[].forEach.call(list, function(el) {
    console.log(el.id);
});


https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Why_can t_I_use_forEach_or_map_on_a_NodeList.3F”rel=“noreferer”>article on MDN, 涵盖这一技术。 指出他们关于浏览器兼容性的警告:


  [...] passing a host object (like a NodeList) as
  this to a native method (such as forEach) is not guaranteed to work in
  all browsers and is known to fail in some.

因此,虽然这种做法是方便的,但for lo可能是最可行的解决办法。

<>Update(Aug 30,2014): 最终,您能够使用https://developer.mozilla.org/en-US/docs/Web/Java /Reference/Statements/for...of”rel=“noreferer”>ES<6code>forof!

var list = document.getElementsByClassName("events");
for (const el of list)
  console.log(el.id);

它在最近几版的 Chrome和 Firefox。

Answer 3

在ES6中,你可以做如下事情:[......collection],或Array. from(collection),

let someCollection = document.querySelectorAll(someSelector)
[...someCollection].forEach(someFn) 
//or
Array.from(collection).forEach(someFn)

Eg:-

    navDoms = document.getElementsByClassName( nav-container );
    Array.from(navDoms).forEach(function(navDom){
     //implement function operations
    });

Answer 4

您可以添加以下两条内容:

HTMLCollection.prototype.forEach = Array.prototype.forEach;
NodeList.prototype.forEach = Array.prototype.forEach;

getElementsByClassName和>>>>>>>>>。

<>m>NodeList 是querySelectorAll> 返回的。

和大家一样:

var selections = document.getElementsByClassName( myClass ); /* alternative : var selections = document.querySelectorAll( .myClass ); */ selections.forEach(function(element, i){ //do your stuffs });

Answer 5

替代Array. from is to use Array.prototype.forEach. Screen/code>


forEach:
Array.prototype.forEach.call(htmlCollection, i => { console.log(i) });
map:Array.prototype.map.(htmlCollection, i =>{ console.log(i)});

Answer 6


There s no reason to use es6 features to escape for looping if you re on IE9 or above.

In ES5, there are two good options. First, you can "borrow" Array s forEach as evan mentions.

甚至更好......

Use Object.keys(), which does have forEach and filters to "own properties" automatically.

也就是说,Object.keys基本上等于在上为......做一个“>>,其中附有“HasOwnProperty,但更为顺利。

var eventNodes = document.getElementsByClassName("events");
Object.keys(eventNodes).forEach(function (key) {
    console.log(eventNodes[key].id);
});

Answer 7

在IE 11和上,我有一个问题,即:Firefox 49。

我已经找到了这样的工作。

Array.prototype.slice.call(document.getElementsByClassName("events")).forEach(function (key) {
        console.log(key.id);
    }

Answer 8

截至2016年3月, Chrome49.0,for.of 。

this.headers = this.getElementsByTagName("header");

for (var header of this.headers) {
    console.log(header); 
}

见。

但是,只有在你使用<<>条码>实施<<>条码>的<>>四舍五入>时,方可使用:

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

使用<<>t>of和NodeList同样必要:

NamedNodeMap.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

我相信/hopefor...of,很快将不进行上述工作。这里的问题是:

https://bugs.chromium.org/p/chromium/issues/detail?id=401699

<>Update: 见Expenzor以下评论:截至2016年4月已经确定。无需添加超文本的Collection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];为了......of,用超文本的录音打听

Answer 9

方便的工作,我总是使用

let list = document.getElementsByClassName("events");
let listArr = Array.from(list)

After this you can run any desired Array methods on the selection

listArr.map(item => console.log(item.id))
listArr.forEach(item => console.log(item.id))
listArr.reverse()

Answer 10

On

if(!NodeList.prototype.forEach) {
  NodeList.prototype.forEach = function(fn, scope) {
    for(var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope, this[i], i, this);
    }
  }
}

Answer 11

如果您使用旧的ESvar(例如ES5),可使用<代码>作为任何:

for (let element of elementsToIterate as any) {
      console.log(element);
}

Answer 12

You can also do like this:

 let elements = document.getElementsByClassName("classname");
 f或(let index in  elements) {
   if(index <= elements.length) {
        console.log(elements[index]);
  }
}

let elements = document.getElementsByClassName("classname");
f或 (let index in elements) {
  if (index <= elements.length) {
    console.log(elements[index]);
  }
}

<div class="classname"> element 1 </div>
<div class="classname"> element 2 </div>
<div class="classname"> element 3 </div>

或

 let elements = document.getElementsByClassName("classname");
 f或(let ele of  elements) {
        console.log(ele);
}

let elements = document.getElementsByClassName("classname");
f或 (let ele of elements) {
  console.log(ele);
}

<div class="classname"> element 1 </div>
<div class="classname"> element 2 </div>
<div class="classname"> element 3 </div>
<div class="classname"> element 4 </div>

Answer 13

你们想要改变这一方向。

var list= document.getElementsByClassName("events");
console.log(list[0].id); //first console output
for (key in list){
    console.log(list[key].id); //second console output
}

Answer 14

删除<代码>数据清单中的所有备选办法:

function removeOptions(datalist_id) {
    const selectElement = document.getElementById(datalist_id);
    Array.from(selectElement.children).forEach(el=> el.remove());
}

接着说:

removeOptions("your_datalist_id");

Use `Object.keys()`, which does have `forEach` and filters to "own properties" automatically.

友情链接