无法访问 HTMLCollection 的值

Question

test.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>

我检查过 eles 代表 HTMLCollection。

Here 表示 HTMLCollection 还通过名称和索引将其成员直接公开为属性。

所以我尝试通过 console.log(eles.length) 和 console.log(eles[0]) 进行调试。但不幸的是控制台显示 0 和未定义。（使用 Google Chrome Tool Developer）

如何访问eles的结果？我想更改样式并向 ClassName 获取的标签添加属性。另外，我只能使用自然 Javascript.

Answer 1

问题是您将脚本放在 header 中，该脚本在加载 html 元素之前执行，因此 getElementsByClassName() 不会 return 任何元素。

一个解决方案是等待 html 元素被加载然后执行你的脚本，为此你可以使用 window objects 加载事件

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

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

Answer 2

当您运行代码时，您的 html 元素不存在。您的代码已被处理，此时您的 body 标签不存在。所以：

<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>

工作正常，因为您运行您的代码在添加了您的 html 元素之后。

最佳做法是您通常将 javascript 放在 body 标签的末尾。

（或者另一种技术是使用 'ready' 脚本，例如 document.load 或 $(function(){）

Answer 3

使用以下代码访问 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>

无法访问 HTMLCollection 的值

Can't access the value of HTMLCollection

html

javascript

dom

htmlcollection