吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【JS入門】DOMについて Vol.4(ノードの属性の取得・設定・削除)

2018年2月5日 / category : javascript

前回の記事「DOMについて Vol.3(ノードの値の参照・変更)」では、ノードの値の参照・変更について解説しました。今回は、ノードの属性について解説していきます。

ノードの属性の参照

Nodeインターフェースで定義しているプロパティattributesでノードの属性が確認できます。次のコードを見てみます。

Node.attributes:設定された属性のコレクションを参照します。
構文

let attrList = Node.attributes;

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<div>
<h1>見出し</h1>
<p id="txt" class="message" style="color: #f00;" title="お腹減った">お腹減った。</p>
</div>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let p = document.getElementById('txt');
console.log( p.attributes ); // NamedNodeMap {0: id, 1: class, 2: style, 3: title, id: id, class: class, style: style, title: title, length: 4}

プロパティattributesが参照するデータは、NamedNodeMapインターフェースを継承したデータです。参照するデータをfor文で見てみます。

sample.js
let p = document.getElementById('txt');
let attrList = p.attributes;
let attr;
for( let i=0; i<attrList.length; i++ ){
	attr = attrList[i];
	console.log( attr );
	console.log( typeof attr ); // object
	console.log( attr.__proto__ ); // Attr {...}
};

変数attrのコンソール結果はそれぞれ次のような結果です。

コンソール画面(変数attrのみ抜粋)

id="txt"
class="message"
style="color: #f00;"
title="お腹減った"

typeof演算子とプロトタイプを確認すると、Attrインターフェースを継承したオブジェクトであるということがわかりました。NamedNodeMapインターフェースとAttrインターフェースはそれぞれ次のようなオブジェクトです。

Attrインターフェースは、Nodeインターフェースを継承しているため次のような方法で属性の値を参照することができます。

sample.js
let p = document.getElementById('txt');
let attrList = p.attributes;
let attr;
for( let i=0; i<attrList.length; i++ ){
	attr = attrList[i];
	console.log( i + ' : '属性名', attr.name );
	console.log( i + ' : '属性値', attr.nodeValue );
};

コンソール結果は次のようなになります。

コンソール画面

0 : 属性名 id
0 : 属性値 txt
1 : 属性名 class
1 : 属性値 message
2 : 属性名 style
2 : 属性値 color: #f00;
3 : 属性名 title
3 : 属性値 お腹減った

Nodeインターフェースで定義されているプロパティnodeValueを使用して属性の値を参照しました。期待通りの結果です。ただ、今後の仕様でNodeインターフェースはNodeインターフェースを継承しなくなる方針のためプロパティnodeValueを使用しないことを推奨します。代わりにプロパティvalueで参照できます。

sample.js
let p = document.getElementById('txt');
let attrList = p.attributes;
let attr;
for( let i=0; i<attrList.length; i++ ){
	attr = attrList[i];
	console.log( '属性名', attr.name );
	console.log( '属性値', attr.value );
};

属性の取得・設定

Elementインターフェースに属性の値を取得するメソッドgetAttribute、属性の値を設定するメソッドsetAttributeが定義されています。次のコードで確かめてみます。

Element.getAttribute(name):指定した属性名の値を取得する。
引数 name : 属性名(string)
戻り値(return): String
構文

let class = Element.getAttribute('class');

Element.setAttribute(name, value):指定した属性名の値を設定する。
引数 name : 属性名(string)
引数 value : 属性値(string)
構文

Element.getAttribute('class', 'txt');

sample.js
let p = document.getElementById('txt');
let style = p.getAttribute('style');
console.log( style ); // color: #f00;
p.setAttribute('style', 'color: #0f0;');

上のコードでは、メソッドgetAttributeを使用して、p要素のstyle属性を取得し、コンソールに出力しています。続いて、メソッドsetAttributeを使用してフォントカラーを緑色に設定しています。

メソッドを使用せずに属性の取得・設定する

メソッドgetAttribute、setAttributeを使用せずにプロパティで属性を参照することで取得・設定することができます。上で解説したコードをプロパティに置き換えてみます。

sample.js
let p = document.getElementById('txt');
let style = p.style;
console.log( style ); // CSSStyleDeclaration {...}
p.style = 'color: #0f0;';

プロパティでstyle属性を参照するとCSSStyleDeclarationインターフェースのオブジェクトが返ってくるようです。また、class属性の場合は、次のようなプロパティ名になります。

sample.js
let p = document.getElementById('txt');
console.log( p.class ); // undefined
console.log( p.className ); // message
p.className = 'lead';
console.log( p.className ); // lead

class指定だとundefinedになってしまいます。代わりにclassName指定で参照・設定ができます。

属性があるかどうかを確認する

Elementインターフェースに指定した属性があるかどうかを確認するメソッドhasAttributeが定義されています。

Element.hasAttribute(name):指定した属性が設定されているかどうかを確認する。
引数 name : 属性名(string)
戻り値(return): Boolean
構文

let boolean = Element.hasAttribute('class');

sample.js
let p = document.getElementById('txt');
if( p.hasAttribute('style') ) p.setAttribute('style', 'color: #0f0;');

上のコードでは、メソッドhasAttributeでstyle属性が設定しているかどうかを確認し、trueであれば、フォントカラーを緑色に設定しています。

属性を削除する

Elementインターフェースに指定した属性を削除するメソッドremoveAttributeが定義されています。

Element.removeAttribute(name):指定した属性を削除する。
引数 name : 属性名(string)
構文

Element.removeAttribute('class');

sample.js
let p = document.getElementById('txt');
if( p.hasAttribute('style') ) p.removeAttribute('style');

上のコードは、もしstyle属性が設定されていたらstyle属性を削除するコードになります。