Element.getAttribute()

getAttribute()Element インターフェイスのメソッドで、要素の指定された属性の値を返します。指定された属性が存在しない場合、値は null"" (空文字列) のどちらかになります。詳しくは属性が存在しない場合を参照してください。

構文

let attribute = element.getAttribute(attributeName);

ここで、

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

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

ノンス値の受け取り

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

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

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

let nonce =  script.nonce;

仕様書

仕様書 状態 備考
DOM
attachShadow() の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
getAttributeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 23IE 完全対応 8Opera 完全対応 8Safari 完全対応 1.3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 23Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応