如何在不修改 DOM 的情況下從元素中提取文字節點？

在不改變DOM 結構的情況下檢索文字節點

在某些場景下，需要在不修改元素結構的情況下提取元素的文字內容。例如，在以下 HTML 程式碼中：

<div>

如果期望的輸出是獲取文字“我是文字節點”，同時保留“編輯”標籤，則需要跨瀏覽器解決方案。

利用JavaScript 的Element.contents() 和Node.TEXT_NODE

為了實現這一點，我們可以利用JavaScript 的Element.contents() 和Node.TEXT_NODE 屬性。這是一個簡潔而有效的程式碼片段：

var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();

分解解決方案：

• $(".title").contents(): This函數傳回所選元素內具有類別「title」的所有直接子節點的集合。
• .filter()：過濾器函數會循環遍歷每個子節點，僅傳回 Node.TEXT_NODE 類型的子節點。
• .text()：此方法擷取過濾結果的文字內容。

因此，使用這種技術，我們可以在不改變HTML結構的情況下成功取得「我是文字節點」部分。此解決方案與所有主流網頁瀏覽器相容，確保跨瀏覽器功能。

以上是如何在不修改 DOM 的情況下從元素中提取文字節點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！