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の方がはるかに速い場合、何が問題なのでしょうか。広くサポートされていませんか？他に問題はありますか？

MDNでのtextContent / innerText / innerHTMLの違い。

そして、innerText / nodeValueに関するStackoverflowの回答。

概要

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

innerTextcaniuseによると、FireFox 45まではFirefoxには存在しませんでしたが、現在はすべての主要なブラウザーでサポートされています。

.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>';

出力：グーグル

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

MDN innerHTML、MDN textContent、MDN nodeValue

私がよく知っていて作業している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を調べてください）

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

textContentは、サブツリー内のすべての TextNode の値を連結したものです。レンダリングされるかどうか。

ここに違いを詳しく説明する素晴らしい記事があります

innerHTMLは、innerTextまたはtextContentとの比較に含めないでください。完全に異なるため、理由を理解しておく必要があります:-)個別に調べてください。

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

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

それ.innerHtmlは純粋な速度の点で素晴​​らしい勝者です！

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

Element.innerHTMLプロパティをset、またはget要素のHTMLコードに。

例：<h1>タグとそれに強いスタイルがあります：

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1>get要素のコンテンツIDは、我々は同じことをするでしょう、「myHeader」に等しいがあります。

var element = document.getElementById("myHeader");
element.innerHTML

結果を返す：

<strong>My Header</strong> Normal Text`

この要素の新しいコンテンツ（値）を「設定」するには、コードは次のようになります。

Element.innerHTML = "My Header My Text";

したがって、このプロパティはプレーンテキストだけでなく、HTMLコードの受け渡しやコピーを目的としています。

=>使用すべきではありません。

ただし、多くのプログラマー（私を含む）はこの属性を使用してテキストをWebページに挿入します。この方法には潜在的なリスクがあります。

1. 間違った操作：各テキストを挿入すると、挿入された要素の他のすべてのHTMLコードが削除される場合があります。
2. セキュリティのため：もちろん、HTML5標準がタグ内のコマンドラインの実行を妨げているため、タグを使用しても問題がなくても、上記の2つの例は完全に無害です。innerHTML属性を介してWebページに挿入されたとき。こちらのルールをご覧ください。

このため、innerHTMLプレーンテキストを挿入する場合はを使用しないでtextContentください。代わりにを使用してください。textContentプロパティは、あなたが渡すコードはHTML構文ではありませんが、ちょうど100％のテキストは何より小さくないことを理解できないだろう。

textContent上記の例で使用すると、結果が返されます。

My Header My Text