JavaScript の `innerHTML`、`innerText`、`textContent`、および `value` の違いは何ですか?

innerHTML、innerText、value のニュアンスを探る

JavaScript で要素を操作する場合、innerHTML と innerHTML の違いを理解することが不可欠です。 innerText、および 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 は要素の種類によって異なります。 input 要素の場合、現在のユーザー入力を表します。選択要素の場合は、選択されたオプションの値を返します。 value プロパティを定義していない要素の場合、通常は null を返します。例:

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

これらのプロパティの違いを説明するには、次の HTML スニペットを考えてみましょう:

<div>

次の JavaScript コードを実行します:

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.
"

以上がJavaScript の `innerHTML`、`innerText`、`textContent`、および `value` の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。