要素の属性値を取得・設定(getAttribute,setAttribute)

HTML のタグには id 属性や class 属性といった属性を設定することができます。属性はすべてのタグで利用できるものと特定のタグだけで利用できるものがあり、 JavaScript からはプロパティまたはメソッドを使って属性値を参照したり新しい値を設定することができます。ここでは要素ノードに対して属性名を指定して属性値を取得したり、新しい属性値を設定する方法について解説します。

(Last modified: 2023年02月03日)

属性値を取得する(プロパティ)
属性値を設定する(プロパティ)
属性値を取得する(getAttributeメソッド)
属性値を設定する(setAttributeメソッド)

属性値を取得する(プロパティ)

要素に設定された属性値は次のようにプロパティ名として属性名を指定して参照することができます。

element.属性名

使用できる属性名は、要素ノードのタグ毎に決まっており、どのタグでも使用できる共通の属性名と、特定のタグだけに用意された個別の属性名があります。

どのタグでも使用できる共通の属性名には id や class, style, title などの他にイベントハンドラ( onclick など)が用意されています(他にもあります)。 <p> タグや <div> タグは共通の属性名しか持っていません。

特定のタグでしか使用できない属性値には例えば <a> タグの href 属性や target 属性、 <blockquote> タグの cite 属性などがあります。

id 属性や href 属性はそのまま要素ノード.id や要素ノード.href と参照できますが、 class 属性の class は他の意味で使用される言葉なので class の代わりに要素ノード.className と参照します。他にも JavaScript で予約語と同じ名前の属性名については、もし属性名が xxx だった場合は代わりに要素ノード.htmlXxx のように属性名の前に html をつけ属性名の最初の文字を大文字に変えてください。

属性名はあるけれど値が設定されていないときは空文字が返り、対象の要素ノードに対して存在しない属性名を指定して値を参照すると undefined が返されます。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性値の取得</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
  <a href="http://www.example.com/">リストランテ南青山</a>
  <div class="shopaddress">東京都港区南青山</div>
</div>

<p>美味しかったです。</p>

<button onClick="getElement();">属性を取得</button>

<script>
function getElement(){
    let element = document.getElementById('shopinfo');
    console.log('href  : ' + element.children[0].href);
    console.log('class : ' + element.children[1].className);
    console.log('title : ' + element.children[1].title);
    console.log('href  : ' + element.children[1].href);
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素の href 属性、次の子要素の class 属性、 title 属性、 href 属性を取得してコンソールに出力します。

属性値を取得する(プロパティ)(1)

次の子要素である div タグには title 属性はありますが値が設定されていないので空文字が返され、 href 属性は存在しないので undefined が返されています。

属性値を設定する(プロパティ)

属性名を表すプロパティに対して値を設定することで、属性値に新しい値を設定することができます。

element.属性名 = 'value'

属性名に対して値が設定されていた場合は新しい属性値が設定されます。属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定されます。例えば class 属性に 'box' を設定する場合は次のように記述します。

let element = document.getElementById('shopinfo');
element.className = 'box';

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性値の設定</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
  <a href="http://www.example.com/">リストランテ南青山</a>
  <div class="shopaddress">東京都港区南青山</div>
</div>

<p>美味しかったです。</p>

<button onClick="setElement();">属性を設定</button>

<script>
function setElement(){
    let element = document.getElementById('shopinfo');
    element.children[0].href = 'http://www.example.jp/';
    element.children[0].target = '_blank';

    console.log('href   : ' + element.children[0].href);
    console.log('target : ' + element.children[0].target);
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードを取得し、最初の子要素の href 属性の値を変更し、新しく target 属性の値を設定します。そのあとで href 属性の値と target 属性の値を取得してコンソールに出力します。

属性値を設定する(プロパティ)(1)

属性値を取得する(getAttributeメソッド)

要素の属性値を取得するもう一つの方法です。 Element オブジェクトの getAttribute メソッドは指定した属性名の属性値を取得します。書式は次の通りです。

element.getAttribute(qualifiedName)

引数には取得したい属性名を DOMString オブジェクトで指定します。戻り値は引数に指定した属性名の属性値を DOMString オブジェクトで返します。指定した属性が見つからなかった場合は空文字か null が返されます。

なおプロパティを使って属性値を取得する場合、 class 属性の値を取得するときはプロパティ名として className を指定していましたが、 getAttribute メソッドを使う時は引数に 'class' のように属性名をそのまま指定します。他の属性名についても同じです。

let element = document.getElementById('shopinfo');
let attvalue = element.getAttribute('class');

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性値の取得</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
  <a href="http://www.example.com/">リストランテ南青山</a>
  <div class="shopaddress">東京都港区南青山</div>
</div>

<p>美味しかったです。</p>

<button onClick="getElement();">属性を取得</button>

<script>
function getElement(){
    let element = document.getElementById('shopinfo');
    console.log('href  : ' + element.children[0].getAttribute('href'));
    console.log('class : ' + element.children[1].getAttribute('class'));
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素の href 属性、次の子要素の class 属性の値をそれぞれ取得してコンソールに出力します。

属性値を取得する(getAttributeメソッド)(1)

属性値を設定する(setAttributeメソッド)

要素の属性値を設定するもう一つの方法です。 Element オブジェクトの setAttribute メソッドは指定した属性名の属性値に新しい値を設定します。書式は次の通りです。

element.setAttribute(qualifiedName, value)

1 番目の引数に属性名、 2 番目の引数に属性値をそれぞれ DOMString オブジェクトで指定します。

属性名に対して値が設定されていた場合は新しい属性値が設定されます。属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定されます。例えば class 属性の値に 'box' と設定する場合は次のように記述します。

let element = document.getElementById('shopinfo');
element.setAttribute('class', 'box');

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性値の設定</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
  <a href="http://www.example.com/">リストランテ南青山</a>
  <div class="shopaddress">東京都港区南青山</div>
</div>

<p>美味しかったです。</p>

<button onClick="setElement();">属性を設定</button>

<script>
function setElement(){
    let element = document.getElementById('shopinfo');
    element.children[0].setAttribute('target', '_blank');
    element.children[1].setAttribute('class', 'address');

    console.log('target : ' + element.children[0].getAttribute('target'));
    console.log('class  : ' + element.children[1].getAttribute('class'));
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードを取得し、最初の子要素に新しく target 属性の値を設定し、次の子要素の class 属性の値に新しい値を設定します。そのあとで target 属性の値と class 属性の値を取得してコンソールに出力します。

属性値を設定する(setAttributeメソッド)(1)

-- --

要素に対して属性名を指定して属性値を取得したり新しい属性値を設定する方法について解説しました。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。