HTMLElement: outerText プロパティ
outerText
は HTMLElement
インターフェイスのプロパティで、 HTMLElement.innerText
と同じ値を返します。
セッターとして使用するときは、現在のノード全体を指定されたテキストに置き換えます(これは現在のノードの内部のコンテンツを置き換える innerText
と異なります)。
詳しい情報や、両プロパティをゲッターとして使用する方法を示した例は HTMLElement.innerText
を参照してください。
値
文字列で、この要素とその配下で表示されるテキストコンテンツを表します。
要素自身が表示されていない場合(例えば、文書から切り離されていた場合や表示から隠されていた場合)、返値は Node.textContent
プロパティのものと同じになります。
セッターとして使用された場合、この要素の子要素を指定された値で置き換え、すべての改行を <br>
要素に変換します。
例
この例では、 outerText
と innerText
をセッターとして使用した場合の根本的な違いを強調しています(ゲッターで使用した場合は同じです)。
メモ: この例は What is the difference between innerText and outerText? (Stack overflow) の記事で codingintrigue が作成し、 CC BY-SA 3.0 のライセンスで配布されているものを変更したものです。
以下のような HTML が入っているページがあるとします。
<div>
<p>元の内容</p>
</div>
outerText
は選択された要素全体を置き換えますので、 JavaScript で p.outerText = "要素全体を置換"
を実行すると、選択された p
要素全体を置き換えます。
<div>要素全体を置換</div>
一方 p.innerText = "要素内のコンテンツを置換"
を実行すると、選択された p
要素の内部のコンテンツを置き換えます。
<div>
<p>要素内のコンテンツを置換</p>
</div>
仕様書
Specification |
---|
HTML Standard # dom-outertext |
ブラウザーの互換性
BCD tables only load in the browser