7

测试.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 代表 HTMLCollenction。

这里说 HTMLCollection 还通过名称和索引将其成员直接公开为属性。

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

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

4

3 回答 3

15

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

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

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

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

于 2015-08-26T09:04:57.290 回答
2

运行代码时，您的 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>

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

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

（或者另一种技术是使用“准备好的”脚本，比如document.loador $(function(){）

于 2015-08-26T09:06:38.870 回答
-2

使用以下代码访问 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>
于 2015-08-26T09:43:36.440 回答