要素内のHTMLを取得・設定

要素内のHTMLを取得・設定

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【HTML文を参照する】
innerHTML プロパティは、HTMLElement オブジェクトの innerText プロパティと違って、HTML要素を含んで参照される。

書式；element.innerHTML

戻り値は要素に含まれる HTML 文が文字列で戻されます。HTML 文は HTML ファイルに記述されている内容をそのまま取得します。

例えば
次の div 要素ノードの innerHTML プロパティの値を参照した場合、どのような値を返すのか確認します。

＜div＞
  ＜p＞Apple＜br＞Lemon＜/p＞
  ＜p＞Orange＜/p＞
＜/div＞

div 要素ノードにはの 2 つの p 要素ノードが含まれています。要素内の HTML 文をそのまま取得しますので、 div 要素ノードの innerHTML プロパティの値を参照すると次のような値となります。

＜p＞Apple＜b＞Lemon＜/p＞
  ＜p＞Orange＜/p＞

サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、その innerHTML プロパティの値を取得してコンソールに出力します。

【新しいHTML文を設定する】

innerHTML プロパティは参照するだけではなく新しい値を設定することができます。

書式：element.innerHTML = 'value'

要素の innerHTML プロパティの値に新しい文字列を設定すると、対象の要素の子孫要素のノードがすべて削除されたあとに設定した HTML 文の値が追加されます。この時、 HTML で特別な意味を持つ文字が含まれていてもエスケープは行われずにそのまま追加されます。

サンプル

ブラウザを立ち上げる

ボタンを押すと下記のようになる

【HTML文の中にscriptタグが含まれていた場合】
nnerHTML プロパティには HTML 文を新しい値として設定できるため、 ＜script＞ タグが含まれる HTML 文も設定できます。ただ innerHTML プロパティを利用して ＜script＞ が設定された場合は記述されたスクリプトは実行されません。

＜script＞の入れ子は出来ない！
let element = document.getElementById('shopinfo');
element.innerHTML = '＜script＞alert("Hello")＜/script＞';

1.ブラウザを立ち上げる 

2.ボタンをクリックすると下図のように成る

＜script＞alert("南青山")＜\/script＞'が起動してないのが確認出来る。

もし、alert("南青山")を表示したいのなら、下記のように書き換える

＜script＞

function setTextToElement(){

    let element = document.getElementById('shopinfo');

    let s = '南青山の洋食屋さん';

    element.innerHTML = s;

    alert("南青山");

}

＜/script＞
ブラウザを立ち上げ、ボタンを押すと、アラートが現れる。OKを押すと

この様になったら、OK

【要素自身も含めたHTML文を参照する】
Element オブジェクトの outerHTML プロパティを参照すると要素と要素に含まれる HTML 文を取得することができます。

 

書式：element.outerHTML

戻り値は要素と要素に含まれる HTML 文が文字列で戻されます。

HTML 文は HTML ファイルに記述されている内容をそのまま取得します。
例えば、
次の div 要素ノードの outerHTML プロパティの値を参照した場合、どのような値を返すのか確認します。

nnerHTML では、下図のように要素に含まれる HTML 文が取得できる

outerHTML では、下図のように要素自身も含めて取得できる

サンプル

ブラウザを立ち上げる

ボタンを押すと、上手のように成れば、OK

要素内のレンダリングされたテキストを取得・設定

要素内のレンダリングされたテキストを取得・設定

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【テキストを参照する】
HTMLElement オブジェクトの innerText プロパティを参照すると要素および要素の子孫要素のテキストを取得することができます。

 

書式；htmlElement.innerText

戻り値は、すべてのテキストが連結された DOMString オブジェクトが戻されます。どのような文字列が返されるのかについては、要素や要素の子孫要素がブラウザで表示されるときと同じ内容のテキスト内容を取得します。

空白ノードなどのようにブラウザでは表示されないものは取得しませんし、スタイルシートの設定などで非表示になっている要素。

＜style＞ タグのように元々ブラウザに表示されない要素のテキストは取得しません。また ＜br＞ タグで改行が行わている場合は改行された状態でテキストを取得します。

例えば次の div 要素ノードの innerText プロパティの値を参照した場合、どのような値を返すのか確認します。

＜div＞
  ＜p＞Apple＜br＞Lemon＜/p＞
  ＜p＞Orange＜/p＞
＜/div＞

div 要素ノードにはの 2 つの p 要素ノードが含まれていますが、実際にブラウザで表示されると次のように表示されます。

Apple
Lemon

Orange

サンプル

ブラウザを立ち上げる

ボタンをクリックする

孫ノードのテキストノードの中に ＜br＞ が含まれているものがあります。 textContent プロパティでは単に無視されましたが innerText プロパティでは ＜br＞ の位置で改行された状態でテキストを取得します。またスタイルの設定でブラウザで非表示になっているテキストも取得しません 

サンプル

ブラウザを立ち上げる

今回のサンプルではボタンをクリックすると body タグの要素ノードを取得し、その innerText プロパティの値を取得してコンソールに出力しています。



innerText プロパティは実際に表示されるテキストのみ取得するため、 ＜script＞ タグの中に記述された JavaScript のコードはテキストとして取得しません。またスタイルの設定でブラウザで非表示になっているテキストも取得しません。

【新しいテキストを設定する】
innerText プロパティは参照するだけではなく新しい値を設定することができます。

書式；htmlElement.innerText = 'value'

要素の innerText プロパティの値に新しい文字列を設定すると、対象の要素の子孫要素のノードがすべて削除されたあとに設定した文字列の値を持つテキストノードが追加されます。

サンプル

ブラウザを立ち上げる

「新しいテキストを設定」ボタンを押す

 id 属性が shopinfo の要素の innerText プロパティに新しい文字列を設定します。
【設定する文字列の中にHTMLのタグなどが含まれていた場合】

innerText プロパティに新しい文字列を設定するときに HTML で特別な意味を持つ文字はエスケープ処理されてから設定されます。具体的には ＜ が < 、 ＞ が > 、 & が & などへ変換されます。

変換前： ＜p＞Apple&Orange＜/p＞
変換後： <p>Apple&Orange</p&gt;

その為、 HTML のタグを含む文字列を設定した場合、タグとしては認識されず単なる文字列として扱われます。もしタグを含む文字列を設定したときに、タグとして処理して欲しい場合には innerHTML プロパティを使用してください。

サンプル

ブラウザを立ち上げる

ボタンをクリックする

設定する値の中に HTML のタグが含まれていますが、エスケープ処理されて文字列として設定されています。

JS--ノード内のテキストを取得・設定

ノード内のテキストを取得・設定

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【テキストを参照する】
Node オブジェクトの textContent プロパティを参照するとノードおよびノードの子孫ノードのテキストをすべて連結した値を取得することができます。

書式；node.textContent

戻り値はすべてのテキストが連結された DOMString オブジェクトが戻されます。

実際にどのようなデータがテキストとして返されるのかは、ノードの種類によって異なります。

*1 と記述したノードについては、コメントと処理命令ノード以外のすべての子ノードの textContent の値を連結した文字列を返します。それぞれのノードで Node.nodeValue がどのような値を返すのかは「ノードの値を取得・設定(nodeValue)」を参照されてください。

例文

Apple

Orange

上記のdiv 要素ノードの textContent プロパティの値を参照した場合、どのような値になるか？

div 要素ノードには、 2 つの p 要素ノードに加えてその前後に空白ノード(テキストノード)が含まれるため、全部で 5 つのノードがあり、このすべての textContent プロパティの値を連結したものが div 要素ノードの textContent プロパティの値となります。

p 要素ノードはそれぞれ子ノードとしてテキストノードがあります。よって p 要素ノードの textContent プロパティの値は子ノードの textContent プロパティの値を連結したものになります。子ノードのテキストノードの textContent プロパティの値は nodeValue プロパティの値でありそれはテキストノードに含まれるテキストになります。

また空白ノードもテキストノードなので、空白ノードの textContent プロパティの値は nodeValue プロパティの値でありそれは空白ノードに含まれるテキストです。最初の空白ノードには改行＋空白文字が 2 つ含まれており、次の空白ノードには改行＋空白文字が 2 つ含まれており、最後の空白ノードには改行が含まれます。

結果として div 要素ノードの textContent プロパティの値を参照すると次のような値となります。

Apple
Orange

サンプル
・ブラウザを立ち上げる 

「要素を取得」ボタンを押すと、下図のように成る。id 属性の値が 'shopinfo' の要素ノードを取得し、その textContent プロパティの値を取得してコンソールに出力します。

サンプル2
今回のサンプルではボタンをクリックすると body タグの要素ノードを取得し、その textContent プロパティの値を取得してコンソールに出力する

ブラウザを立ち上げる。
※は表示しない

「要素を取得」ボタンを押す

要素ノードの textContent プロパティは
コメントや処理命令ノード以外のすべての子孫ノードの textContent プロパティの値を結合します。    その為、 ＜script＞ タグの中に記述された JavaScript のコードもテキストとして取得します。またスタイルの設定でブラウザに表示されるときは非表示になっているテキストも含めて取得しています。

【新しいテキストを設定する】

textContent プロパティは参照するだけではなく新しい値を設定することができます。

書式：node.textContent = 'value'

ノードの textContent プロパティの値に新しい文字列を設定すると、対象のノードの子孫のノードがすべて削除された後に設定した文字列の値を持つテキストノードが追加されます。
・サンプル

ブラウザで表示させる

「新しいテキストを設定」ボタンを押す

「リストランテ南青山」→「南青山の洋食屋さん」に変更させる。

 

【設定する文字列の中にHTMLのタグなどが含まれていた場合】
textContent プロパティに新しい文字列を設定するときに HTML で特別な意味を持つ文字はエスケープ処理されてから設定されます。具体的には < が < 、 > が > 、 & が & などへ変換されます。

サンプル

ブラウザを立ち上げる

「新しいテキストを設定」ボタンを押す

設定する値の中に HTML のタグが含まれていますが、エスケープ処理されて文字列として設定されています。

 

 

JS--ノードの値を取得・設定

ノードの値を取得・設定

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【ノードの値を参照する】
Node オブジェクトの nodeValue プロパティを参照するとノードの値を取得することができます。

書式；node.nodeValue

戻り値はノードの値が DOMString オブジェクトで戻されます。どのような値が返されるのかはノードの種類によって異なっています。

例えばノードの種類が TEXT_NODE (テキストノード) の場合、テキストノードに含まれるテキストが返されます。

サンプル

ブラウザを立ち上げる

ボタンを押すと、 p タグのノードをすべて取得します。そのあとで、 p タグの子ノードであるテキストノードを取得するためにそれぞれの最初の子ノードを取得します。最後にテキストノードのノードの値を取得し、コンソールに出力しています。

以上

【ノードの値を設定する】
Node オブジェクトの nodeValue プロパティは参照するだけではなく新しい値を設定することができます。

書式；node.nodeValue = 'value'

サンプル--下記のところだけ変更

ブラウザを開ける

ボタンを押すと、【】が表示される

JS--ノード名の取得

ノード名の取得

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、

【ノードの名前を取得する】
Node オブジェクトの nodeName プロパティを参照するとノードの名前を取得することができます。

書式；node.nodeName

戻り値は
ノードの名前を表す DOMString オブジェクトが戻されます。名前はノードの種類によって異なっています

例えば
ノードの種類が ELEMENT_NODE (要素ノード) の場合は、＜P>などのような要素のタグ名がノードの名前として返される。ノードの種類が TEXT_NODE (テキストノード) の場合、常に "#text" という値がノードの名前として返されます。空白ノードも、テキストノードである。

サンプル

ブラウザを立ち上げる

ボタンを押すと、 id 属性の値が 'blog' のノードを取得し、そのノードの子ノードをすべて取得します。そのあとで、子ノードのノード毎にノードの名前を取得してコンソールに出力しています。

「空白ノード」で解説していますが、要素の前後に空白や改行がある場合は空白ノード(テキストノード)が存在します。その為、テキストノードの名前である "#text" が要素ノードやコメントノードの前後に現れています。