diff options
| -rw-r--r-- | files/ja/web/api/element/animate/index.md | 187 | ||||
| -rw-r--r-- | files/ja/web/api/element/getattribute/index.md | 105 | ||||
| -rw-r--r-- | files/ja/web/api/element/getattributenames/index.md | 102 |
3 files changed, 184 insertions, 210 deletions
diff --git a/files/ja/web/api/element/animate/index.md b/files/ja/web/api/element/animate/index.md index 661f224477..8085c0925b 100644 --- a/files/ja/web/api/element/animate/index.md +++ b/files/ja/web/api/element/animate/index.md @@ -1,120 +1,81 @@ --- title: Element.animate() slug: Web/API/Element/animate +tags: + - API + - アニメーション + - Element + - メソッド + - リファレンス + - ウェブアニメーション +browser-compat: api.Element.animate translation_of: Web/API/Element/animate --- -<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div> - -<p>{{domxref("Element")}} インターフェースの <strong><code>animate()</code></strong> メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); -</pre> - -<h3 id="引数">引数</h3> - -<dl> - <dt><code>keyframes</code></dt> -</dl> - -<ol> - <li>列挙可能な値の配列をプロパティに持つ keyframes オブジェクト</li> - <li>keyframes オブジェクトから成る配列</li> -</ol> - -<dl> - <dd>のどちらかを指定します。keyframes 形式の詳細については <a href="/ja/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> で確認できます。</dd> - <dd> - <ol> - <li>変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト - <pre class="brush: js"><em>element.</em>animate({ - opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ] - color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ] -}, 2000); -</pre> - </li> - <li>CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列 - <pre class="brush: js"><em>element</em>.animate([ - { // フレーム 1 - opacity: 0, - color: "#fff" - }, - { // フレーム 2 - opacity: 1, - color: "#000" - } -], 2000);</pre> - </li> - </ol> - </dd> - <dt><code>options</code></dt> - <dd>アニメーションの再生時間を表す ms 単位の整数値、または <a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> を含むオブジェクトを渡す必要があります。後者の場合、<a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> のプロパティに加え、以下のようなプロパティも追加して <code>animate()</code> に渡すことができます。</dd> -</dl> - -<h4 id="keyframeOptions_に追加できるプロパティ">keyframeOptions に追加できるプロパティ</h4> - -<dl> - <dt><code>id</code></dt> - <dd>アニメーションを参照する文字列</dd> -</dl> - -<dl> - <dt><code>composite</code></dt> - <dd>Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は <code>replace</code> です。 - <ul> - <li><code>add</code> dictates an additive effect, where each successive iteration builds on the last. 例として <code>transform</code> <code>を挙げると</code>、<code>translateX(-200px)</code> は自身よりも前に指定されていた <code>rotate(20deg)</code> の値を上書きすることはありませんが、合成結果は <code>translateX(-200px) rotate(20deg)</code> になります。</li> - <li><code>accumulate</code> を指定した場合、<code>add</code> に似ていますがよりスマートな結果が得られ、<code>blur(2)</code> と <code>blur(5)</code> の合成結果は <code>blur(7)</code> になります（<code>blur(2) blur(5)</code> ではありません）。</li> - <li><code>replace</code> を指定した場合、前回の値は新しい値で上書きされます。</li> - </ul> - </dd> - <dt><code>iterationComposite</code></dt> - <dd>Defines the way animation values build from iteration to iteration. <code>accumulate</code> または <code>replace</code> を指定できます（上記参照）。デフォルト値は <code>replace</code> です。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>{{domxref("Animation")}} を返します。</p> - -<h2 id="使用例">使用例</h2> - -<p><a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a> のデモでは、上に向かって永遠に流れ続けるアニメーションが <code>#tunnel</code> 要素に施されています。ここでは、アニメーションを素早く作成して再生できる <code>animate()</code> メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。</p> - -<pre class="brush: js">document.getElementById("tunnel").animate([ - // keyframes - { transform: 'translate3D(0, 0, 0)' }, - { transform: 'translate3D(0, -300px, 0)' } +{{APIRef('Web Animations')}} + +{{domxref("Element")}} インターフェイスの **`animate()`** メソッドは、新しい {{domxref("Animation")}} の生成、この要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。生成した {{domxref("Animation")}} オブジェクトのインスタンスを返します。 + +> **Note:** 要素には複数のアニメーションを適用することができます。 {{domxref("Element.getAnimations()")}} を呼び出すと、要素に作用するアニメーションのリストを取得することができます。 + +## 構文 + +```js +animate(keyframes, options) +``` + +### 引数 + +- `keyframes` + - : キーフレームオブジェクトの配列、**または**プロパティが反復処理可能な値の配列である単一のキーフレームオブジェクトのどちらかです。詳しくは [Keyframe の書式](/ja/docs/Web/API/Web_Animations_API/Keyframe_Formats)を参照してください。 +- `options` + + - : **アニメーションの再生時間を表す整数値**（ミリ秒単位）、**または** [`KeyframeEffect()` のオプションの引数](/ja/docs/Web/API/KeyframeEffect)や次のオプションで記述された 1 つ以上のタイミングプロパティを含むオブジェクトのどちらかです。 + + - `id {{optional_inline}}` + - : `animate()` の固有のプロパティです。このアニメーションを参照する [`DOMString`](/ja/docs/Web/API/DOMString) です。 + +### 返値 + +{{domxref("Animation")}} を返します。 + +## 例 + +[Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010) のデモでは、上に向かって永遠に流れ続けるアニメーションが `#tunnel` 要素に施されています。ここでは、アニメーションを素早く作成して再生できる `animate()` メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。 + +```js +document.getElementById("tunnel").animate([ + // keyframes + { transform: 'translateY(0px)' }, + { transform: 'translateY(-300px)' } ], { - // timing options - duration: 1000, - iterations: Infinity + // timing options + duration: 1000, + iterations: Infinity }); -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td> - <td>{{Spec2('Web Animations')}}</td> - <td>Editor's draft.</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<p>{{Compat("api.Element.animate")}}</p> - -<h2 id="参考情報">参考情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li> - <li>{{domxref("Animation")}}</li> -</ul> +``` + +### 暗黙の開始/終了キーフレーム + +新しいバージョンのブラウザーでは、アニメーションの開始または終了状態のみ（つまり、単一のキーフレーム）で設定することができ、可能であればブラウザーがアニメーションのもう一方を推測します。例えば、[この簡単なアニメーション](https://mdn.github.io/dom-examples/web-animations-api/implicit-keyframes.html) を考えてみましょう。 Keyframe オブジェクトは次のようなものです。 + +```js +let rotate360 = [ + { transform: 'rotate(360deg)' } +]; +``` + +アニメーションの終了状態を指定しただけで、開始状態は暗黙になっています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API) +- {{domxref("Element.getAnimations()")}} +- {{domxref("Animation")}} 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 --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><span class="seoSummary"><strong><code>getAttribute()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、要素の指定された属性の値を返します。</span>指定された属性が存在しない場合、値は <code>null</code> か <code>""</code> (空文字列) のどちらかになります。詳しくは<a href="#Non-existing_attributes">属性が存在しない場合</a>を参照してください。</p> +**`getAttribute()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素の指定された属性の値を返します。 -<h2 id="Syntax" name="Syntax">構文</h2> +指定された属性が存在しない場合、値は `null` か `""` （空文字列）のどちらかになります。詳しくは[属性が存在しない場合](#属性が存在しない場合)を参照してください。 -<pre class="syntaxbox">let <var>attribute</var> = <var>element</var>.getAttribute(<var>attributeName</var>); -</pre> +## 構文 -<p>ここで、</p> +```js +let attribute = element.getAttribute(attributeName); +``` -<ul> - <li><code><var>attribute</var></code> は <code><var>attributeName</var></code> の値を持つ文字列です。</li> - <li><code><var>attributeName</var></code> は値を取得したい属性の名前です。</li> -</ul> +ここで、 -<h2 id="Examples" name="Examples">例</h2> +- `attribute` は `attributeName` の値を持つ文字列です。 +- `attributeName` は値を取得したい属性の名前です。 -<pre class="brush:js">const div1 = document.getElementById('div1'); -const align = div1.getAttribute('align'); +## 例 -alert(align); // id="div1" の要素の align の値を表示します。</pre> +```js +<!-- HTML 文書内の div の例 --> +<div id="div1">Hi Champ!</div> -<h2 id="Description" name="Description">解説</h2> +// コンソールへの出力 +const div1 = document.getElementById('div1'); +//=> <div id="div1">Hi Champ!</div> -<h3 id="Lower_casing" name="Lower_casing">小文字化</h3> +const exampleAttr= div1.getAttribute('id'); +//=> "div1" -<p>HTML 文書である DOM の HTML 要素に対して呼び出すと、 <code>getAttribute()</code> は処理前に引数を小文字化します。</p> +const align = div1.getAttribute('align') +//=> null +``` -<h3 id="Non-existing_attributes" name="Non-existing_attributes">属性が存在しない場合</h3> +## 解説 -<p>基本的にはすべてのウェブブラウザー (限定的なリストですが Firefox, Internet Explorer, Opera の最新バージョン, Safari, Konqueror, iCab など) は、指定された要素に指定された属性が存在しない場合は <code>null</code> を返します。これは<a href="http://dom.spec.whatwg.org/#dom-element-getattribute">現在の DOM 仕様書の草稿</a>で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には<em>空文字列</em>となっています。そしていくつかの DOM の実装はこの動作を実装しています。実際、 <code>getAttribute()</code> の XUL (Gecko) での実装では、 DOM 3 Core 仕様書に従い空文字列を返します。結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、 {{domxref("element.hasAttribute()")}} を使用して属性の存在をチェックしてから <code>getAttribute()</code> を呼び出すべきでしょう。</p> +### 小文字化 -<h3 id="Retrieving_nonce_values" name="Retrieving_nonce_values">ノンス値の受け取り</h3> +HTML 文書とされている DOM の HTML 要素に対して呼び出すと、 `getAttribute()` は処理前に引数を小文字化します。 -<p>セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た <a href="/ja/docs/Web/HTTP/CSP">CSP</a> のノンスと、 <code>.getAttribute("nonce")</code> の呼び出しは隠蔽されます。</p> +### 属性が存在しない場合 -<pre class="brush: js example-bad">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'); // 空文字列が返される -</pre> - -<p>コンテンツ属性のノンスをるには、代わりに <code><a href="/ja/docs/Web/API/HTMLOrForeignElement/nonce">nonce</a></code> プロパティを使用してください。</p> - -<pre class="brush: js">let nonce = script.nonce;</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("api.Element.getAttribute")}}</p> -</div> +``` + +コンテンツ属性のノンスをるには、代わりに {{domxref("HTMLElement/nonce", "nonce")}} プロパティを使用してください。 + +```js +let nonce = script.nonce; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/getattributenames/index.md b/files/ja/web/api/element/getattributenames/index.md index f353b84b74..7aa98aca5b 100644 --- a/files/ja/web/api/element/getattributenames/index.md +++ b/files/ja/web/api/element/getattributenames/index.md @@ -3,68 +3,84 @@ title: Element.getAttributeNames() slug: Web/API/Element/getAttributeNames tags: - API + - 属性 - DOM - Element - - getAttributeNames - メソッド - - 属性 + - getAttributeNames +browser-compat: api.Element.getAttributeNames translation_of: Web/API/Element/getAttributeNames --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} + +**`getAttributeNames()`** は {{domxref("Element")}} インターフェースのメソッドで、この要素の属性名を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。 + +`getAttributeNames()` を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。 + +**`getAttributeNames()`** から返される名前は*修飾*属性名です。すなわち、名前空間接頭辞がついた属性であり、名前空間接頭辞（実際の名前空間では*ない*）にコロンが続き、属性名が続きます（例えば **`xlink:href`**）。名前空間接頭辞のない属性は、そのままの名前になります（例えば **`href`**）。 + +## 構文 + +```js +let attributeNames = element.getAttributeNames(); +``` -<p>{{domxref("Element")}} インターフェースの <strong><code>getAttributeNames()</code></strong> メソッドは要素の属性の名前を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。</p> +## 例 -<p><code>getAttributeNames()</code> を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。</p> +以下の例は、次の方法を示しています。 -<h2 id="Syntax" name="Syntax">構文</h2> +- 名前空間接頭辞のある属性については、 `getAttributeNames()` は属性名と一緒に名前空間接頭辞を返します。 +- 名前空間接頭辞のない属性については、 `getAttributeNames()` は属性名のみをそのまま返します。 -<pre class="syntaxbox notranslate"><em>let attributeNames</em> = element.getAttributeNames(); -</pre> +以下のことを理解することが重要です。 -<h2 id="Example" name="Example">例</h2> +1. DOM には名前空間に所属していても、名前空間接頭辞がない場合があります。 +2. 名前空間に所属しているが、名前空間接頭辞のない DOM 内の属性については、 `getAttributeNames()` は属性名だけを返し、その属性が名前空間に所属していることを示しません。 -<pre class="brush:js notranslate">// 要素の属性に対して反復処理する -for(let name of element.getAttributeNames()) { - let value = element.getAttribute(name); - console.log(name, value); +以下の例では、このような「名前空間に所属しているが、名前空間接頭辞がない」場合を示しています。 + +```js +const element = document.createElement('a') + +// "href" 属性を名前空間なし、名前空間接頭辞なしで設定 +element.setAttribute('href', 'https://example.com') +// "href" 属性を名前空間あり、 "xlink" 名前空間接頭辞で設定 +element.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://example.com') +// "show" 属性を名前空間あり、名前空間接頭辞なしで設定 +element.setAttributeNS('http://www.w3.org/1999/xlink', 'show', 'new') + +// 要素の属性を反復処理する +for (let name of element.getAttributeNames()) { + let value = element.getAttribute(name); + console.log(name, value); } -</pre> -<h2 id="Polyfill" name="Polyfill">代替モジュール</h2> +// 出力結果: +// href https://example.com +// xlink:href https://example.com +// show new +``` -<pre class="brush:js notranslate">if (Element.prototype.getAttributeNames == undefined) { +## ポリフィル + +```js +if (Element.prototype.getAttributeNames == undefined) { Element.prototype.getAttributeNames = function () { var attributes = this.attributes; var length = attributes.length; var result = new Array(length); - for (var i = 0; i < length; i++) { + for (var i = 0; i < length; i++) { result[i] = attributes[i].name; } return result; }; -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div> -<p>{{Compat("api.Element.getAttributeNames")}}</p> -</div> +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} |