From 78061aaf185f3c864174650a7b3c0dbff2a87958 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 2 Mar 2022 23:26:56 +0900 Subject: 2022/02/18 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/getattribute/index.md | 105 ++++++++++++------------- 1 file changed, 51 insertions(+), 54 deletions(-) (limited to 'files/ja/web/api/element/getattribute') diff --git a/files/ja/web/api/element/getattribute/index.md b/files/ja/web/api/element/getattribute/index.md index 4ee84122ba..af0ef01437 100644 --- a/files/ja/web/api/element/getattribute/index.md +++ b/files/ja/web/api/element/getattribute/index.md @@ -5,77 +5,74 @@ tags: - API - DOM - Element - - Method - - Reference - メソッド + - リファレンス +browser-compat: api.Element.getAttribute translation_of: Web/API/Element/getAttribute --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

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

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

構文

+指定された属性が存在しない場合、値は `null` か `""` （空文字列）のどちらかになります。詳しくは[属性が存在しない場合](#属性が存在しない場合)を参照してください。 -
let attribute = element.getAttribute(attributeName);
-
+## 構文 -

ここで、

+```js +let attribute = element.getAttribute(attributeName); +``` - +ここで、 -

例

+- `attribute` は `attributeName` の値を持つ文字列です。 +- `attributeName` は値を取得したい属性の名前です。 -
const div1 = document.getElementById('div1');
-const align = div1.getAttribute('align');
+## 例
 
-alert(align); // id="div1" の要素の align の値を表示します。
+```js + +
Hi Champ!
-

解説

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

小文字化

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

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

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

属性が存在しない場合

+## 解説 -

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

+### 小文字化 -

ノンス値の受け取り

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

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

+### 属性が存在しない場合 -
let nonce =  script.getAttribute('nonce');
+基本的にはすべてのウェブブラウザー（限定的なリストですが Firefox, Internet Explorer, Opera の最新バージョン, Safari, Konqueror, iCab など）は、指定された要素に指定された属性が存在しない場合は `null` を返します。これは[現在の DOM 仕様書の草稿](https://dom.spec.whatwg.org/#dom-element-getattribute)で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には空文字列となっています。そしていくつかの DOM の実装はこの動作を実装しています。実際、 `getAttribute()` の XUL (Gecko) での実装では、 DOM 3 Core 仕様書に従い空文字列を返します。結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、 {{domxref("element.hasAttribute()")}} を使用して属性の存在をチェックしてから `getAttribute()` を呼び出すべきでしょう。
+
+### ノンス値の受け取り
+
+セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た [CSP](/ja/docs/Web/HTTP/CSP) のノンスと、 `.getAttribute("nonce")` の呼び出しは隠蔽されます。
+
+```js example-bad
+let nonce =  script.getAttribute('nonce');
 // 空文字列が返される
-
- -

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

- -
let nonce =  script.nonce;
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}}
- -

ブラウザーの互換性

- -
-

{{Compat("api.Element.getAttribute")}}

-
+``` + +コンテンツ属性のノンスをるには、代わりに {{domxref("HTMLElement/nonce", "nonce")}} プロパティを使用してください。 + +```js +let nonce = script.nonce; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -- cgit v1.2.3-54-g00ecf