textContent と innerText: どちらを使用しますか?

innerText と textContent は、要素のテキスト コンテンツにアクセスするために JavaScript でよく使用される 2 つのプロパティです。 。どちらのプロパティも同様の機能を共有しますが、それぞれの適切な使用例を決定する重要な違いがあります。

innerText

innerText は、HTML 要素内に含まれる表示テキストを返します。非表示の要素や表示スタイルが「なし」に設定されている要素は除外されます。

例:

Hello 

innerText一方、

textContent

textContent は、可視性や表示スタイルに関係なく、フルテキスト コンテンツを返します。上の例では、textContent は 'Hello World' を返します。

主な違い:

• 標準準拠: innerText は非-standard プロパティですが、textContent は標準化されたプロパティです。
• Performance: innerText は表示テキストを決定するためにレイアウト情報を必要とするため、textContent.
• Scope: innerText は HTMLElement オブジェクトでのみ使用できますが、textContent はすべての Node オブジェクトで使用できます。

使用上の考慮事項:

For表示されているテキストのみにアクセスしたい場合は、innerText を選択する方が効率的です。ただし、テキスト コンテンツ全体を取得する必要がある場合は、textContent が優先プロパティです。

提供された例では:

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

textContent を使用して、ロゴ要素のテキスト コンテンツを更新できます。既存のテキストを「Example」に置き換えます。