JavaScript 中的 `innerText`、`innerHTML`、`textContent` 和 `value` 之間的主要差異是什麼？

探索innerText、innerHTML 和value 之間的區別

理解差異

在JavaScript 中，屬性inside， inHTner和value 提供了與網頁的HTML 內容互動的不同方式。每個屬性都有自己特定的功能和用例。

innerHTML：HTML 表示

innerHTML 屬性反映了描述元素後代的 HTML 語法。它提供元素的開始和結束標記內的 HTML 內容的表示。

innerText：渲染文字

innerText 屬性捕捉元素內的渲染文字。它呈現螢幕上顯示的內容，同時考慮套用的樣式和空白規則。具體來說，innerText：

• 忽略腳本標籤和CSS樣式表
• 修剪空白並在元素之間添加換行符
  -應用文字轉換和空白規則

文字內容：原始Text

textContent 擷取節點及其後代的文字內容。與innerText不同，它保留空白並忽略任何應用程式的樣式或顯示屬性。這會導致內容更加字面化的表示。

value：元素特定屬性

value 屬性主要適用於表單輸入，例如文字方塊和複選框。它表示目前儲存在控制項中的值。值得注意的是：

• 對於輸入元素，value 包含使用者輸入的字串。
• 對於 select 元素，value 包含所選選項的值。

用於比較的範例腳本

以下JavaScript 腳本展示了之間的差異這些屬性：

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  console.log('[' + property + ']' + value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

當應用於下面的HTML程式碼段時，腳本在控制台中輸出以下內容：

<div>

輸出：

[innerHTML][
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
][/innerHTML]
[innerText]Warning: This element contains code and strong language.[/innerText]
[textContent]
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
[/textContent]
[value]null[/value]

此輸出演示了innerText如何返回渲染的文本，innerHTML如何傳回完整的HTML表示，textContent如何傳回原始文字（包括空格）和值（因為test 是一個div 元素）為null。

以上是JavaScript 中的 `innerText`、`innerHTML`、`textContent` 和 `value` 之間的主要差異是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！