JavaScript プログラミング講座

 

アトリビュートについて

 


■アトリビュートについて

 
アトリビュートは、「HTML 文書」や「XML 文書」の、属性に相当します。
 
属性はアトリビュートとなる

<span id="aaa">あいうえお</span>

<div width="300" height="200">かきくけこ</div>

<img src="http://hakuhin.jp/test.jpg">
 
■アトリビュートの注意点
 
アトリビュートは、ノードリストに登録する事はできません
 
アトリビュートは、エレメントの専用のメソッドを使って、エレメントに登録します
 
■Attr インターフェースについて
 
「アトリビュート(属性)」は、DOM では Attr インターフェースとなります。
 
このページでは主に、Attr インターフェースで供給される機能について解説しています。
 
■ Attr インターフェースの派生について

Attr インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Object
↓派生
EventTarget
↓派生
Node
↓派生
Attr
 


 

アトリビュートを作成する

 


■ Attr オブジェクトを作成するには

 
document.createAttribute() メソッドを使用します。
 
引数に属性名を指定します。
 
属性名を、後で変更する事はできません
 
document.createAttribute( "属性名" ) :Attr
第01引数 String属性名を指定。
戻り値 Attr新しい Attr オブジェクトが得られる。
 
アトリビュートを作成する

// アトリビュートを作成する
var attribute = document.createAttribute("my_attr");
 

■属性名を取得する

 
属性名を取得するには、name プロパティを使用します。
 
属性名を取得する

// アトリビュートを作成する
var attribute = document.createAttribute("my_attr");

// 属性名を取得する
console.log(attribute.name); // "my_attr"
 


 

アトリビュートの属性値を設定する

 


■アトリビュートの属性値を設定する

 
アトリビュートの属性値を設定するには、value プロパティを使用します。
 
文字列以外のデータを渡した場合、文字列型に変換されます。
 
アトリビュートの属性値を設定する

// アトリビュートを作成する
var attribute = document.createAttribute("my_attr");

// 属性値を設定する
attribute.value = "my_value";
 


 

アトリビュートを登録する

 


■エレメントにアトリビュートを登録する

 
こちらで解説しています。
 
アトリビュートをエレメントに登録する

// ------------------------------------------------------------
// エレメントを作成する
// ------------------------------------------------------------
var element = document.createElement("div");


// ------------------------------------------------------------
// アトリビュートを作成する
// ------------------------------------------------------------
// 「Attr オブジェクト」を作成する
var attribute = document.createAttribute("my_attr");

// 属性値を設定する
attribute.value = "my_value";


// ------------------------------------------------------------
// エレメントにアトリビュートを登録する
// ------------------------------------------------------------
// エレメントに「Attr オブジェクト」を登録する
element.setAttributeNode(attribute);

// 「属性名」を指定して、「Attr オブジェクト」を取得する
var attribute = element.getAttributeNode("my_attr");

// エレメントから「Attr オブジェクト」を除外する
element.removeAttributeNode(attribute);
 

■親のエレメントを取得する

 
ownerElement プロパティを使用します。
 
未登録の場合は、null が得られます。
 
このプロパティは、読み取り専用です。
 
親のエレメントを取得する

// エレメントを作成する
var element = document.createElement("div");

// アトリビュートを作成する
var attribute = document.createAttribute("my_attr");

// 属性値を設定する
attribute.value = "my_value";

// 出力テスト(この時点では未登録なので null が得られる)
console.log(attribute.ownerElement);

// エレメントに「Attr オブジェクト」を登録する
element.setAttributeNode(attribute);

// 出力テスト
console.log(attribute.ownerElement);