タグエレメントの属性の操作

タグの属性と DOM

　タグエレメン卜の属性とは、id、name、class といったタグエレメントの特徴づけ、スタイルシートの反映、イベントの設定を行うものです。

<p(Element) class="example_p"(Attr) onclick="func_Example()"(Event) style="border:1px solid silver;"(CSS,Style)>

　JavaScript では、エレメント属性をエレメントオブジェクトのプロパティとして取得することができます。

var class_obj = document.getElementsByTagName('p').class;

　上記の class プロパティは、<p> タグエレメントの class 属性を示します。返り値は class 属性を示す Attr オブジェクトになります。

　属性への値の設定は以下のように行うことができます。

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 におけるタグエレメントのための既存のプロパティがあります。
　既存のプロパティとはあらかじめ属性名が決まっており、値を設定することでエレメントにその設定内容が反映されます。

　上記の一覧で、.className プロパティは タグエレメントでは class 属性のことです。このように属性名とプロパティ名が違うものがあります。
　JavaScript で読み込む class 属性を動的に変更することができます。

document.getElementsByTagName('p').className = "example.css";

　Element プロパティで属性に関するものに以下があります。

　詳しくはElement インターフェイスを参照してください。

HTML タグのプロパティ

　以下は、HTML タグエレメントに限った既存のプロパティです。
　既存のプロパティは値を設定することで HTML タグエレメントに何らかの影響を与える機能があります。

　style プロパティは style 属性のことです。JavaScript で動的に変更することができます。

document.getElementsByTagName('p').style = "color:gray;";

属性に関するプロパティ

　以下は属性の取得に関するプロパティです。

属性に関するメソッド

　以下は属性の取得に関するメソッドです。

XML

　以下はXMLに関するメソッドです。

属性値の設定

　属性値の設定は、エレメントオブジェクトのプロパティの値の設定方法で行うことができます。

document.getElementsByTagName('p').style = "color:gray;";

　上記はスタイルシートを JavaScript から変更している例です。ただし、値の設定が直ちに反映されるかは試してみないと分かりません。

属性値の設定メソッド

　他にもメソッドを使用した値の設定方法もあります。

　既存の属性を任意のエレメントに設定することもできます。

XML 属性値の設定

属性の削除

　属性の値を削除するには、null または からの文字列 "" を代入することでできます。

document.getElementById('example_del').style = null;

　以下は上記例を試したものです。以下の段落をクリックすると style 属性の値を null に設定するために背景色が消えます。

属性自体の削除

　属性自体を削除するには以下のメソッドを使用します。

XML 属性の削除

　以下は XML で使用できるメソッドです。上記の属性を削除するメソッドも XML で使用することができます。

関連するプロパティ

　エレメントの取得、追加、移動、削除において関連するプロパティには以下があります。

プロパティ