現在、翻訳元のページではNode.attributesのページはElement.attributesのページにリダイレクトされます。

.attributesは、指定されたノードに登録されている全てのノード属性のコレクションです。 これはArray(配列)では無くNamedNodeMapであるため、配列メソッドは持たず、 Attrノードのインデックスはブラウザ間で異なる可能性があります。(翻訳に自信なし) もう少し具体的に言うと、属性(attribute)はノードに関係する情報を表す文字列のキーと値のペアであり、 オブジェクトを保持することは出来ません。 属性はカスタマイズしたJavaScriptの処理中に必要となる、追加のデータ/情報を保持することが可能です。 予め定義されている多くの属性には、ノードによって異なる、 イベントのバインディング(binding)、検証(validation)、レイアウト情報の指定が存在し、 ブラウザによって扱われます。(ブラウザ間で異なることがあるかもしれません。)

.attributesは、全てのインラインとJavaScriptが生成したノード属性から、 ブラウザによって動的に更新されます。

文法

// attributeNameがW3Cに定義された属性で、
// 且つ属性ノードが要素のためのもの(例:id)である場合、
// xには、その属性ノードの値が割り当てられます。

// attributeNameがW3Cに定義されていない属性、
// または属性ノードが要素のためのもので無い場合、
// xには、要素のattributeNameプロパティの値が割り当てられます。
// (JavaScriptオブジェクト)

x = element.attributeName

もし、attributeNameが要素のためのAttribute Nodeである場合、
xにはそのノードの値が割り当てられます。
もし、attributeNameが属性ノードで無ければ、
例外が発生します。(indexNumberによる、索引付けも同じ)

x = element.attributes.attributeName.value
    element.attributes['attributeName'].value
    element.attributes[indexNumber].value

// もし、attributeNameが要素のための属性ノードであれば、
// xにはその値が割り当てられます。
// もし、attributeNameが要素のための属性ノードで無ければ、
// xにはnull値が割り当てられます。

x= element.getAttribute('attributeName')

// もし、attributeNameがW3Cで定義された属性で、
// 且つ属性ノードが要素のためのもの(例:id)である場合、
// その属性ノードにはxの値が割り当てられます。

element.attributeName= x

// もし、attributeNameが要素のための属性ノードであれば、
// それにxの値が割り当てられます。
// もし、attributeNameが要素のための属性ノードで無ければ、
// 例外が発生します。(indexNumberによる、索引付けも同じ)

element.attributes.attributeName.value   =x
element.attributes['attributeName'].value
element.attributes[indexNumber].value

// 要素にattributeNameの名前で属性ノードを作成し(存在しなければ)、
// xをその値として割り当てます。

element.setAttribute('attributeName', x)

// attributeMapへ、AttrノードのNameNodeMapコレクションを割り当てます。
// これはその要素の属性コレクションのコピーです。
// もし、その要素が属性ノードを持っていなければlengthは0になります。
// element.attributesの文法は読み込み専用です。

attributeMap= element.attributes

styleは、.attributesコレクション内で反映されます。 styleを変更には、.attributesコレクション、要素の属性ノード、 FirefoxであればCSSStyleDeclarationオブジェクトの更新などの方法があります。 Quirksモードの互換性の問題を考慮する場合、 .attributesに関する実装の確認ページをブラウザで開いて、 各動作について確認を行ってください。

例

Quirksモードでのクロスブラウザ互換性参照

 Back to top