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 が返されます。
サンプル
![](https://blogimg.goo.ne.jp/user_image/4d/b6/74471f87c9a68eba88d04231f614bf36.jpg)
・ブラウザを立ち上げる
![](https://blogimg.goo.ne.jp/user_image/29/36/44029f10bec3497a4baa89a2ba416fe3.jpg)
・ボタンをクリックすると、d 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素の href 属性、次の子要素の class 属性、 title 属性、 href 属性を取得してコンソールに出力します。
![](https://blogimg.goo.ne.jp/user_image/51/a3/25c9b8d0c9d53a56a0d1fbde709b8481.jpg)
次の子要素である div タグには title 属性はありますが値が設定されていないので空文字が返され、 href 属性は存在しないので undefined が返されています。
【属性値を設定する(プロパティ)】
属性名を表すプロパティに対して値を設定することで、属性値に新しい値を設定することができます。
書式;element.属性名 = 'value'
属性名に対して値が設定されていた場合は、新しい属性値が設定されますが、属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定されます。
サンプル
![](https://blogimg.goo.ne.jp/user_image/51/f7/cc3c4d985614c1d3ad1861caf03cad29.jpg)
ブラウザを立ち上げる
![](https://blogimg.goo.ne.jp/user_image/21/fb/7629a39d98c8eef84e591eda9250191c.jpg)
表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードを取得し、最初の子要素の href 属性の値を変更し、新しく target 属性の値を設定します。その後で href 属性の値と target 属性の値を取得してコンソールに出力します。
![](https://blogimg.goo.ne.jp/user_image/51/38/7bc667fad963f842f072fcd3ef0c648c.jpg)
【属性値を取得する(getAttributeメソッド)】
要素の属性値を取得するもう一つの方法です。 Element オブジェクトの getAttribute メソッドは指定した属性名の属性値を取得します。
書式:element.getAttribute(qualifiedName)
引数には取得したい属性名を DOMString オブジェクトで指定します。
戻り値は引数に指定した属性名の属性値を DOMString オブジェクトで返します。指定した属性が見つからなかった場合は空文字か null が返されます。
普通はプロパティを使って属性値を取得する場合、 class 属性の値を取得するときは、プロパティ名として className を指定していましたが、 getAttribute メソッドを使う時は引数に 'class' のように属性名をそのまま指定します。
element.children[i].className→element.children[i].getAttribute('class')に書くことが出来る。
サンプル
![](https://blogimg.goo.ne.jp/user_image/48/12/9af497d0b25d5e6e70280be1370463ff.jpg)
・ブラウザを起動する
![](https://blogimg.goo.ne.jp/user_image/0c/09/5e04f4a3500ceda9a7788aa1d0bddd93.jpg)
表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素の href 属性、次の子要素の class 属性の値をそれぞれ取得してコンソールに出力します。
![](https://blogimg.goo.ne.jp/user_image/26/bd/f20501dcf76d186f0db13907e1ad2ced.jpg)
【属性値を設定する(setAttributeメソッド)】
要素の属性値を設定するもう一つの方法です。 Element オブジェクトの setAttribute メソッドは指定した属性名の属性値に新しい値を設定します。
書式;element.setAttribute(qualifiedName,value)
1 番目の引数に属性名、 2 番目の引数に属性値をそれぞれ DOMString オブジェクトで指定します。
属性名に対して値が設定されていた場合は新しい属性値が設定されます。属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定されます。
![](https://blogimg.goo.ne.jp/user_image/21/fe/2f0eb48294bbae1a803c18e1d4f2f296.jpg)
ブラウザを立ち上げる
![](https://blogimg.goo.ne.jp/user_image/6d/98/636d0301f64bf3b3fba6d38effe488ee.jpg)
表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードを取得し、最初の子要素に新しく target 属性の値を設定し、次の子要素の class 属性の値に新しい値を設定します。そのあとで target 属性の値と class 属性の値を取得してコンソールに出力します。
![](https://blogimg.goo.ne.jp/user_image/11/88/240cb22d6cded8ad71ea1ec1393398a8.jpg)