読者です 読者をやめる 読者になる 読者になる

BattleProgrammerShibata

ある日は誰かと戦い、ある日は何かと戦い、そしてある日は自分と戦うのだろう、そういう生き物。

innerText を使うと Firefox でしぬ

いわゆる今更案件。

document.querySelector('#hoge-id').innerText;

この記述は Firefox では動かない。 innerText プロパティ がサポート対象外だからだ。 一方で Firefox 以外のほとんどのブラウザで動いてしまうのがトラップだろうか。

代替プロパティとして textContent プロパティ が提案されることが多い。ただし細々とした差異があることに注意して実装する必要がある。

Node.textContent - Web API インターフェイス | MDN

  • textContentは\<script>と\<style>を含むすべての要素の内容を取得することに気をつけてください。 ほとんどIE特有のプロパティであるinnerTextはそうではありません。
  • innerTextは要素のスタイルに対して知覚的で、隠された要素のテキストを返さないでしょう。一方textContentは返すでしょう。
  • innerTextはCSSスタイリングに対して知覚的なので、描画の再計算を引き起こすでしょう。一方textContentはそうではないでしょう。

https://developer.mozilla.org/ja/docs/Web/API/Node/textContent#innerText.E3.81.A8.E3.81.AE.E9.81.95.E3.81.84

「innerHTML を使うな! 危険!! innerText を使え!!!」と記述している記事を見るともにょる。