Element.getAttribute()

getAttribute() は Element インターフェイスのメソッドで、この要素の指定された属性の値を返します。

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

構文

js

let attribute = element.getAttribute(attributeName);

ここで、

  • attribute は attributeName の値を持つ文字列です。
  • attributeName は値を取得したい属性の名前です。

例

js

<!-- HTML 文書内の div の例 -->
<div id="div1">Hi Champ!</div>

// コンソールへの出力
const div1 = document.getElementById('div1');
//=> <div id="div1">Hi Champ!</div>

const exampleAttr= div1.getAttribute('id');
//=> "div1"

const align = div1.getAttribute('align')
//=> null

解説

小文字化

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() を呼び出すべきでしょう。

ノンス値の受け取り

セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た CSP のノンスと、 .getAttribute("nonce") の呼び出しは隠蔽されます。

js

let nonce =  script.getAttribute('nonce');
// 空文字列が返される

コンテンツ属性のノンスをるには、代わりに nonce プロパティを使用してください。

js

let nonce =  script.nonce;

仕様書

Specification
DOM Standard
# ref-for-dom-element-getattribute①

ブラウザーの互換性

BCD tables only load in the browser