javascript 无法访问 HTMLCollection 的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32222255/
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
Can't access the value of HTMLCollection
提问by REI
test.html
测试.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
// for(var i=0, max=eles.length)
</script>
</head>
<body>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
</body>
I checked eles represents HTMLCollenction.
我检查了 eles 代表 HTMLCollection。
Heresays HTMLCollection also exposes its members directly as properties by both name and index.
这里说 HTMLCollection 还通过名称和索引将其成员直接公开为属性。
So I tried to debug by console.log(eles.length) and console.log(eles[0]). But unfortunately console shows 0 and undefined.(using Google Chrome Tool Developer)
所以我尝试通过console.log(eles.length)和console.log(eles[0])进行调试。但不幸的是控制台显示 0 和未定义。（使用 Google Chrome Tool Developer）
How can I access the result of eles? I want to change style and add attribute to the tags gotten by ClassName. Plus, I can only use natural Javascript.
如何访问eles的结果？我想更改样式并向 ClassName 获取的标签添加属性。另外，我只能使用自然的 Javascript。
回答by Arun P Johny
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 bodyelement instead of in headso that by the time the script is parsed and executed the elements are loaded in the dom
或者您可以将脚本放在body元素的底部而不是在元素中，head以便在解析和执行脚本时将元素加载到 dom 中
回答by atmd
Your html elements dont exist when you run the code. you code is processed, at that poiint your body tag doesnt exist. so:
运行代码时，您的 html 元素不存在。您的代码已处理，此时您的正文标签不存在。所以：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<script>
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
</script>
</body>
Works fine because you've ran your code afteryour html elements have been added.
工作正常，因为您在添加 html 元素后运行了代码。
Best practices are that you generally have your javascript right at the end of your bodytag.
最佳做法是您通常将 javascript 放在body标签的末尾。
(Or another technique is using a 'ready' script, like document.loador $(function(){)
（或者另一种技术是使用“就绪”脚本，例如document.load或$(function(){）
回答by NaveenG
Use below code for access 0 position element:-
使用以下代码访问 0 位置元素：-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
</body>
<script>
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
// for(var i=0, max=eles.length)
</script>
</html>
