如何从 javascript HTMLCollection 中获取元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32905183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 14:21:39  来源:igfitidea点击:

How do you get elements from a javascript HTMLCollection

javascript

提问by Micha? Ziembiński

I can't understand why I cant get elements from a HtmlCollection. This code example:

我不明白为什么我不能从 HtmlCollection 中获取元素。此代码示例:

 var col = (document.getElementsByClassName("jcrop-holder"));
 console.log(col);

produces this output on console:

在控制台上产生这个输出:

enter image description here

在此处输入图片说明

I'm trying to get the dic.jcrop-holder object but i cant get it from my variable col. None of this works:

我正在尝试获取 dic.jcrop-holder 对象,但我无法从变量 col 中获取它。这些都不起作用:

  console.log(col[0]); // undefined
  console.log(col.item(0)); // null

  // check length of collection

  console.log(col.length); // 0

So if the length is 0 why does the console show a length of 1, as well as objects inside? When I open the node it contains children. What's going on?

那么如果长度为 0 为什么控制台显示长度为 1,以及里面的对象?当我打开节点时,它包含子节点。这是怎么回事?

Here are some expanded nodes. I didn't expand div.jcrop.holder because it is too long. Here are children elements:

下面是一些扩展的节点。我没有展开 div.jcrop.holder 因为它太长了。以下是儿童元素:

enter image description here

在此处输入图片说明

采纳答案by jasminejeane

Taken from : Can't access the value of HTMLCollection

取自:无法访问 HTMLCollection 的值

The problem is you have placed the script in the header which gets executed before the html elements are loaded, so getElementsByClassName() will not return any elements.

问题是您已将脚本放在在加载 html 元素之前执行的标题中,因此 getElementsByClassName() 不会返回任何元素。

One solution is to wait for the html elements to be loaded then execute your script, for that you can use the window objects load event

一种解决方案是等待加载 html 元素然后执行您的脚本,为此您可以使用窗口对象加载事件

window.addEventListener('load', function () {
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
})

Or you can place your script at the bottom of the body element instead of in head so that by the time the script is parsed and executed the elements are loaded in the dom

或者,您可以将脚本放在 body 元素的底部而不是 head 中,以便在解析和执行脚本时将元素加载到 dom 中

回答by albertto

look this code, with it you can use a class attribute for a HTMLColletion

看看这段代码,你可以使用它的类属性作为 HTMLColletion

  var eles = document.getElementsByClassName('className');
    for (let i = 0; i < eles.length; i++) {            
            eles[i].addEventListener('click',function(){
                // code ex. eles[i].querySelector(".contenedor").classList.toggle('ocultar');
                // code here...
            })

    } 

回答by Greenish

I was facing the same issue and the solution to this problem was to place my script in the end of the document, in order to wait to the whole document to be loaded before start changing or selecting the HTMLCollection elements. Hope it helps.

我遇到了同样的问题,这个问题的解决方案是将我的脚本放在文档的末尾,以便在开始更改或选择 HTMLCollection 元素之前等待加载整个文档。希望能帮助到你。