如何使用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>

我想參考“ 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')....

較新的語法（即<9不支持）：

a）如果您期望多個元素：

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

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

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