如何使用JavaScript访问Div标签的内部Text？

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>

I want to get inner content of "div_l" class with reference to "main_box" class. I have tried above code but its not working.

Answer 1

像这样：

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

Answer 2

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

you need to tell WHICH node to get the child of, since gEBCN() returns a node LIST , not just a single node.

Answer 3

What about using jQuery?

Example :

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

Answer 4

在jQuery中 ：

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

Answer 5

There are different variants to reach this. As already answered you could use getElementsByClassName, only thing you missed is that this function returns an array.

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

A newer syntax (not supported by ie < 9) is:

a) in case you expect more than one element:

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

b) in case you expect max one one:

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