Element: getAttribute() メソッド

構文

getAttribute(attrName)

引数

attrName

属性の名前を指定する文字列。HTML 文書としてフラグ付けされた DOM 内の HTML 要素に対して呼び出された場合、その名前は小文字に正規化されます。

返値

属性の値が入った文字列。ただし、要素に指定された名前の属性がない場合は null となります。

使用メモ

属性値内のデコード済み文字参照

属性のソースマークアップに含まれる HTML 文字参照（例えば、<、&、< など）は、文書が構文解析される際に HTML パーサーによってデコードされるため、getAttribute() はソース通りではなく、デコードされた値を返します。

例えば、

<div id="example" data-payload="&lt;b&gt;hi&lt;/b&gt;"></div>

document.getElementById("example").getAttribute("data-payload") を呼び出すと、文字列 "<b>hi</b>" が返されます。

getAttribute() の返値を、すでにエスケープ済みの HTML として扱うことは安全ではありません。信頼できないデータを含む属性を読み取り、それを innerHTML に代入したり、マークアップとして文書に挿入したりすると、特殊文字をエスケープするために使用された HTML 参照はすでにデコードされており、その結果、クロスサイトスクリプティング (XSS) 攻撃に悪用される可能性があります。

信頼できないデータを扱う場合は、innerHTML の代わりに textContent（またはその他のテキストセーフな API）を使用してください。

ノンス値の受け取り

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

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

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

const nonce = script.nonce;

例

<!-- 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 lang = div1.getAttribute("lang");
// null

仕様書

ブラウザーの互換性

関連情報

• Element.hasAttribute()
• Element.setAttribute()
• Element.removeAttribute()
• Element.toggleAttribute()