JS--id属性やclass 属性の取得及び設定

id・classなどの 属性の取得及び設定

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

【属性とは】
属性とは、HTML のタグに補足情報を与える役割を持つもので、一般的には、id属性・class属性のようにタグに名前を付けたり、飾りをつけたり、働きを調整したりすることができます。

【属性の指定方法】
＜要素名 属性名="属性値"＞
〇〇の 〇〇は 〇〇です

属性値を囲む引用符は「"（ダブルクオート）」の代わりに、「'（シングルクオート）」を使っても構いません。

【属性値を取得する(プロパティ)】
 JavaScript からはプロパティや、メソッドを使って属性値を参照したり新しい値を設定することができます。

要素に設定された属性値は次のようにプロパティ名として属性名を指定して参照することができます。

書式：element.属性名

使用できる属性名は、要素ノードのタグ毎に決まっており、どのタグでも使用できる共通の属性名と、特定のタグだけに用意された個別の属性名があります。

どのタグでも使用できる共通の属性名には id や class, style, title などの他にイベントハンドラ( onclick など)が用意されています(他にもあります)。

＜p＞タグや＜div＞タグは共通の属性名しか持っていません。 特定のタグでしか使用できない属性値には、例えば ＜a＞タグの href 属性や target 属性,＜blockquote＞タグの cite 属性などがあります。

id 属性や href 属性はそのまま 要素ノード.id や 要素ノード.href と参照できますが、 class 属性の class は他の意味で使用される言葉なので class の代わりに 要素ノード.className と参照します。他にも JavaScript で予約語と同じ名前の属性名については、もし属性名が xxx だった場合は代わりに 要素ノード.htmlXxx のように属性名の前に html をつけ属性名の最初の文字を大文字に変えてください。

属性名はあるけれど値が設定されていないときは空文字が返り、対象の要素ノードに対して存在しない属性名を指定して値を参照すると undefined が返されます。

サンプル

・ブラウザを立ち上げる

・ボタンをクリックすると、d 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素の href 属性、次の子要素の class 属性、 title 属性、 href 属性を取得してコンソールに出力します。

次の子要素である div タグには title 属性はありますが値が設定されていないので空文字が返され、 href 属性は存在しないので undefined が返されています。

【属性値を設定する(プロパティ)】
属性名を表すプロパティに対して値を設定することで、属性値に新しい値を設定することができます。

書式；element.属性名 = 'value'

属性名に対して値が設定されていた場合は、新しい属性値が設定されますが、属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定されます。

サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードを取得し、最初の子要素の href 属性の値を変更し、新しく target 属性の値を設定します。その後で href 属性の値と target 属性の値を取得してコンソールに出力します。

【属性値を取得する(getAttributeメソッド)】
要素の属性値を取得するもう一つの方法です。 Element オブジェクトの getAttribute メソッドは指定した属性名の属性値を取得します。

書式：element.getAttribute(qualifiedName)

引数には取得したい属性名を DOMString オブジェクトで指定します。
戻り値は引数に指定した属性名の属性値を DOMString オブジェクトで返します。指定した属性が見つからなかった場合は空文字か null が返されます。

普通はプロパティを使って属性値を取得する場合、 class 属性の値を取得するときは、プロパティ名として className を指定していましたが、 getAttribute メソッドを使う時は引数に 'class' のように属性名をそのまま指定します。

element.children[i].className→element.children[i].getAttribute('class')に書くことが出来る。

サンプル

・ブラウザを起動する

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素の href 属性、次の子要素の class 属性の値をそれぞれ取得してコンソールに出力します。

【属性値を設定する(setAttributeメソッド)】
要素の属性値を設定するもう一つの方法です。 Element オブジェクトの setAttribute メソッドは指定した属性名の属性値に新しい値を設定します。

書式；element.setAttribute(qualifiedName,value)

1 番目の引数に属性名、 2 番目の引数に属性値をそれぞれ DOMString オブジェクトで指定します。

属性名に対して値が設定されていた場合は新しい属性値が設定されます。属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定されます。

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードを取得し、最初の子要素に新しく target 属性の値を設定し、次の子要素の class 属性の値に新しい値を設定します。そのあとで target 属性の値と class 属性の値を取得してコンソールに出力します。

 

要素内の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'

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

ブラウザを開ける

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