無法訪問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代表HTMLCollenction。

這里說HTMLCollection還通過名稱和索引直接將其成員公開為屬性。

所以我嘗試通過console.log（eles.length）和console.log（eles [0]）進行調試。 但不幸的是，控制台顯示0和未定義。（使用谷歌Chrome工具開發人員）

我怎樣才能訪問eles的結果？ 我想更改樣式並將屬性添加到ClassName獲取的標簽。 另外，我只能使用自然的Javascript。

Answer 1

問題是您已將腳本放在標頭中，該標頭在加載html元素之前執行，因此getElementsByClassName()不會返回任何元素。

一種解決方案是等待加載html元素然后執行您的腳本，為此您可以使用窗口對象加載事件

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元素不存在。 你的代碼被處理，在那個poiint你的身體標簽不存在。 所以：

<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元素后運行了代碼。

最佳做法是，您通常在body標記的末尾使用javascript。

（或者另一種技術是使用'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的值

問題描述

3 個解決方案

解決方案1
7 已采納 2015-08-26 09:04:57

解決方案2
2 2015-08-26 09:06:38

解決方案3
0 2015-08-26 09:43:36

無法訪問HTMLCollection的值

問題描述

3 個解決方案

解決方案1 7 已采納 2015-08-26 09:04:57

解決方案2 2 2015-08-26 09:06:38

解決方案3 0 2015-08-26 09:43:36

解決方案1
7 已采納 2015-08-26 09:04:57

解決方案2
2 2015-08-26 09:06:38

解決方案3
0 2015-08-26 09:43:36