web-dev-qa-db-ja.com

nodeValueとinnerHTMLおよびtextContent。選択方法

ラベル要素の内部テキストを変更するためにプレーンjsを使用していますが、innerHTMLまたはnodeValueまたはtextContentを使用する理由についてはわかりませんでした。新しいノードを作成したり、HTML要素などを変更したりする必要はありません。テキストを置き換えるだけです。コードの例を次に示します。

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

JQueryソースを調べて、nodeValueを1回だけ使用しましたが、innerHTMLとtextContentを数回使用しています。次に、firstChild.nodeValueが非常に高速であることを示すこのjsperfテストを見つけました。少なくともそれは私がそれを意味すると解釈することです。

FirstChild.nodeValueの方がずっと速い場合、キャッチは何ですか？広くサポートされていませんか？他に問題はありますか？

javascriptdominnerhtmlnodevalue
115
adam Kiryk

MDNでのtextContent/innerText/innerHTMLの違い

およびinnerText/nodeValueについてのStackoverflowの回答

概要

  1. innerHTMLはコンテンツをHTMLとして解析するため、時間がかかります。
  2. nodeValueは、ストレートテキストを使用し、HTMLを解析せず、高速です。
  3. textContentはストレートテキストを使用し、HTMLを解析せず、高速です。
  4. innerTextスタイルを考慮します。たとえば、非表示のテキストは取得されません。

innerTextは、Firefoxに caniuse に従ってFireFox 45まで存在しませんでしたが、すべての主要なブラウザでサポートされるようになりました。

137
peterfoldi

.textContentはtext/plainを出力しますが、.innerHTMLはtext/htmlを出力します。

簡単な例：

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

出力：<a href="http://google.com"> google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

出力： google

最初の例から、タイプtext/plainの出力はブラウザーによって解析されず、コンテンツ全体が表示されることがわかります。タイプtext/htmlの出力は、表示する前に解析するようブラウザに指示します。

MDN innerHTML 、 MDN textContent 、 MDN nodeValue

50
Brian

私がよく知っていて一緒に仕事をしている2つはinnerHTMLとtextContentです。

textContentを使用するのは、段落のテキストまたは見出しを次のように変更するだけの場合です。

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six Word</em> story.'
}, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1>
<p id="paragraph">My six Word story right here.</p>

したがって、textContentはテキストを変更するだけですが、HTMLを解析しません。結果のプレーンテキストに表示されるタグからわかるように。

HTMLを解析する場合、次のようにinnerHTMLを使用します。

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six Word</em> story.'
}, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1>
<p id="paragraph">My six Word story right here.</p>

したがって、2番目の例では、DOM要素のinnerHTMLプロパティにHTMLとして割り当てた文字列を解析します。

これはすばらしく、大きなセキュリティ脆弱性です：）

（このセキュリティについて知りたい場合は、XSSを検索してください）

6
Costa

innerTextは、テキストを選択してコピーした場合に得られるおおよその値です。レンダリングされない要素はinnerTextに存在しません。

textContentは、allTextNodesの値を連結したものです。木。レンダリングされるかどうか。

グレートポスト 違いの詳細

innerHTMLは、innerTextまたはtextContentとの比較に含めるべきではありません。まったく異なるため、理由を本当に知っておく必要があります。

2
Drenai

[注：この投稿は、何をすべきかを人々に伝えるよりも、誰かを助けるかもしれない特定のデータを共有することに関するものです]

誰かが今日何が一番速いのか疑問に思っている場合： https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent ＆ https://jsperf.com/get -innertext-vs-innerhtml-vs-textcontent （2番目のテストでは、スパンのコンテンツはプレーンテキストであり、結果はコンテンツによって変わる可能性があります）

.innerHtmlが純粋な速度の点で素晴​​らしい勝者であるようです！

（注：ここでは速度についてのみ説明しています。使用するものを選択する前に、他の基準を確認することをお勧めします！）

1
Thanaen