JavaScriptのgetElementsByClassNameについて

以下のHTMLからgetElementsByClassNameを使って要素を取り出そうとしたのですが、console.logを使って値を確認したところclass=barの戻り値が空配列になっていました。これはなぜでしょうか。ブラウザはchromeです。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>test</title>
5  <meta charset="UTF-8">
6</head>
7<body>
8  <div class="js">
9    <ul class="js-test">
10      <li class="foo">foo</li>
11    </ul>
12  </div>
13  <script src="test.js"></script>
14  <div class="js">
15    <ul class="js-test">
16      <li class="bar">bar</li>
17    </ul>
18  </div>
19 </body>
20 </html>

test.js
1var ele1 = document.getElementsByClassName('foo');
2var ele2 = document.getElementsByClassName('bar');
3console.log(ele1);
4console.log(ele2);

また、chromeの開発ツールを開いたままページをリロードすると上の画像のような結果になるのですが、リロードしたあとに開発ツールを開くと以下のようになります。なぜlogの結果が異なるのでしょうか。以上二点よろしくお願いします。

行動規範の内容に同意します

回答2件

test.jsが実行された時点ではまだHTMLパーサが <li class="bar"> を読み込んでDOMツリーに追加していないからですね。
ただし、getElementsByClassName の返り値は live ですので同じ変数でもタイミングによっては <li class="bar"> を参照可能だと思われます。

Re: qwe さん

投稿2016/09/19 12:57

think49

総合スコア18194

退会済みユーザー

2016/09/20 03:09

回答ありがとうございます。参考になりました。

行動規範の内容に同意します

ベストアンサー

中途半端なところでtest.jsを呼ばず、onloadしてから実行するようにしてみてはいかがでしょうか？

javascript
1<script>
2window.onload=function(){
3  var s=document.createElement("script");
4  s.setAttribute("src","test.js");
5  s.setAttribute("type","text/javascript");
6  document.getElementsByTagName("head")[0].appendChild(s);
7}
8</script>
9<div class="js">
10<ul class="js-test">
11<li class="foo">foo</li>
12</ul>
13</div>
14<div class="js">
15<ul class="js-test">
16<li class="bar">bar</li>
17</ul>
18</div>
19