如何使用純 JavaScript 從 Div 元素取得文字內容？

使用純JavaScript 從Div 元素獲取文本內容

嘗試使用“value”屬性檢索div 中的文本，您遇到了返回“未定義”的問題。若要使用純 JavaScript 成功擷取文字內容，您可以使用以下方法：

「value」屬性主要用於 input 元素，而不是 div 元素。要存取 div 的文字內容，您應該利用“innerHTML”或“textContent”屬性。

使用「innerHTML」屬性：

function test() {
  var t = document.getElementById('superman').innerHTML;
  alert(t);
}

此方法檢索整個div 中的內容，包括任何 HTML 標籤。但是，如果您的 div 僅包含文本，則此方法是合適的。

或者，考慮使用「textContent」屬性：

function test() {
  var t = document.getElementById('superman').textContent;
  alert(t);
}

「textContent」屬性僅傳回其中的文字內容div，不包括任何 HTML 標籤。在處理可能包含混合內容的 div 時，此選項特別有用。

例如，考慮以下HTML：

<div id="test">
  Some <span class="foo">sample</span> text.
</div>

使用「innerHTML」屬性會傳回以下內容：

var node = document.getElementById('test');

htmlContent = node.innerHTML;
// htmlContent = "Some <span class="foo">sample</span> text."

但是，利用「textContent」屬性將產生：

textContent = node.textContent;
// textContent = "Some sample text."

有關更多詳細資訊和使用範例，請參閱MDN 提供的綜合文件：

• [textContent](https://developer.mozilla.org/en -US/docs/Web/API/Node/textContent)
• [innerHTML](https://developer.mozilla.org /en-US/docs/Web/API/Element/innerHTML)

以上是如何使用純 JavaScript 從 Div 元素取得文字內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！