JS--スタイルの取得と設定

スタイルの取得と設定

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

【スタイルの基本】
HTML では要素に対するスタイルの設定を style タグや個々の要素に対する style 属性で設定できます。(外部のスタイルシートに記述しておき読み込むこともできます)。

styleタグのサンプル
このページには p タグが 2 つ含まれまれています。 style タグの中で p タグに対して文字色とフォントサイズに関するスタイルを設定しており、どちらの p タグにも同じようにスタイルが適用されています

ブラウザを立ち上げる

次に個々の p タグに対して style 属性を使ってスタイルを設定する

リロードする

1 つ目の p タグには sytle タグでは設定していない種類のスタイルを設定している。（フォントの太さ）
 2 つ目の p タグでは、 style 属性で、sytle タグで設定している文字色を重ねて設定している。

・style タグと style 属性で異なる種類のスタイルを設定した場合は、それぞれのスタイルが適用されます。
・style タグと style 属性で同じ種類のスタイルをそれぞれ設定した場合、 style 属性の方が優先順位が高いため style 属性で設定した値が適用されます。
【スタイルを設定する(プロパティ)】
要素のスタイルを設定するには、 HTMLElement オブジェクトの style プロパティに値を設定します。

書式：element.style.プロパティ名 = 'value'

この形式でスタイルを設定した場合、要素に対してインラインでの style 属性を設定した場合と同じになります。また既に style 属性を使って設定されている他のプロパティには影響しません。

サンプル

ブラウザを立ち上げる

ボタンを押すと、背景色が変わる

【設定されているスタイルをリセットする】
HTMLElement オブジェクトの style プロパティに対して null を設定すると、そのプロパティのスタイルがリセットされます。

書式；element.style.プロパティ名 = null

ただしこの方法でリセットできるのは style 属性で設定されているプロパティだけです。 style タグで設定されているプロパティについてはリセットできません。
サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性が address の要素ノードを取得し、要素に style 属性を使って設定されていたスタイルをリセットします。

【スタイルを取得する】
要素に設定されているスタイルを取得するには Windows オブジェクトの getComputedStyle メソッドを使用します。

書式：window.getComputedStyle(element)

引数にスタイルを取得する Element オブジェクトを指定します。戻り値は CSSStyleDeclaration オブジェクトです。このメソッドを使って取得した場合は読み取り専用となります。

CSSStyleDeclaration オブジェクトから特定のプロパティの値を取得するには、 CSSStyleDeclaration オブジェクトの getPropertyValue メソッドを使用します。

書式：style.getPropertyValue(property)

引数には取得したいプロパティの名前を文字列で指定します。プロパティ名は 'font-size' のように CSS で使用する場合と同じ形式で指定します。
サンプル

ブラウザを立ち上げる


表示されたボタンをクリックすると、 id 属性が address の要素ノードを取得し、要素に設定されているスタイルの中で指定したプロパティの値を取得しコンソールに出力します。

色(青)：rgb（0,0,255）
font-weight （フォントの太さ）；700

 

 

JS--要素に設定された属性の一覧を取得

要素に設定された属性の一覧を取得

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

【属性の一覧を取得する(attributesプロパティ)】
Element オブジェクトの attributes プロパティを参照すると、要素に設定されている属性の一覧を参照することができます。

書式：element.attributes

参照できる値は、属性名と属性値の情報が格納された Attr オブジェクトの集合である NamedNodeMap オブジェクトです。

NamedNodeMap オブジェクトでは length プロパティで格納されている Attr オブジェクトの数を参照できます。また item メソッドで引数に指定したインデックスの Attr オブジェクトを取得できます。そして Atrr オブジェクトでは name プロパティで属性名を、 value プロパティで属性値を参照できます。

なお NamedNodeMap オブジェクトに Attr オブジェクトがどのような順番で格納されているのかは決まっておらず、実行環境によっては順番が代わる可能性があります。

サンプル

ブラウザを立ち上げる

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

【属性の一覧を取得する(getAttributeNamesメソッド)】
Element オブジェクトの getAttributeNames メソッドは要素に設定されている属性名を要素とする配列を返します。

書式：element.getAttributeNames()

配列には属性名が DOMString オブジェクトで格納されています。同じ Element オブジェクトの getAttribute メソッドを使用することで引数に指定した属性名の属性値を取得することもできます。

サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードの最初の子要素を取得し、設定されている属性名の配列を取得したあと順番に属性名と属性値を取り出してコンソールに出力します。

 

要素内の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 のタグが含まれていますが、エスケープ処理されて文字列として設定されています。