☰

innerText、innerHTML、値の違いは？質問する

tag-icon • tag-icon javascript dom innerhtml innertext
innerText、innerHTML、値の違いは？質問する

JavaScript におけるinnerHTML、、innerTextの違いは何ですか?value

ベストアンサー1

以下の例は、次の HTML スニペットを参照しています。

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

ノードは次の JavaScript によって参照されます。

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


element.innerHTML

要素の子孫を記述するHTML構文を設定または取得します

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

これはW3CのDOM 解析およびシリアル化仕様Elementこれはオブジェクトのプロパティであることに注意してください。


node.innerText

オブジェクトの開始タグと終了タグの間のテキストを設定または取得します

x.innerText
// => "Warning: This element contains code and strong language."
  • innerTextマイクロソフトによって導入され、しばらくの間Firefoxではサポートされていませんでした。2016年8月innerTextにWHATWGによって採択されたFirefox バージョン 45 で追加されました。
  • innerTextブラウザでレンダリングされたものと一致するように、スタイルを認識したテキスト表現を提供します。これは次のことを意味します。
    • innerText適用されtext-transform、white-spaceルール
    • innerText行間の空白を削除し、項目間に改行を追加します。
    • innerText非表示のアイテムのテキストは返されません
  • innerTexttextContentレンダリングされない要素に対しては<style />、`を返します。
  • Node元素の特性


node.textContent

ノードとその子孫のテキスト コンテンツを取得または設定します。

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

これはW3C標準ただし、IE < 9 ではサポートされません。

  • スタイルを認識しないため、CSS によって非表示になっているコンテンツを返します。
  • リフローをトリガーしない（したがってパフォーマンスが向上）
  • Node元素の特性


node.value

これはターゲットにした要素によって異なります。上記の例ではx、HTMLDiv要素プロパティが定義されていないオブジェクトvalue。

x.value // => null

入力タグ（<input />）は、例えばvalueプロパティを定義するこれは「コントロール内の現在の値」を指します。

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

からドキュメント:

注意: 特定の入力タイプでは、返される値がユーザーが入力した値と一致しない場合があります。たとえば、ユーザーが に数値以外の値を入力した場合<input type="number">、返される値は空の文字列になることがあります。


サンプルスクリプト

以下は、上記の HTML の出力を示す例です。

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

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; 
}

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

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}
<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

おすすめ記事