DOM

：

：

Element.getAttribute() メソッド

　編集：2022.09.25 by T.A.

[Edge]。→、

element の指定属性の値を文字列で返します。

指定された属性が存在しない場合、値は null か ""（空文字列）のどちらかになります。詳しくは「属性が存在しない場合」を参照してください。

構文
element.getAttribute(attrName);
element Element。
attrName 取得したい属性の名前です。
戻り値

文字列です。

例
const div1 = document.getElementById('div1');
const align = div1.getAttribute('align');

alert(align); // id="div1" の要素の align の値を表示します。
解説
小文字化

HTML 文書である DOM の HTML 要素に対して呼び出すと、getAttribute() は処理前に引数を小文字化します。

属性が存在しない場合

基本的にはすべてのウェブブラウザー（限定的なリストですが Firefox、Internet Explorer、Opera の最新バージョン、Safari、Konqueror、iCab など）は、指定された要素に指定された属性が存在しない場合は null を返します。これは現在の DOM 仕様書の草稿で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には空文字列となっています。そしていくつかの DOM の実装はこの動作を実装しています。
実際、getAttribute() の XUL（Gecko）での実装では、DOM 3 Core 仕様書に従い空文字列を返します。
結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、element.hasAttribute() を使用して属性の存在をチェックしてから getAttribute() を呼び出すべきでしょう。

¶省く

例

HTML： 

<SPAN id=IdTest class="Test Test2" style="color:red; font-size:30px;">SPAN要素</SPAN>

JavaScript： 

D=IdTest.getAttribute('id');    //＝[string]：IdTest
D=IdTest.getAttribute('class'); //＝[string]：Test Test2
D=IdTest.getAttribute('style'); //＝[string]：color:red; font-size:30px;
スクリプトで属性を設定した場合

HTML： 

<SPAN id=IdTest>SPAN要素</SPAN>

JavaScript： 

A=document.createAttribute('style');
A.value='color:red';
IdTest.setAttributeNode(A);
D=IdTest.getAttribute('style'); //＝[string]：color:red

取得できました。

テスト