element.attributesは、「element」に指定した要素の属性を格納したNamedNodeMapオブジェクトを返すプロパティ。
構文
var $attributeMap = $elementNodeReference.attributes;
戻り値
指定した要素の属性を格納したNamedNodeMapオブジェクト。
サンプル
id属性がsampleAである要素の属性の数：
id属性がsampleAである要素のonclick属性の値：
id属性がsampleAである要素の２つ目の属性の値：
サンプルの動作について
「sampleA()」ボタンをクリックすると、
- 「id属性がsampleAである要素の属性の数：」の右横に「3」と表示する。
- 「id属性がsampleAである要素のonclick属性の値：」の右横に「sampleA();」と表示する。
- 「id属性がsampleAである要素の２つ目の属性の値：」の右横に「sampleClassName」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sampleA() {
var $elementNodeReference = document.getElementById( "sampleA" );
var $attributeMap = $elementNodeReference.attributes;
document.getElementById( "sampleOutput1" ).innerHTML = $attributeMap.length;
document.getElementById( "sampleOutput2" ).innerHTML = $attributeMap['onclick'].value;
document.getElementById( "sampleOutput3" ).innerHTML = $attributeMap[1].value;
}
</script>
function sampleA() {
var $elementNodeReference = document.getElementById( "sampleA" );
var $attributeMap = $elementNodeReference.attributes;
document.getElementById( "sampleOutput1" ).innerHTML = $attributeMap.length;
document.getElementById( "sampleOutput2" ).innerHTML = $attributeMap['onclick'].value;
document.getElementById( "sampleOutput3" ).innerHTML = $attributeMap[1].value;
}
</script>
HTML
<button id="sampleA" class="sampleClassName" onclick="sampleA();">sampleA()</button>
<p>id属性がsampleAである要素の属性の数：<span id="sampleOutput1"></span></p>
<p>id属性がsampleAである要素のonclick属性の値：<span id="sampleOutput2"></span></p>
<p>id属性がsampleAである要素の２つ目の属性の値：<span id="sampleOutput3"></span></p>
<p>id属性がsampleAである要素の属性の数：<span id="sampleOutput1"></span></p>
<p>id属性がsampleAである要素のonclick属性の値：<span id="sampleOutput2"></span></p>
<p>id属性がsampleAである要素の２つ目の属性の値：<span id="sampleOutput3"></span></p>