アトリビュートについて（Attr）

・	アトリビュートについて
・	アトリビュートを作成する
・	アトリビュートの属性値を設定する
・	アトリビュートを登録する

前のページに戻る

アトリビュートについて

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

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

属性はアトリビュートとなる


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

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

<img src="http://example.com/test.jpg">

■アトリビュートの注意点

アトリビュートは、ノードリストに登録する事はできません。

アトリビュートは、エレメントの専用のメソッドを使って、エレメントに登録します。

■Attr インターフェースについて

「アトリビュート（属性）」は、DOM では Attr インターフェースとなります。

このページでは主に、Attr インターフェースで供給される機能について解説しています。

■ Attr インターフェースの派生について

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);

上に戻る

前のページに戻る