この記事ではattributesプロパティを使って属性ノードを取得していきます。
attributes
使い方
attributesは指定した要素の全ての属性情報を返します。
<a href="https://web-tsuku.life/" id="sample" class="btn">ウェブつく</a>var sample = document.getElementById('sample');
var attr = sample.attributes;
console.log(attr);
// => NamedNodeMap {0=Attr, 1=Attr, 2=Attr, length=3, ...}配列ではなく、NamedNodeMapが返却されます。
属性に関するあらゆる情報が返却されます。
下記のように属性を取得します。
var sample = document.getElementById('sample');
var attr = sample.attributes;
console.log(attr[1]);
// => Attr {localName="id", name="id", value="sample", ...}
console.log(attr[1].name);
// => id
console.log(attr[1].value);
// => sample
console.log(attr[2]);
// => Attr {localName="class", name="class", value="btn", ...}
console.log(attr[2].name);
// => class
console.log(attr[2].value);
// => btn