3章 属性の操作

本章では属性の操作を学びます。属性もテキストと同様に要素に関する情報なので、1章で学んだ要素の取得が前提になります。

3.1 属性の取得

属性を取得するには、getAttributeメソッドを使います。

var value = element.getAttribute(attr);

引数attrには取得したい属性名を指定します。戻り値は属性の値(文字列)になります。

さっそく試してみましょう。

<a href="b.html">リンク</a>

ここでリンク先のURL(href属性の値)を取得してみます。

//a要素を取得
var a = document.querySelector('a');

//a要素のhref属性の値を取得
var url = a.getAttribute('href');

//アラート表示
alert(url);

要素オブジェクトを取得してgetAttributeメソッドを呼び出すだけです。今回はhref属性を取得したいので、引数に'href'を指定します。他の属性を取得する場合も同様です。

<a id="menu" href="b.html" title="メニュー">メニュー</a>
//a要素を取得
var a = document.querySelector('a');

//title属性を取得
var title = a.getAttribute('title');

//id属性を取得
var id = a.getAttribute('id');

3.2 属性の変更(追加)

今度は属性の変更、あるいは追加を見ていきましょう。属性が付与されていない場合は追加となります。使うのはsetAttributeメソッドです。

element.setAttribute(attr, value);

引数attrには属性名をvalueには設定する値を指定します。

具体例で確認しましょう。

<a href="b.html">リンク</a>
//a要素を取得
var a = document.querySelector('a');

//a要素のhref属性をc.htmlに変更
a.setAttribute('href', 'c.html');

//a要素のtarget属性を値_blankで追加
a.setAttribute('target', '_blank');

a要素のリンク先をc.htmlに変更し、さらに新規タブで開くようにtargetに_blankを設定しています。

3.3 属性の削除

属性を削除するにはremoveAttributeメソッドを使います。

element.removeAttribute(attr);

引数attrは削除する属性名を指定します。

実際に試してみましょう。

<a href="b.html">リンク</a>
//a要素を取得
var a = document.querySelector('a');

//a要素のhref属性を削除
a.removeAttribute('href');

3.4 まとめ

本章では、属性の操作について学びました。覚えておくべきなのは以下の3つです。

  • getAttribute
  • setAttribute
  • removeAttribute
Last Updated: 2018-5-10 17:49:38