在JavaScript中通過父類訪問子元素

Question

如何通過JavaScript中的類通過父元素訪問子元素的innerHTML ，它沒有類或ID？

它應該只返回<b>標簽之間的text 。

<div class="parent element">
  <h5>
    some other text<b>text</b>
  </h5>
</div>

Answer 1

嘗試使用querySelector（）和textContent ：

 var txt = document.querySelector('.parent.element > h5 > b').textContent; console.log(txt) 

 <div class="parent element"> <h5> some other text<b>text</b> </h5> </div> 

Answer 2

您可以將document.querySelector()與CSS選擇器（如.parent.element h5 b document.querySelector()一起使用，它將在h5標記內找到包含parent和element類的元素內的b標記。

然后你可以使用textContent來獲取文本，或者使用innerHTML來獲取文本和標記。

 console.log(document.querySelector('.parent.element h5 b').textContent); // sample when using innerHTML grabbing the h5 console.log(document.querySelector('.parent.element h5').innerHTML); // sample when using textContent grabbing the h5 console.log(document.querySelector('.parent.element h5').textContent); 

 <div class="parent element"> <h5> some other text<b>text</b> </h5> </div> 

---

關於textContent vs innerText注釋：

Internet Explorer引入了node.innerText 。 意圖類似於node.textContent但有以下區別：

• 雖然textContent獲取所有元素的內容，包括<script>和<style>元素，但innerText卻沒有。

• innerText知道樣式，不會返回隱藏元素的文本，而textContent會。

• 由於innerText知道CSS樣式，它將觸發重排，而textContent不會。

• 與textContent不同，在Internet Explorer中更改innerText （包括版本11）不僅會從元素中刪除子節點，還會永久地銷毀所有后代文本節點（因此無法將節點再次插入任何其他元素或相同的元素中元素）。

Answer 3

 var innerText=document.querySelector('.parent.element h5 b').innerText console.log(innerText); 

 <div class="parent element"> <h5> some other text<b>text</b> </h5> </div>