JavaScript

attributesプロパティで属性ノードを取得【JavaScript】

この記事では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


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5