使用 Document.querySelector 從 p 獲取文本，不包括跨度值

Question

我有這個元素結構。

<p>
  <span class="ts-aria-only">
  Departure
  </span>
  RUH
  <span class="ts-aria-only">&nbsp;Riyadh</span>
</p>

我正在嘗試獲取文本RUH ，但使用innerText將返回整個文本，包括<span>中的值。

SO上發布的一些答案使用ajax，這不適用於我的用例。

Answer 1

它是一個文本節點，因此不能用查詢字符串選擇。 您必須從其父元素開始並訪問適當的childNodes索引：

 console.log( document.querySelector('p').childNodes[2].textContent.trim() );

 <p> <span class="ts-aria-only"> Departure </span> RUH <span class="ts-aria-only">&nbsp;Riyadh</span> </p>

Answer 2

這應該工作

Array.from(document.querySelector('p').childNodes).reduce((a,b) => a += b.nodeType==3 ? b.textContent.trim() : '' ,'')

基本上你需要檢查每個 childNode 是否是 textNode (nodeType==3) 然后你可以隨心所欲地使用它