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

innerText、innerHTML、value の違いを調べる

違いを理解する

JavaScript では、innerText 属性、 innerHTML と value は、Web ページの HTML コンテンツを操作するためのさまざまな方法を提供します。これらの各属性には、独自の機能と使用例があります。

innerHTML: HTML 表現

innerHTML プロパティは、要素の子孫を記述する HTML 構文を反映します。これは、要素の開始タグと終了タグ内の HTML コンテンツの表現を提供します。

innerText: レンダリングされたテキスト

innerText プロパティは、要素内のレンダリングされたテキストをキャプチャします。適用されたスタイルと空白ルールを考慮して、画面に表示されるとおりにコンテンツが表示されます。具体的には、 innerText:

• スクリプト タグと CSS スタイルシートを無視します
• 空白を削除し、要素間に改行を追加します
  - テキスト変換と空白ルールを適用します

textContent: Raw Text

textContent は、ノードとその子孫のテキスト コンテンツを取得します。 innerText とは異なり、空白は保持され、適用されたスタイルや表示プロパティは無視されます。これにより、コンテンツがよりリテラルに表現されます。

value: 要素固有の属性

value 属性は、主にテキスト ボックスやチェックボックスなどのフォーム入力に適用されます。これは、コントロールに現在格納されている値を表します。特に注意すべき点:

• input 要素の場合、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 中国語 Web サイトの他の関連記事を参照してください。