JavaScript 中的 `innerHTML`、`innerText`、`textContent` 和 `value` 有什麼不同？

探索 innerHTML、innerText 和 value 的細微差別

在 JavaScript 中使用元素時，必須了解 innerHTML、 insideText 和 value 屬性。每個都有特定的用途並具有自己的特徵。

innerHTML 表示元素內的 HTML 內容。它包括所有子元素、文字和任何 HTML 標記。它允許我們透過插入、取代或刪除 HTML 程式碼來動態修改 DOM 結構。例如：

document.getElementById('element').innerHTML = '<p>New content</p>';

innerText 檢索或設定元素的開始和結束標記之間的文字內容。它具有樣式感知能力，並且會忽略任何 HTML 標籤或空格。這意味著它呈現元素文字的“渲染”版本。例如：

console.log(document.getElementById('element').innerText); // "Rendered text without HTML tags"

textContent 儲存元素及其所有後代的文字內容。但是，它忽略任何 HTML 語法或樣式，並將整個文字內容作為字串提供。當您需要完整的文字內容（包括隱藏文字或空白文字）時，它特別有用。例如：

console.log(document.getElementById('element').textContent); // "Complete text content, including whitespace"

值依元素類型而變化。對於輸入元素，它代表當前使用者輸入。對於選擇元素，它會傳回所選選項的值。對於未定義 value 屬性的元素，它通常會傳回 null。例如：

console.log(document.getElementById('input').value); // "User-entered value"

要說明這些屬性之間的差異，請考慮以下HTML 程式碼段：

<div>
<p>執行以下JavaScript 程式碼：</p>
<pre class="brush:php;toolbar:false">console.log(document.getElementById('test').innerHTML);
console.log(document.getElementById('test').innerText);
console.log(document.getElementById('test').textContent);

將產生以下輸出：

"
Warning: This element contains <code>code</code> and <strong>strong language</strong>.
"
"Warning: This element contains code and strong language."
"
Warning: This element contains code and strong language.
"