タグエレメントの属性の操作
タグエレメントの属性の取得、追加、削除といったの操作を JavaScript で行う方法の解説です。
var class_obj = document.getElementsByTagName('p').class;
HTML タグの属性は JavaScript においてはエレメントのプロパティとして扱うことができます。詳しくは以下のタグの属性と DOM
を参照してください。
タグエレメントの属性の取得ためのプロパティとメソッドについては、属性リストの取得（ attributes プロパティ）
、タグ全般のプロパティ
、HTML タグのプロパティ
を参照してください。
タグの属性と DOM
タグエレメン卜の属性とは、id、name、class といったタグエレメントの特徴づけ、スタイルシートの反映、イベントの設定を行うものです。
<p class="example_p" onclick="func_Example()" style="border:1px solid silver;">
JavaScript では、エレメント属性をエレメントオブジェクトのプロパティとして取得することができます。
var class_obj = document.getElementsByTagName('p').class;
上記の class プロパティは、<p> タグエレメントの class 属性を示します。この場合の返り値は example_p
になります。
タグエレメントは DOM オブジェクトとして変換され、属性はそのプロパティとメソッドとして操作することができます。
属性への値の設定は以下のように行うことができます。
document.getElementsByTagName('p').style = "color: gray;";
タグエレメントの属性名は任意に作成することができます。例えば以下の my_example 属性を任意に作成することができます。
<p id="example" my_example="test" >
この例の属性名と値は JavaScript で扱うことができます。
console.log( document.getElementById('example').my_example );
上記を実行すると、開発コンソールにtest
と表示されます。
JavaScript で扱うオブジェクトには、属性を示す予め決められたプロパティがあります。
属性にはカスタマイズできるものと予め決められた既存のものがあります。既存の属性はプロパティ名が決められています。
詳しくはタグ全般のプロパティ
とHTML タグのプロパティ
を参照してください。
属性のインターフェイスについてはAttr インターフェイス
を参照してください。
属性リストの取得（ attributes プロパティ）
エレメントがもつ属性のリストを取得するには以下の attributes プロパティを使用します。
console.log( document.getElementById('example').attributes );
上記の例は、id="example" であるエレメントの属性リスト NamedNodeMap を取得します。表示は開発用コンソール内で表示されます。
例えば以下のような <p> エレメントがあったとします。
<p id="exmple" class="example_p" onclick="console.log( document.getElementById('example').attributes );" style="border:1px solid silver;">
Example Text.
</p>
この <p> エレメントの属性リストは以下のように表示されます。
NamedNodeMap(4) [ id="example", class="example_p", onclick="console.log( document.getElementById('example').attributes );", style="border:1px solid silver;" ]
...
例えば以下のExample Text.
をクリックしたときに開発コンソールではどのように表示されるかを確かめてみてください。
Example Text.
開発用コンソールは、Google Chromeでは右端のメニューから、
その他のツール
→ デベロッパーツール
→ メニュー上のconsole
で見ることができます。
属性には、既存の属性とカスタマイズできる属性があります。既存のプロパティは値を設定することでタグエレメントに何らかの影響がある機能を持っています。
タグ全般のプロパティ
HTML、XML におけるタグエレメントのための既存のプロパティがあります。
既存のプロパティとはあらかじめ属性名が決まっており、値を設定することでエレメントにその設定内容が反映されます。
| プロパティ | 概要 |
|---|---|
| .accessKey | エレメントのaccesskey属性の値 |
| .className | class属性値（class名）の取得と設定。DOMString 型 |
| .id | id属性値（id名）の取得と設定。DOMString 型 |
上記の一覧で、.className プロパティは タグエレメントでは class 属性のことです。このように属性名とプロパティ名が違うものがあります。
JavaScript で読み込む class 属性を動的に変更することができます。
document.getElementsByTagName('p').className = "example.css";
Element プロパティで属性に関するものに以下があります。
| プロパティ | 概要 |
|---|---|
| .attributes | エレメントの属性リスト NamedNodeMapを返す |
| .classList | class属性のリスト DOMTokenListを返す |
詳しくはElement インターフェイス
を参照してください。
HTML タグのプロパティ
以下は、HTML タグエレメントに限った既存のプロパティです。
既存のプロパティは値を設定することで HTML タグエレメントに何らかの影響を与える機能があります。
| プロパティ | 概要 |
|---|---|
| .contentEditable | エレメントを編集可能に。true、false、inherit のいずれか |
| .dir | エレメントの書字方向、 dir 属性。値は、"ltr" 、"rtl"、"auto" |
| .draggable | 'true' でエレメントをドラッグ可能に。 Boolean 型 |
| .hidden | 非表示であるか／否か。 Boolean 型 |
| .inert | 入力機能やアンカー機能を使用できなくする。 Boolean 型 |
| .itemScope | itemscope属性であるか／否か。 Boolean 型 |
| .lang | lang 属性の取得と設定 |
| .noModule | <script> エレメントの nomodule 属性の取得と設定。Boolean 型 |
| .nonce | <script> や <style> エレメントのセキュリティーに関する nonce 属性の値の取得と設定 |
| .spellcheck | spellcheck 属性の取得と設定。 Boolean 型 |
| .style | JavaScriptからスタイル宣言ができる。 CSSStyleDeclaration オブジェクトを返す |
| .title | ポインターがエレメント上にあると表示されるポップアップのテキスト |
| .translate | 翻訳を行うか／否か。Boolean 型 |
style プロパティは style 属性のことです。JavaScript で動的に変更することができます。
document.getElementsByTagName('p').style = "color:gray;";
属性に関するプロパティ
以下は属性の取得に関するプロパティです。
| プロパティ | 概要 |
|---|---|
| .accessKeyLabel | エレメントのaccesskey属性の属性名と値 |
| .attributeStyleMap | StylePropertyMap のハンドラー。 style 属性の定義 |
| .isContentEditable | エレメントが編集可能か／否か。 Boolean 型 |
| .dataset | カスタムデータ属性 (data-*)を操作するための DOMStringMap へのハンドラー |
| .enterkeyhint | Enter による処理内容を示すアクションラベル |
属性に関するメソッド
以下は属性の取得に関するメソッドです。
| プロパティ | 概要 |
|---|---|
| .hasAttribute() | 引数の属性があるかを Boolean で返す |
| .getAttribute() | カッコで指定された属性名の値を Object 型で返す |
| .getAttributeNames() | エレメントがもつ属性の名称を配列で返す |
| .getAttributeNode() | カッコで指定された属性をノード表現の Attr として返す |
| .hasAttributes() | エレメントが１つ以上の属性を持っているかを Boolean で返す |
XML
以下はXMLに関するメソッドです。
| プロパティ | 概要 |
|---|---|
| .getAttributeNodeNS() | XML。引数の名称と名前空間をもつ属性をノード表現の Attr として返す |
| .getAttributeNS() | XML。引数の名称と名前空間をもつ属性を Object 型で返す |
| .hasAttributeNS() | XML。引数の名前空間の属性があるかを Boolean で返す |
属性値の設定
属性値の設定は、エレメントオブジェクトのプロパティの値の設定方法で行うことができます。
document.getElementsByTagName('p').style = "color:gray;";
上記はスタイルシートを JavaScript から変更している例です。ただし、値の設定が直ちに反映されるかは試してみないと分かりません。
属性値の設定メソッド
他にもメソッドを使用した値の設定方法もあります。
| プロパティ | 概要 |
|---|---|
| .setAttribute() | 指定した属性名に値を設定 |
既存の属性を任意のエレメントに設定することもできます。
| プロパティ | 概要 |
|---|---|
| .setAttributeNode() | 指定した属性を指定Nodeに設定 |
XML 属性値の設定
| プロパティ | 概要 |
|---|---|
| .setAttributeNodeNS() | XML。指定された名前と名前空間を持つ属性を Node として設定 |
| .setAttributeNS() | XML。指定された名前と名前空間を持つ属性の値を設定 |
属性の削除
属性の値を削除するには、null または からの文字列 "" を代入することでできます。
document.getElementById('example_del').style = null;
以下は上記例を試したものです。以下の段落をクリックすると style 属性の値を null に設定するために背景色が消えます。
この段落をクリックしてみてください。背景色が消えます。
属性自体の削除
属性自体を削除するには以下のメソッドを使用します。
| プロパティ | 概要 |
|---|---|
| .removeAttribute() | 指定した名称の属性を削除 |
| .removeAttributeNode() | 指定した Node である属性を削除 |
XML 属性の削除
以下は XML で使用できるメソッドです。上記の属性を削除するメソッドも XML で使用することができます。
| プロパティ | 概要 |
|---|---|
| .removeAttributeNS() | XML。名前と名前空間を持つ属性を削除 |
関連するプロパティ
エレメントの取得、追加、移動、削除において関連するプロパティには以下があります。
プロパティ
| プロパティ | 概要 |
|---|---|
| Node | |
| .nextSibling | 次の階層のNode |
| .nodeName | Node 名の取得 |
| .previousSibling | 上の階層のNode |
| Element | |
| .childElementCount | 子エレメントの数 |
| .children | 子エレメントを返す |
| .firstElementChild | 最初の子エレメント |
| .lastElementChild | 子エレメントの中で最後のエレメント |