7

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 と undefined が表示されます。(Google Chrome Tool Developer を使用)

eles の結果にアクセスするにはどうすればよいですか? ClassNameで取得したタグにスタイルを変更して属性を追加したい。さらに、自然な Javascript しか使用できません。

4

3 に答える 3

15

問題は、html 要素がロードされる前に実行されるヘッダーにスクリプトを配置したため、要素がgetElementsByClassName()返されないことです。

1 つの解決策は、html 要素がロードされるのを待ってからスクリプトを実行することです。そのために、ウィンドウ オブジェクトのロード イベントを使用できます。

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

または、スクリプトが解析されて実行されるまでに要素が dom にロードされるように、body要素の代わりに要素の下部にスクリプトを配置することもできます。head

于 2015-08-26T09:04:57.290 に答える
-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 に答える