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

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

您需要告诉 WHICH 节点获取子节点，因为 gEBCN() 返回节点LIST，而不仅仅是单个节点。

Answer 3

使用 jQuery 怎么样？

例子 ：

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

Answer 4

在jQuery中：

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

Answer 5

有不同的变体可以实现这一目标。正如已经回答的那样，您可以使用 getElementsByClassName，唯一错过的是此函数返回一个数组。

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

较新的语法（ie < 9 不支持）是：

a) 如果您期望多个元素：

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

b）如果您期望最多一个：

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