☰

nodeValue と innerHTML および textContent。どのように選択すればよいですか? [重複] 質問する

tag-icon • tag-icon javascript dom innerhtml nodevalue
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 の方がはるかに高速な場合、問題は何でしょうか? 広くサポートされていないのでしょうか? 他に何か問題があるのでしょうか?

ベストアンサー1

MDN の textContent/innerText/innerHTML の違い。

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

まとめ

  1. 内部HTMLコンテンツを HTML として解析するため、時間がかかります。
  2. ノード値テキストをそのまま使用し、HTML を解析せず、より高速です。
  3. テキストコンテンツテキストをそのまま使用し、HTML を解析せず、より高速です。
  4. 内部テキストスタイルを考慮します。たとえば、隠しテキストは取得されません。

innerTextFirefox 45まではFirefoxには存在しなかった。使ってもいいですか現在ではすべての主要ブラウザでサポートされています。

おすすめ記事