javascript - javascriptを使用してDivタグの内部テキストにアクセスするにはどうすればよいですか?

Question

<div class="main_box">
  <div class="div_r">
    <div class="div_l">Hello</div>
  </div>
</div>
<script>
alert(document.getElementsByClassName('main_box').childNodes[1].innerHTML);
</script>

「main_box」クラスを参照して「div_l」クラスの内部コンテンツを取得したい。上記のコードを試しましたが、うまくいきません。

Answer 1

このような：

 document.getElementsByClassName('main_box')[0].childNodes[1].childNodes[1].innerHTML

Answer 2

これに到達するためのさまざまなバリアントがあります。すでに回答したように、getElementsByClassNameを使用できますが、見逃したのは、この関数が配列を返すことだけです。

 document.getElementsByClassName('main_box')....

新しい構文（ie <9ではサポートされていません）は次のとおりです。

a）複数の要素が予想される場合：

 document.querySelectorAll('.main_box .div_r .div_l')[0].innerHTML

b）最大1つを期待する場合：

 document.querySelector('.main_box .div_r .div_l').innerHTML

Answer 3

alert(document.getElementsByClassName('main_box')[0].childNodes[1].innerHTML
                                                 ^^^--

gEBCN() は単一のノードだけでなくノードLISTを返すため、子を取得するノードを指定する必要があります。

Answer 4

jQuery を使用するとどうなりますか?

例 ：

var value = $('.main_box .div_r .div_l').html();

Answer 5

jQueryの場合:

$('.main_box .div_l').text()