常用 DOM メソッドの比較

innerText 対 textContent #

以下のようにまとめられます：

innerText は改行文字を保持します。
innerText は非表示のテキストを取得できません。
innerText のパフォーマンスはやや劣ります。

innerText は特性が多く、互換性に差異があるため、パフォーマンスの問題や実際の開発の要件を考慮すると、使用は推奨されません。代わりに、textContent を使用してテキスト内容を取得することを推奨します。

var text = dom.textContent

もしプロジェクトが IE8 ブラウザに対応する必要がある場合は、以下のコードを使用してください：

var text = dom.textContent || dom.innerText

注：vue の v-text ディレクティブは要素の textContent を更新します。

getAttribute 対 dataset オブジェクト#

例えば、以下のような HTML があるとします：

<button id="button" data-author="zhangxinxu">作者は誰？</button>

getAttribute と dataset オブジェクトの両方で data-author 属性の値を取得できます：

button.getAttribute('data-author') // zhangxinxu
button.dataset.author // zhangxinxu

違いは大文字と小文字の区別です。getAttribute メソッドは大文字と小文字を無視しますが、dataset オブジェクトは小文字を使用する必要があります。例えば：

<button id="button" data-AUTHOR="zhangxinxu">作者は誰？</button>

button.getAttribute('DATA-author') // zhangxinxu
button.dataset.AUTHOR // undefined
button.dataset.author // zhangxinxu

カスタム属性が複数の単語で構成されている場合、dataset オブジェクトのプロパティ値はキャメルケースで取得する必要があります：

<button id="button" data-article-author="zhangxinxu">感謝します！</button>

button.getAttribute('data-article-author') // zhangxinxu
button.dataset.articleAuthor // zhangxinxu

getElementById 対 querySelector#

一般的に、これらのメソッドは同等ですが、getElementById() メソッドの使用を推奨します。なぜなら、この API はエラー耐性が最も高く、JavaScript の実行を中断しにくいからです。

ある要素の ID が不明で、パラメータとして渡される場合を考えてみましょう。ただし、この文字列パラメータはさまざまなものである可能性があります。例えば、この文字列が 'thanksForShare!' の場合、次のコードをそれぞれ実行します：

document.getElementById('thanksForShare!') // 正常に実行されます
document.querySelector('#thanksForShare!') // エラーが発生します

getElementById() メソッドは安全に null を返しますが、querySelector() メソッドは直接エラーが発生します：

VM309:1 Uncaught DOMException: Failed to execute ‘querySelector’ on ‘Document’: ‘#thanksForShare!’ is not a valid selector.

つまり、querySelector() メソッドを使用する場合は、内部のセレクタの妥当性を検証するか、try...catch で処理する必要があります。そうしないと、JavaScript コード全体の実行に影響を与える可能性があります。したがって、DOM 要素を取得するためには優先して getElementById() メソッドを使用してください。