diff options
| author | Atsuto Yamashita <atyamash@yahoo-corp.jp> | 2022-03-15 19:47:35 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-15 19:47:35 +0900 |
| commit | 9bf38df91fadd199a5ea45ad79d5e111ddfb3fe0 (patch) | |
| tree | 71952407ea41c86feabef4214610d59e15aae55d /files/ja/web | |
| parent | c2678137db5f97ad1fe39e872529159a1afafec1 (diff) | |
| parent | 9e7fbb013772ebab9b35185f0d0836995acbe6db (diff) | |
| download | translated-content-9bf38df91fadd199a5ea45ad79d5e111ddfb3fe0.tar.gz translated-content-9bf38df91fadd199a5ea45ad79d5e111ddfb3fe0.tar.bz2 translated-content-9bf38df91fadd199a5ea45ad79d5e111ddfb3fe0.zip | |
Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja
Diffstat (limited to 'files/ja/web')
195 files changed, 9016 insertions, 6021 deletions
diff --git a/files/ja/web/accessibility/index/index.html b/files/ja/web/accessibility/index/index.html deleted file mode 100644 index 3e2035d320..0000000000 --- a/files/ja/web/accessibility/index/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: アクセシビリティ関連ドキュメントの索引 -slug: Web/Accessibility/Index -tags: - - Accessibility - - Index -translation_of: Web/Accessibility/Index ---- -<p class="summary"><span class="seoSummary">このドキュメントは、Mozilla Developer Network サイト上の、すべてのアクセシビリティの記事へのリンクの一覧を提供します。</span></p> - -<p>{{Index("/ja/docs/Web/Accessibility")}}</p> diff --git a/files/ja/web/api/cookiestore/change_event/index.md b/files/ja/web/api/cookiestore/change_event/index.md new file mode 100644 index 0000000000..4d497e64cd --- /dev/null +++ b/files/ja/web/api/cookiestore/change_event/index.md @@ -0,0 +1,51 @@ +--- +title: 'CookieStore: change event' +slug: Web/API/CookieStore/change_event +tags: + - API + - Reference + - Event + - change + - onchange + - CookieStore +browser-compat: api.CookieStore.change_event +--- +{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}} + +任意の Cookie に変更が加えられると、{{domxref("CookieStore")}} オブジェクトで `change` イベントが発火します。 + +## 構文 + +イベント名は {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用したり、イベントハンドラープロパティで設定されます。 + +```js +cookieStore.addEventListener('change', event => { }) + +cookieStore.onchange = event => { } +``` + +## 例 + +Cookie が変更されたときに通知を受けるには、以下のように {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使って `cookieStore` インスタンスにハンドラを追加可能です。 + +```js +cookieStore.addEventListener('change', function(event) { + console.log('1 change event'); +}); +``` + +あるいは、`CookieStore.onchange` イベントハンドラープロパティを使用して、`change` イベントのハンドラを定義できます。 + +```js +cookieStore.onchange = function(event) { + console.log('1 change event'); +}; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cookiestore/delete/index.md b/files/ja/web/api/cookiestore/delete/index.md new file mode 100644 index 0000000000..a8a47cc20d --- /dev/null +++ b/files/ja/web/api/cookiestore/delete/index.md @@ -0,0 +1,66 @@ +--- +title: CookieStore.delete() +slug: Web/API/CookieStore/delete +tags: + - API + - Method + - Reference + - delete() + - CookieStore +browser-compat: api.CookieStore.delete +--- +{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}} + +{{domxref("CookieStore")}} インターフェイスの **`delete()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することで Cookie を失効させます。 + +## 構文 + +```js +var promise = cookieStore.delete(name); +var promise = cookieStore.delete(options); +``` + +### 引数 + +このメソッドは、以下のいずれかが必要です。 + +- `name` + - : Cookie の名前が入っている {{domxref("USVString")}} です。 +- オプション + + - : オブジェクトは次のものを含みます。 + + - `name` + - : Cookie の名前が入っている {{domxref("USVString")}} です。 + - `url`{{Optional_Inline}} + - : Cookie の URL が入っている {{domxref("USVString")}} です。 + - `path`{{Optional_Inline}} + - : パスを含む {{domxref("USVString")}} です。 + +> **Note:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。 + +### 返値 + +削除が完了すると {{jsxref("Undefined")}} に解決される {{jsxref("Promise")}} です。 + +### 例外 + +- {{jsxref("TypeError")}} + - : 与えられた `name` や `options` で表される Cookie の削除に失敗した場合にスローされます。 + +## 例 + +この例では、`delete()` メソッドに名前を渡すことで、Cookie を削除しています。 + +```js +let result = cookieStore.delete('cookie1'); +console.log(result); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cookiestore/get/index.md b/files/ja/web/api/cookiestore/get/index.md new file mode 100644 index 0000000000..0048bd09dc --- /dev/null +++ b/files/ja/web/api/cookiestore/get/index.md @@ -0,0 +1,93 @@ +--- +title: CookieStore.get() +slug: Web/API/CookieStore/get +tags: + - API + - Method + - Reference + - get() + - CookieStore +browser-compat: api.CookieStore.get +--- +{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}} + +{{Domxref("CookieStore")}} インターフェイスの **`get()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ 1 つの Cookie を返します（下記参照）。このメソッドは渡されたパラメータに最初にマッチする Cookie を返します。 + +## 構文 + +```js +var cookie = CookieStore.get(name); +var cookie = CookieStore.get(options); +``` + +### 引数 + +このメソッドは、以下のいずれかが必要です。 + +- `name` + - : Cookie の名前が入っている {{domxref("USVString")}} です。 +- オプション + + - : オブジェクトは次のものを含みます。 + + - `name` + - : Cookie の名前が入っている {{domxref("USVString")}} です。 + - `url` + - : Cookie の URL が入っている {{domxref("USVString")}} です。 + +> **Note:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。 + +### 返値 + +与えられた名前またはオプションに一致する最初の Cookie を含むオブジェクトに解決される {{jsxref("Promise")}} です。このオブジェクトは以下のプロパティを含んでいます。 + +- `name` + - : Cookie の名前を含む {{domxref("USVString")}} です。 +- `value` + - : Cookie の値を含む {{domxref("USVString")}} です。 +- `domain` + - : Cookie のドメインを含む {{domxref("USVString")}} です。 +- `path` + - : Cookie のパスを含む {{domxref("USVString")}} です。 +- `expires` + - : Cookie の有効期限を含む {{domxref("DOMTimeStamp")}} です。 +- `secure` + - : Cookie を安全なコンテキストでのみ使用するかどうかを示す {{jsxref("boolean")}} です。 +- `sameSite` + + - : 以下の [SameSite](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) のいずれかの値です。 + + - `"strict"` + - : Cookie は、ファーストパーティのコンテキストでのみ送信され、サードパーティのウェブサイトによるリクエストと一緒に送信されることはありません + - `"lax"` + - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されませんが、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。 + - `"none"` + - : Cookie は、すべてのコンテキストで送信されます。 + + > **Note:** SameSite cookies の詳細については、 [SameSite cookies explained](https://web.dev/samesite-cookies-explained/) をご覧ください。 + +### 例外 + +- {{jsxref("TypeError")}} + - : 与えられた `name` や `options` で表される Cookie の取得に失敗した場合にスローされます。 + +## 例 + +この例では、"cookie1" という名前の Cookie を返します。もし Cookie が見つかれば、プロミスの結果は 1 つの Cookie の詳細を含むオブジェクトになります。 + +```js +let cookie = cookieStore.get('cookie1'); +if (cookie) { + console.log(cookie); +} else { + console.log('Cookie not found'); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cookiestore/getall/index.md b/files/ja/web/api/cookiestore/getall/index.md new file mode 100644 index 0000000000..611181a105 --- /dev/null +++ b/files/ja/web/api/cookiestore/getall/index.md @@ -0,0 +1,66 @@ +--- +title: CookieStore.getAll() +slug: Web/API/CookieStore/getAll +tags: + - API + - Method + - Reference + - getAll() + - CookieStore +browser-compat: api.CookieStore.getAll +--- +{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}} + +{{domxref("CookieStore")}} インターフェイスの **`getAll()`** メソッドは、渡された名前またはオプションに一致する Cookie のリストを返します。パラメータを何も渡さなければ、現在のコンテキストのすべての Cookie を返します。 + +## 構文 + +```js +var list = cookieStore.getAll(name); +var list = cookieStore.getAll(options); +``` + +### 引数 + +- `name`{{Optional_Inline}} + - : Cookie の名前が入っている {{domxref("USVString")}} です。 +- `options`{{Optional_Inline}} + + - : An object containing: + + - `name` + - : Cookie の名前が入っている {{domxref("USVString")}} です。 + - `url` + - : Cookie の URL が入っている {{domxref("USVString")}} です。 + +> **Note:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。 + +### 返値 + +与えられた名前またはオプションの Cookie のリストに解決される {{jsxref("Promise")}} です。 + +### 例外 + +- {{jsxref("TypeError")}} + - : 与えられた `name` や `options` で表される Cookie の取得に失敗した場合にスローされます。 + +## 例 + +この例では、引数無しで `getAll()` を使用しています。このコンテキストのすべての Cookie をオブジェクトの配列として返します。 + +```js +let cookies = cookieStore.getAll(); +if (cookies) { + console.log(cookies); +} else { + console.log('Cookie not found'); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cookiestore/index.md b/files/ja/web/api/cookiestore/index.md new file mode 100644 index 0000000000..ff096259a5 --- /dev/null +++ b/files/ja/web/api/cookiestore/index.md @@ -0,0 +1,63 @@ +--- +title: CookieStore +slug: Web/API/CookieStore +tags: + - API + - Interface + - Reference + - CookieStore +browser-compat: api.CookieStore +--- +{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}} + +{{domxref('Cookie Store API')}} のインターフェイスである **`CookieStore`** は、ページまたはサービスワーカーから非同期に Cookie を取得、設定するためのメソッドを提供します。 + +`CookieStore` は {{domxref("Window")}} or {{domxref("ServiceWorkerGlobalScope")}} コンテキスト内のグローバスコープの属性を介してアクセスされます。そのため、コンストラクタはありません。 + +{{InheritanceDiagram}} + +## メソッド + +- {{domxref("CookieStore.delete()")}} + - : `delete()` メソッドは与えられた名前またはオプションオブジェクトを持つ Cookie を削除します。削除が完了すると解決される {{jsxref("Promise")}} が返されます。 +- {{domxref("CookieStore.get()")}} + - : `get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つの Cookie を取得します。1 つの Cookie の詳細に解決される {{jsxref("Promise")}} を返します。 +- {{domxref("CookieStore.getAll()")}} + - : `getAll()` メソッドはマッチするすべての Cookie を取得します。Cookie のリストに解決される {{jsxref("Promise")}} を返します。 +- {{domxref("CookieStore.set()")}} + - : `set()` メソッドは与えられた名前と値またはオプションオブジェクトを Cookie に設定し、Cookie が設定されると解決される {{jsxref("Promise")}} を返します。 + +## イベント + +- {{domxref("CookieStore.change_event")}} + - : `change` イベントは、任意の Cookie に変更が加えられたときに発生します。 + +## 例 + +この例では、Cookie を設定し、操作が成功したか失敗したかのフィードバックをコンソールに書き込んでいます。 + +```js +const day = 24 * 60 * 60 * 1000; +cookieStore.set({ + name: "cookie1", + value: "cookie1-value", + expires: Date.now() + day, + domain: "example.com" +}) +.then( + function() { + console.log("It worked!"); + }, + function(reason) { + console.error("It failed: ", reason); + } +); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/cookiestore/set/index.md b/files/ja/web/api/cookiestore/set/index.md new file mode 100644 index 0000000000..29c76a568c --- /dev/null +++ b/files/ja/web/api/cookiestore/set/index.md @@ -0,0 +1,89 @@ +--- +title: CookieStore.set() +slug: Web/API/CookieStore/set +tags: + - API + - Method + - Reference + - set() + - CookieStore +browser-compat: api.CookieStore.set +--- +{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}} + +{{domxref("CookieStore")}} インターフェイスの **`getAll()`** メソッドは、渡された名前またはオプションに一致する Cookie のリストを返します。引数を何も渡さなければ、現在のコンテキストのすべての Cookie を返します。 + +## 構文 + +```js +var promise = cookieStore.set(name,value); +var promise = cookieStore.set(options); +``` + +### 引数 + +このメソッドは、以下のいずれかが必要です。 + +- `name` + - : Cookie の名前が入っている {{domxref("USVString")}} です。 +- `value` + - : Cookie の値が入っている {{domxref("USVString")}} です。 +- オプション + + - : オブジェクトは次のものを含みます。 + + - `name` + - : Cookie の名前が入っている {{domxref("USVString")}} です。 + - `value` + - : Cookie の値が入っている {{domxref("USVString")}} です。 + - `expires`{{Optional_Inline}} + - : Cookie の有効期限を含む {{domxref("DOMTimeStamp")}} です。 + - `domain`{{Optional_Inline}} + - : Cookie のドメインを含む {{domxref("USVString")}} です。 + - `path`{{Optional_Inline}} + - : Cookie のパスを含む {{domxref("USVString")}} です。 + - `sameSite`{{Optional_Inline}} + + - : 以下の [SameSite](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) のいずれかの値です。 + + - `"strict"` + - : Cookie は、ファーストパーティのコンテキストでのみ送信され、サードパーティのウェブサイトによるリクエストと一緒に送信されることはありません + - `"lax"` + - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されません。しかし、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。 + - `"none"` + - : Cookie は、すべてのコンテキストで送信されます。 + + > **Note:** SameSite cookies の詳細については、 [SameSite cookies explained](https://web.dev/samesite-cookies-explained/) をご覧ください。 + +### 返値 + +Cookie の設定が完了すると {{jsxref("Undefined")}} に解決される {{jsxref("Promise")}} です。 + +### 例外 + +- {{jsxref("TypeError")}} + - : 与えられた値での Cookie の設定に失敗した場合にスローされます。 +- {{domxref("DOMException")}} `SecurityError` + - : オリジンが URL に {{glossary("serialize")}} されない場合にスローされます。 + +## 例 + +次の例では `name`、`value`、`expires`、`domain` を持つオブジェクトを渡して Cookie を設定します。 + +```js +const day = 24 * 60 * 60 * 1000; +cookieStore.set({ + name: "cookie1", + value: "cookie1-value", + expires: Date.now() + day, + domain: "example.com" +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/css_object_model/managing_screen_orientation/index.html b/files/ja/web/api/css_object_model/managing_screen_orientation/index.html index e70e964880..9d955045a5 100644 --- a/files/ja/web/api/css_object_model/managing_screen_orientation/index.html +++ b/files/ja/web/api/css_object_model/managing_screen_orientation/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation <p>CSS と JavaScript の双方に、画面の向きを扱う方法がいくつかあります。第一の方法は <a href="/ja/docs/CSS/Media_queries#orientation">orientation メディアクエリ</a>です。これはブラウザウィンドウがランドスケープモード (すなわち幅が高さより大きい) かポートレートモード (高さが幅より大きい) かに基づいて、CSS を使用してコンテンツのレイアウトを調整できます。</p> -<p>第二の方法は、画面自身の現在の向きを取得して最終的に固定するために使用できる、JavaScript の Screen orientation API です。</p> +<p>第二の方法は、画面自身の現在の向きを取得して最終的に固定するために使用できる、JavaScript の Screen Orientation API です。</p> <h2 id="Adjusting_layout_based_on_the_orientation" name="Adjusting_layout_based_on_the_orientation">向きに基づいてレイアウトを調整する</h2> diff --git a/files/ja/web/api/element/after/index.html b/files/ja/web/api/element/after/index.html deleted file mode 100644 index 52186ca2fb..0000000000 --- a/files/ja/web/api/element/after/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Element.after() -slug: Web/API/Element/after -tags: - - API - - DOM - - Method - - Node - - Reference -browser-compat: api.Element.after -translation_of: Web/API/Element/after ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>Element.after()</strong></code> は、<code>Element</code> の親の子リストの、<code>Element</code> の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js"> -after(... nodes) -</pre> - -<h3 id="Parameters">引数</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> -</dl> - -<h3 id="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードを階層内の指定の位置に挿入できません。</li> -</ul> - -<h2 id="Examples">例</h2> - -<h3 id="Inserting_an_element">要素の挿入</h3> - -<pre class="brush: js">let container = document.createElement("div"); -let p = document.createElement("p"); -container.appendChild(p); -let span = document.createElement("span"); - -p.after(span); - -console.log(container.outerHTML); -// "<div><p></p><span></span></div>" -</pre> - -<h3 id="Inserting_text">テキストの挿入</h3> - -<pre class="brush: js">let container = document.createElement("div"); -let p = document.createElement("p"); -container.appendChild(p); - -p.after("Text"); - -console.log(container.outerHTML); -// "<div><p></p>Text</div>"</pre> - -<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3> - -<pre class="brush: js">let container = document.createElement("div"); -let p = document.createElement("p"); -container.appendChild(p); -let span = document.createElement("span"); - -p.after(span, "Text"); - -console.log(container.outerHTML); -// "<div><p></p><span></span>Text</div>"</pre> - -<h2 id="Specification">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element.before()")}}</li> - <li>{{domxref("Element.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/web/api/element/after/index.md b/files/ja/web/api/element/after/index.md new file mode 100644 index 0000000000..40344ddd30 --- /dev/null +++ b/files/ja/web/api/element/after/index.md @@ -0,0 +1,90 @@ +--- +title: Element.after() +slug: Web/API/Element/after +tags: + - API + - DOM + - メソッド + - Node + - リファレンス +browser-compat: api.Element.after +translation_of: Web/API/Element/after +--- +{{APIRef("DOM")}} + +**`Element.after()`** は、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子リストの、 `Element` の直後に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。 + +## 構文 + +```js +after(... nodes) +``` + +### 引数 + +- `nodes` + - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。 + +### 例外 + +- `HierarchyRequestError` {{DOMxRef("DOMException")}} + - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。 + +## 例 + +### 要素の挿入 + +```js +let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.after(span); + +console.log(container.outerHTML); +// "<div><p></p><span></span></div>" +``` + +### テキストの挿入 + +```js +let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); + +p.after("Text"); + +console.log(container.outerHTML); +// "<div><p></p>Text</div>" +``` + +### 要素とテキストの挿入 + +```js +let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.after(span, "Text"); + +console.log(container.outerHTML); +// "<div><p></p><span></span>Text</div>" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.before()")}} +- {{domxref("Element.append()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("NodeList")}} diff --git a/files/ja/web/api/element/animate/index.html b/files/ja/web/api/element/animate/index.html deleted file mode 100644 index 661f224477..0000000000 --- a/files/ja/web/api/element/animate/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Element.animate() -slug: Web/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)' } -], { - // 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> diff --git a/files/ja/web/api/element/animate/index.md b/files/ja/web/api/element/animate/index.md new file mode 100644 index 0000000000..8085c0925b --- /dev/null +++ b/files/ja/web/api/element/animate/index.md @@ -0,0 +1,81 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API + - アニメーション + - Element + - メソッド + - リファレンス + - ウェブアニメーション +browser-compat: api.Element.animate +translation_of: Web/API/Element/animate +--- +{{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 +}); +``` + +### 暗黙の開始/終了キーフレーム + +新しいバージョンのブラウザーでは、アニメーションの開始または終了状態のみ（つまり、単一のキーフレーム）で設定することができ、可能であればブラウザーがアニメーションのもう一方を推測します。例えば、[この簡単なアニメーション](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/append/index.html b/files/ja/web/api/element/append/index.html deleted file mode 100644 index 82feaa6f91..0000000000 --- a/files/ja/web/api/element/append/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Element.append() -slug: Web/API/Element/append -tags: - - API - - DOM - - Method - - Node - - Element - - Reference -browser-compat: api.Element.append -translation_of: Web/API/Element/append -original_slug: Web/API/ParentNode/append ---- -<p>{{APIRef("DOM")}}</p> - -<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p> - -<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p> - -<ul> - <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li> - <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li> - <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li> -</ul> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js"> -append(...nodesOrDOMStrings) -</pre> - -<h3 id="Parameters">引数</h3> - -<dl> - <dt><code>nodesOrDOMStrings</code></dt> - <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> -</dl> - -<h3 id="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li> -</ul> - -<h2 id="Examples">例</h2> - -<h3 id="Appending_an_element">要素の追加</h3> - -<pre class="brush: js">let div = document.createElement("div") -let p = document.createElement("p") -div.append(p) - -console.log(div.childNodes) // NodeList [ <p> ] -</pre> - -<h3 id="Appending_text">テキストの追加</h3> - -<pre class="brush: js">let div = document.createElement("div") -div.append("Some text") - -console.log(div.textContent) // "Some text"</pre> - -<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3> - -<pre class="brush: js">let div = document.createElement("div") -let p = document.createElement("p") -div.append("Some text", p) - -console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3> - -<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> - -<pre class="brush: js">let div = document.createElement("div") - -with(div) { - append("foo") -} -// ReferenceError: append is not defined </pre> - - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Element.after()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/web/api/element/append/index.md b/files/ja/web/api/element/append/index.md new file mode 100644 index 0000000000..ffe3f44068 --- /dev/null +++ b/files/ja/web/api/element/append/index.md @@ -0,0 +1,99 @@ +--- +title: Element.append() +slug: Web/API/Element/append +tags: + - API + - DOM + - メソッド + - Node + - Element + - リファレンス +browser-compat: api.Element.append +translation_of: Web/API/Element/append +original_slug: Web/API/ParentNode/append +--- +{{APIRef("DOM")}} + +**`Element.append()`** メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを `Element` のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。 + +{{domxref("Node.appendChild()")}} との違いは次の通りです。 + +- `Element.append()` は {{domxref("DOMString")}} も追加することができますが、`Node.appendChild()` は{{domxref("Node")}} オブジェクトのみを受け付けます。 +- `Element.append()` には返値がありませんが、`Node.appendChild()` は追加された {{domxref("Node")}} オブジェクトを返します。 +- `Element.append()` は複数のノードや文字列を追加することができますが、`Node.appendChild()` はノードを 1 つだけしか追加することができせん。 + +## 構文 + +```js +append(...nodesOrDOMStrings) +``` + +### 引数 + +- `nodesOrDOMStrings` + - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。 + +### 例外 + +- `HierarchyRequestError` {{DOMxRef("DOMException")}} + - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。 + +## 例 + +### 要素の追加 + +```js +let div = document.createElement("div") +let p = document.createElement("p") +div.append(p) + +console.log(div.childNodes) // NodeList [ <p> ] +``` + +### テキストの追加 + +```js +let div = document.createElement("div") +div.append("Some text") + +console.log(div.textContent) // "Some text" +``` + +### 要素とテキストの追加 + +```js +let div = document.createElement("div") +let p = document.createElement("p") +div.append("Some text", p) + +console.log(div.childNodes) // NodeList [ #text "Some text", <p> ] +``` + +### append メソッドはスコープが効かない + +`append()` メソッドは `with` 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。 + +```js +let div = document.createElement("div") + +with(div) { + append("foo") +} +// ReferenceError: append is not defined +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.prepend()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Element.after()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("NodeList")}} diff --git a/files/ja/web/api/element/attributes/index.html b/files/ja/web/api/element/attributes/index.html deleted file mode 100644 index f3653263ef..0000000000 --- a/files/ja/web/api/element/attributes/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Element.attributes -slug: Web/API/Element/attributes -tags: - - API - - Attributes - - DOM - - Element - - Property - - プロパティ - - リファレンス - - 属性 -translation_of: Web/API/Element/attributes ---- -<p>{{ APIRef("DOM") }}</p> - -<p><strong><code>Element.attributes</code></strong> プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 <code><strong>Array</strong></code> ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 <code><strong>attributes</strong></code> はその属性に関するあらゆる情報を表す文字列のキーと値の組です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; -</pre> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="Basic_examples" name="Basic_examples">基本的な例</h3> - -<pre class="brush: js">// ドキュメント内の最初の <p> 要素を取得する -var para = document.getElementsByTagName("p")[0]; -var atts = para.attributes;</pre> - -<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">要素の属性を列挙する</h3> - -<p>ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。<br> - 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。</p> - -<pre class="brush: html"><!DOCTYPE html> - -<html> - - <head> - <title>Attributes example</title> - <script type="text/javascript"> - function listAttributes() { - var paragraph = document.getElementById("paragraph"); - var result = document.getElementById("result"); - - // まず、最初の段落(p1)がなんらかの属性を持っているか確かめよう - if (paragraph.hasAttributes()) { - var attrs = paragraph.attributes; - var output = ""; - for(var i = attrs.length - 1; i >= 0; i--) { - output += attrs[i].name + "->" + attrs[i].value; - } - result.value = output; - } else { - result.value = "No attributes to show"; - } - } - </script> - </head> - -<body> - <p id="paragraph" style="color: green;">Sample Paragraph</p> - <form action=""> - <p> - <input type="button" value="Show first attribute name and value" - onclick="listAttributes();"> - <input id="result" type="text" value=""> - </p> - </form> -</body> -</html></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-attributes', 'Element.attributes')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>{{SpecName('DOM2 Core')}} から変更無し</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>{{SpecName('DOM1')}}から変更無し</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.Element.attributes")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>返却される値のインターフェースである {{domxref("NamedNodeMap")}}</li> - <li><a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> におけるブラウザー間の互換性への配慮</li> -</ul> diff --git a/files/ja/web/api/element/attributes/index.md b/files/ja/web/api/element/attributes/index.md new file mode 100644 index 0000000000..05f85d4bf7 --- /dev/null +++ b/files/ja/web/api/element/attributes/index.md @@ -0,0 +1,90 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - Attributes + - DOM + - Element + - プロパティ + - リファレンス +browser-compat: api.Element.attributes +translation_of: Web/API/Element/attributes +--- +{{ APIRef("DOM") }} + +**`Element.attributes`** プロパティは、そのノードに登録されたすべての属性ノードの生きたコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 `Array` ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 `attributes` はその属性に関するあらゆる情報を表す文字列のキーと値の組です。 + +## 構文 + +```js +var attr = element.attributes; +``` + +## 例 + +### 基本的な例 + +```js +// 文書内の最初の <p> 要素を取得 +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes; +``` + +### 要素の属性を列挙する + +ある要素のすべての属性を走査したい場合は、数値のインデックスを使うと便利です。 +次の例では、 "paragraph" を id に持つ要素のすべての属性ノードを走査し、その属性の値を表示します。 + +```html +<!DOCTYPE html> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph = document.getElementById("paragraph"); + var result = document.getElementById("result"); + + // まず、段落に属性があるか確かめる + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output = ""; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "表示する属性はありません"; + } + } + </script> + </head> + +<body> + <p id="paragraph" style="color: green;">サンプルの段落</p> + <form action=""> + <p> + <input type="button" value="Show first attribute name and value" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 返却される値のインターフェースである {{domxref("NamedNodeMap")}} +- [quirksmode](https://www.quirksmode.org/dom/w3c_core.html#attributes) におけるブラウザー間の互換性の考慮事項 diff --git a/files/ja/web/api/element/before/index.html b/files/ja/web/api/element/before/index.html deleted file mode 100644 index 652f38c95f..0000000000 --- a/files/ja/web/api/element/before/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Element.before() -slug: Web/API/Element/before -tags: - - API - - DOM - - Method - - Node - - Reference -browser-compat: api.Element.before -translation_of: Web/API/Element/before -original_slug: Web/API/ChildNode/before ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>Element.before()</strong></code> は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この <code>Element</code> の親の子リストの中、この <code>Element</code> の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js">before(... nodes)</pre> - -<h3 id="Parameters">引数</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> -</dl> - -<h3 id="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。</li> -</ul> - -<h2 id="Examples">例</h2> - -<h3 id="Inserting_an_element">要素の挿入</h3> - -<pre class="brush: js">let container = document.createElement("div"); -let p = document.createElement("p"); -container.appendChild(p); -let span = document.createElement("span"); - -p.before(span); - -console.log(container.outerHTML); -// "<div><span></span><p></p></div>" -</pre> - -<h3 id="Inserting_text">テキストの挿入</h3> - -<pre class="brush: js">let container = document.createElement("div"); -let p = document.createElement("p"); -container.appendChild(p); - -p.before("Text"); - -console.log(container.outerHTML); -// "<div>Text<p></p></div>"</pre> - -<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3> - -<pre class="brush: js">let container = document.createElement("div"); -let p = document.createElement("p"); -container.appendChild(p); -let span = document.createElement("span"); - -p.before(span, "Text"); - -console.log(container.outerHTML); -// "<div><span></span>Text<p></p></div>"</pre> - - -<h2 id="Specification">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element.after()")}}</li> - <li>{{domxref("Element.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/web/api/element/before/index.md b/files/ja/web/api/element/before/index.md new file mode 100644 index 0000000000..2bef18e920 --- /dev/null +++ b/files/ja/web/api/element/before/index.md @@ -0,0 +1,92 @@ +--- +title: Element.before() +slug: Web/API/Element/before +tags: + - API + - DOM + - メソッド + - Node + - リファレンス +browser-compat: api.Element.before +translation_of: Web/API/Element/before +original_slug: Web/API/ChildNode/before +--- +{{APIRef("DOM")}} + +**`Element.before()`** は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この `Element` の親の子リストの中、この `Element` の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。 + +## 構文 + +```js +before(... nodes) +``` + +### 引数 + +- `nodes` + - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。 + +### 例外 + +- `HierarchyRequestError` {{DOMxRef("DOMException")}} + - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。 + +## 例 + +### 要素の挿入 + +```js +let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.before(span); + +console.log(container.outerHTML); +// "<div><span></span><p></p></div>" +``` + +### テキストの挿入 + +```js +let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); + +p.before("Text"); + +console.log(container.outerHTML); +// "<div>Text<p></p></div>" +``` + +### 要素とテキストの挿入 + +```js +let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.before(span, "Text"); + +console.log(container.outerHTML); +// "<div><span></span>Text<p></p></div>" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.after()")}} +- {{domxref("Element.append()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Node.insertBefore()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("NodeList")}} diff --git a/files/ja/web/api/element/childelementcount/index.html b/files/ja/web/api/element/childelementcount/index.html deleted file mode 100644 index c3520c9a31..0000000000 --- a/files/ja/web/api/element/childelementcount/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Element.childElementCount -slug: Web/API/Element/childElementCount -tags: - - API - - DOM - - Property - - Reference -browser-compat: api.Element.childElementCount -translation_of: Web/API/Element/childElementCount -original_slug: Web/API/ParentNode/childElementCount ---- -<div>{{ APIRef("DOM") }}</div> - -<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js">element.childElementCount;</pre> - -<h2 id="Example">例</h2> - -<pre class="brush:js">let sidebar = document.getElementById('sidebar'); -if (sidebar.childElementCount > 0) { - // 何もしない -} -</pre> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Document.childElementCount")}}</li> - <li>{{domxref("DocumentFragment.childElementCount")}}</li> -</ul> diff --git a/files/ja/web/api/element/childelementcount/index.md b/files/ja/web/api/element/childelementcount/index.md new file mode 100644 index 0000000000..1e869a7dc2 --- /dev/null +++ b/files/ja/web/api/element/childelementcount/index.md @@ -0,0 +1,43 @@ +--- +title: Element.childElementCount +slug: Web/API/Element/childElementCount +tags: + - API + - DOM + - プロパティ + - リファレンス +browser-compat: api.Element.childElementCount +translation_of: Web/API/Element/childElementCount +original_slug: Web/API/ParentNode/childElementCount +--- +{{ APIRef("DOM") }} + +**`Element.childElementCount`** は読み取り専用のプロパティで、この要素の子要素の数を返します。 + +## 構文 + +```js +element.childElementCount; +``` + +## 例 + +```js +let sidebar = document.getElementById('sidebar'); +if (sidebar.childElementCount > 0) { + // 何かを行う +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Document.childElementCount")}} +- {{domxref("DocumentFragment.childElementCount")}} diff --git a/files/ja/web/api/element/children/index.html b/files/ja/web/api/element/children/index.html deleted file mode 100644 index 5dd887af4f..0000000000 --- a/files/ja/web/api/element/children/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Element.children -slug: Web/API/Element/children -tags: - - API - - DOM - - Element - - HTMLCollection - - Property - - children -browser-compat: api.Element.children -translation_of: Web/API/Element/children -original_slug: Web/API/ParentNode/children ---- -<div>{{ APIRef("DOM") }}</div> - -<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p> - -<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js"> -// Getter -collection = myElement.children; - -// No setter; read-only property -</pre> - -<h3 id="Return_value">返値</h3> - -<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p> - -<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p> - -<h2 id="Example">例 </h2> - -<pre class="brush: js">const myElement = document.getElementById('foo'); -for (let i = 0; i < myElement.children.length; i++) { - console.log(myElement.children[i].tagName); -} -</pre> - -<h2 id="Specification">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li> - {{domxref("Node.childNodes")}} - </li> -</ul> diff --git a/files/ja/web/api/element/children/index.md b/files/ja/web/api/element/children/index.md new file mode 100644 index 0000000000..01e0dc6627 --- /dev/null +++ b/files/ja/web/api/element/children/index.md @@ -0,0 +1,55 @@ +--- +title: Element.children +slug: Web/API/Element/children +tags: + - API + - DOM + - Element + - HTMLCollection + - プロパティ + - children +browser-compat: api.Element.children +translation_of: Web/API/Element/children +original_slug: Web/API/ParentNode/children +--- +{{ APIRef("DOM") }} + +**`children`** は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。 + +`Element.children` は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。 + +## 構文 + +```js +// ゲッター +collection = myElement.children; + +// セッターはありません。読み取り専用プロパティです。 +``` + +### 返値 + +生きた {{ domxref("HTMLCollection") }} で、 `node` の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。 + +ノードが子要素を持たない場合、 `children` は要素を含まず、`length` は `0` です。 + +## 例 + +```js +const myElement = document.getElementById('foo'); +for (let i = 0; i < myElement.children.length; i++) { + console.log(myElement.children[i].tagName); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.childNodes")}} diff --git a/files/ja/web/api/element/classname/index.html b/files/ja/web/api/element/classname/index.html deleted file mode 100644 index 00f15100e7..0000000000 --- a/files/ja/web/api/element/classname/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: element.className -slug: Web/API/Element/className -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Element/className ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong>className</strong> は要素の <code>class</code> 属性の値の取得 / 設定に用います。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>cName</var> = <var>elementNodeReference</var>.className; -<var>elementNodeReference</var>.className = <var>cName</var>;</pre> -<ul> - <li><var>cName</var> : クラス名（文字列）</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">var elm = document.getElementById("div1"); //対象要素を取得 - -if (elm.className == "fixed") { - // 対象要素のクラス名が "fixed" であった場合の処理をここに記述 -}</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p>"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために <code>className</code> という名称となっています。</p> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{domxref("element.classList")}}</li> -</ul> diff --git a/files/ja/web/api/element/classname/index.md b/files/ja/web/api/element/classname/index.md new file mode 100644 index 0000000000..bbdbcc000b --- /dev/null +++ b/files/ja/web/api/element/classname/index.md @@ -0,0 +1,61 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - プロパティ + - リファレンス +browser-compat: api.Element.className +translation_of: Web/API/Element/className +--- +{{APIRef("DOM")}} + +**`className`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)の値を取得したり設定したりします。 + +## 構文 + +```js +var cName = elementNodeReference.className; +elementNodeReference.className = cName; +``` + +- `cName` は文字列変数で、現在の要素のクラスまたは空白区切りのクラス群を表します。 + +## 例 + +```js +let el = document.getElementById('item'); + +if (el.className === 'active'){ + el.className = 'inactive'; +} else { + el.className = 'active'; +} +``` + +## メモ + +このプロパティでは、 `className` という名前が `class` の代わりに使用されています。 +これは DOM を操作するために使用される多くの言語と "class" キーワードが競合するためです。 + +`className` は {{domxref("SVGAnimatedString")}} のインスタンスにも、 `element` が {{domxref("SVGElement")}} であれば存在する可能性があります。 SVG 要素を扱っている場合は、要素の `className` は {{domxref("Element.getAttribute")}} や {{domxref("Element.setAttribute")}} を使用して取得したり設定したりした方がいいでしょう。しかし、その要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)が空であった場合、 {{domxref("Element.getAttribute")}} は`""` ではなく [`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) を返すことに注意してください。 + +```js +elm.setAttribute('class', elm.getAttribute('class')) +``` + +> **Note:** `class` は **HTML 属性**であり、 `className` は **DOM プロパティ**です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("element.classList")}} diff --git a/files/ja/web/api/element/clientheight/index.html b/files/ja/web/api/element/clientheight/index.html deleted file mode 100644 index 4cde36518d..0000000000 --- a/files/ja/web/api/element/clientheight/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Element.clientHeight -slug: Web/API/Element/clientHeight -tags: - - API - - CSSOM View - - NeedsMarkupWork - - Property - - Reference -translation_of: Web/API/Element/clientHeight ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Element.clientHeight</code></strong> は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。</p> - -<p><code>clientHeight</code> は CSS <code>height</code> + CSS <code>padding</code> - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。</p> - -<p><code>clientHeight</code> がルート要素 (<code><html></code> 要素) (または文書が後方互換モードである場合は <code><body></code>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">これは <code>clientHeight</code> の特例です</a>。</p> - -<div class="note"> -<p><strong>注:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">var <var>intElemClientHeight</var> = <var>element</var>.clientHeight;</pre> - -<p><code><var>intElemClientHeight</var></code> は <code><var>element</var></code> の <code>clientHeight</code> をピクセル単位で表す整数値です。 <code>clientHeight</code> プロパティは読み取り専用です。</p> - -<h2 id="Example" name="Example">例</h2> - -<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> - -<h2 id="Specification" name="Specification">仕様書</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('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="Notes" name="Notes">注</h3> - -<p><code>clientHeight</code> は Internet Explorer オブジェクトモデルで導入されたプロパティです。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.clientHeight")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("HTMLElement.offsetHeight")}}</li> - <li>{{domxref("Element.scrollHeight")}}</li> - <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li> -</ul> diff --git a/files/ja/web/api/element/clientheight/index.md b/files/ja/web/api/element/clientheight/index.md new file mode 100644 index 0000000000..15d1cc596a --- /dev/null +++ b/files/ja/web/api/element/clientheight/index.md @@ -0,0 +1,51 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - API + - CSSOM View + - NeedsMarkupWork + - プロパティ + - リファレンス +browser-compat: api.Element.clientHeight +translation_of: Web/API/Element/clientHeight +--- +{{APIRef("DOM")}} + +**`Element.clientHeight`** は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）水平スクロールバーは含みません。 + +`clientHeight` は CSS `height` + CSS `padding` - 水平スクロールバーの高さ (もしあれば) として計算できます。 + +`clientHeight` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientHeight` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight)。 + +> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。 + +## 構文 + +```js +var intElemClientHeight = element.clientHeight; +``` + +`intElemClientHeight` は `element` の `clientHeight` をピクセル単位で表す整数値です。 `clientHeight` プロパティは読み取り専用です。 + +## 例 + + + +## 仕様書 + +{{Specifications}} + +### メモ + +`clientHeight` は Internet Explorer オブジェクトモデルで導入されたプロパティです。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLElement.offsetHeight")}} +- {{domxref("Element.scrollHeight")}} +- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) diff --git a/files/ja/web/api/element/clientleft/index.html b/files/ja/web/api/element/clientleft/index.html deleted file mode 100644 index 7a17600640..0000000000 --- a/files/ja/web/api/element/clientleft/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Element.clientLeft -slug: Web/API/Element/clientLeft -tags: -- API -- CSSOM View -- NeedsAgnostify -- NeedsMarkupWork -- Property -- Reference -browser-compat: api.Element.clientLeft -translation_of: Web/API/Element/clientLeft ---- -<div>{{ APIRef("DOM") }}</div> - -<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p> - -<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 設定項目</a>が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、<strong>垂直スクロールバーは左側に配置され</strong>、これが clientLeft の計算方法に影響します。</p> - -<div class="note"> - <p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。 - </p> -</div> - -<p style="height: 5px !important; margin: 0px;"></p> - -<div class="note"> - <p><strong>注:</strong> 要素に - <code>display: inline</code> が設定されている場合、境界の幅に関わらず <code>clientLeft</code> は <code>0</code> を返します。</p> -</div> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js">var <var>left</var> = <var>element</var>.clientLeft; -</pre> - -<h2 id="Example">例</h2> - -<div id="offsetContainer" - style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> - <div id="idDiv" - style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> - <p id="PaddingTopLabel" - style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;"> - padding-top</p> - - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis - nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> - - <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum.</p> - - <p id="PaddingBottomLabel" - style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;"> - padding-bottom</p> - </div> - <strong - style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> - <strong - style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> - <strong - style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> - <strong - style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> - <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em> -</div> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="Notes">注</h2> - -<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p> - -<p>要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> の設定に依存します</a></p> - -<p><a href="/ja/Gecko">Gecko</a> ベースのアプリケーションは、 <code>clientLeft</code> を Gecko 1.9 (<a href="/ja/Firefox_3">Firefox 3</a>、 {{ - Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。</p> diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md new file mode 100644 index 0000000000..0f7ccf8fb9 --- /dev/null +++ b/files/ja/web/api/element/clientleft/index.md @@ -0,0 +1,73 @@ +--- +title: Element.clientLeft +slug: Web/API/Element/clientLeft +tags: + - API + - CSSOM View + - NeedsAgnostify + - NeedsMarkupWork + - プロパティ + - リファレンス +browser-compat: api.Element.clientLeft +translation_of: Web/API/Element/clientLeft +--- +{{ APIRef("DOM") }} + +要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 `clientLeft` は、左マージンまたは左パディングを含みません。 `clientLeft` は読み取り専用です。 + +> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。 + +> **Note:** 要素に `display: inline` が設定されている場合、境界の幅に関わらず `clientLeft` は `0` を返します。 + +## 構文 + +```js +var left = element.clientLeft; +``` + +## 例 + +次の例では、クライアント領域の背景が白で、 `border-left` が 24px の黒になっています。 `clientLeft` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。 + +### HTML + +```html +<div id="container"> + <div id="contained"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + </div> +</div> +``` + +### CSS + +```css + +#container { + margin: 3rem; + background-color: rgb(255, 255, 204); + border: 4px dashed black; +} + +#contained { + margin: 1rem; + border-left: 24px black solid; + padding: 0px 28px; + overflow: auto; + background-color: white; +} +``` + +### 結果 + +{{EmbedLiveSample("Example", 400, 350)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/clienttop/index.html b/files/ja/web/api/element/clienttop/index.html deleted file mode 100644 index 95ae5ad2b3..0000000000 --- a/files/ja/web/api/element/clienttop/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: element.clientTop -slug: Web/API/Element/clientTop -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Element/clientTop ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。<code>clientTop</code> は読込専用です。</p> -<p><a href="/ja/docs/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a>、{{Bug("111207")}} で実装) から <code>clientTop</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>top</var> = <var>element</var>.clientTop; -</pre> -<h2 id="Example" name="Example">例</h2> -<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> - <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> - <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> - <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> - <p><span style="float: right;"><img height="69" src="https://mdn.mozillademos.org/files/143/BirmanCat.jpg" width="129"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> - <p>Cat image and text coming from <a href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> - <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> - </div> - <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{mediawiki.external('if IE')}}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{mediawiki.external('endif')}}</span></div> -<p style="margin-top: 270px;"><img height="302" src="https://mdn.mozillademos.org/files/263/clientTop.png" width="548"></p> -<h2 id="Specification" name="Specification">仕様</h2> -<p>W3C の仕様の一部ではありません。</p> -<h2 id="Notes" name="Notes">注記</h2> -<p><code>clientTop</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p> -<h2 id="References" name="References">リファレンス</h2> -<ul> - <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a>（<a href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientTop.asp">日本語版</a>）</li> - <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li> -</ul> diff --git a/files/ja/web/api/element/clienttop/index.md b/files/ja/web/api/element/clienttop/index.md new file mode 100644 index 0000000000..1438ca59a4 --- /dev/null +++ b/files/ja/web/api/element/clienttop/index.md @@ -0,0 +1,77 @@ +--- +title: Element.clientTop +slug: Web/API/Element/clientTop +tags: + - API + - CSSOM View + - NeedsAgnostify + - NeedsMarkupWork + - プロパティ + - リファレンス +browser-compat: api.Element.clientTop +translation_of: Web/API/Element/clientTop +--- +{{ APIRef("DOM") }} + +要素の上境界の幅をピクセル数で表します。これは要素の読み取り専用で整数型のプロパティです。 + +たまたま、 2 つの位置（`offsetTop` とクライアント領域の上端）の間にあるのは、要素の境界だけです。これは、 `offsetTop` が（マージンではなく）境界の上端の位置を示し、クライアント領域は境界の直下から始まるからです（クライアント領域はパディングを含みます）。したがって、 **clientTop** 値は常に "border-top-width" に対する `.getComputedStyle()` 値の整数部分と一致します。（実際には Math.round(parseFloat()) かもしれません。）例えば、計算された "border-top-width" が 0 の場合、 **`clientTop`** も 0 になります。 + +> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。 + +## 構文 + +```js +var top = element.clientTop; +``` + +## 例 + +次の例では、クライアント領域の背景が白で、 `border-top` が 24px の黒になっています。 `clientTop` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。 + +### HTML + +```html +<div id="container"> + <div id="contained"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + </div> +</div> +``` + +### CSS + +```css + +#container { + margin: 3rem; + background-color: rgb(255, 255, 204); + border: 4px dashed black; +} + +#contained { + margin: 1rem; + border-top: 24px black solid; + padding: 0px 28px; + overflow: auto; + background-color: white; +} +``` + +### 結果 + +{{EmbedLiveSample("Example", 400, 350)}} + +## メモ + +`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/clientwidth/index.html b/files/ja/web/api/element/clientwidth/index.html deleted file mode 100644 index 47753e0077..0000000000 --- a/files/ja/web/api/element/clientwidth/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Element.clientWidth -slug: Web/API/Element/clientWidth -tags: - - API - - CSSOM View - - Property - - Reference - - プロパティ -translation_of: Web/API/Element/clientWidth ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>Element.clientWidth</strong></code> プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。</p> - -<p><code>clientWidth</code> がルート要素 (<code><html></code> 要素) (または文書が後方互換モードである場合は <code><body></code>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">これは <code>clientWidth</code></a> の特例です。</p> - -<div class="note"> -<p><strong>メモ:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre> - -<p><code><var>intElemClientWidth</var></code> は <code><var>element</var></code> の <code>clientWidth</code> をピクセル数で表す整数値です。 <code>clientWidth</code> プロパティは読み取り専用です。</p> - -<h2 id="Example" name="Example">例</h2> - -<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> - -<h2 id="Specification" name="Specification">仕様書</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('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="Notes" name="Notes">メモ</h3> - -<p><code>clientWidth</code> は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.clientWidth")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("HTMLElement.offsetWidth")}}</li> - <li>{{domxref("Element.scrollWidth")}}</li> - <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li> -</ul> diff --git a/files/ja/web/api/element/clientwidth/index.md b/files/ja/web/api/element/clientwidth/index.md new file mode 100644 index 0000000000..af5d5481ca --- /dev/null +++ b/files/ja/web/api/element/clientwidth/index.md @@ -0,0 +1,49 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - API + - CSSOM View + - NeedsMarkupWork + - リファレンス + - プロパティ +browser-compat: api.Element.clientWidth +translation_of: Web/API/Element/clientWidth +--- +{{APIRef("DOM")}} + +**`Element.clientWidth`** プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）垂直スクロールバーは含みません。 + +`clientWidth` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientWidth` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth)。 + +> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。 + +## 構文 + +```js +var intElemClientWidth = element.clientWidth; +``` + +`intElemClientWidth` は `element` の `clientWidth` をピクセル数で表す整数値です。 `clientWidth` プロパティは読み取り専用です。 + +## 例 + + + +## 仕様書 + +{{Specifications}} + +## メモ + +`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLElement.offsetWidth")}} +- {{domxref("Element.scrollWidth")}} +- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) diff --git a/files/ja/web/api/element/closest/index.html b/files/ja/web/api/element/closest/index.html deleted file mode 100644 index dd876b80aa..0000000000 --- a/files/ja/web/api/element/closest/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Element.closest() -slug: Web/API/Element/closest -tags: - - API - - DOM - - Element - - Method - - Reference - - メソッド -translation_of: Web/API/Element/closest ---- -<div>{{APIRef('DOM')}}</div> - -<div><code><strong>closest()</strong></code> メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 <code>null</code> を返します。 - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<ul> - <li><code><var>selectors</var></code> は {{domxref("DOMString")}} で、セレクターのリストを指定します。<br> - 例: <code>p:hover, .toto + q</code></li> -</ul> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<ul> - <li><code><var>closestElement</var></code> は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 <code>null</code> になることがあります。</li> -</ul> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li><code><var>selectors</var></code> が妥当なセレクターリストの文字列ではない場合、 {{exception("SyntaxError")}} が投げられます。</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><article> - <div id="div-01">Here is div-01 - <div id="div-02">Here is div-02 - <div id="div-03">Here is div-03</div> - </div> - </div> -</article></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var el = document.getElementById('div-03'); - -var r1 = el.closest("#div-02"); -// id=div-02 である要素を返す - -var r2 = el.closest("div div"); -// div の中にある div である直近の祖先、ここでは div-03 自身を返す - -var r3 = el.closest("article > div"); -// 親に article を持つ div である直近の祖先、ここでは div-01 を返す - -var r4 = el.closest(":not(div)"); -// div ではない直近の祖先、ここではもっとも外側の article を返す</pre> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p><code>Element.closest()</code> に対応していないブラウザーで、 <code>element.matches()</code> (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。</p> - -<pre class="brush: js">if (!Element.prototype.matches) { - Element.prototype.matches = Element.prototype.msMatchesSelector || - Element.prototype.webkitMatchesSelector; -} - -if (!Element.prototype.closest) { - Element.prototype.closest = function(s) { - var el = this; - - do { - if (Element.prototype.matches.call(el, s)) return el; - el = el.parentElement || el.parentNode; - } while (el !== null && el.nodeType === 1); - return null; - }; -}</pre> - -<p>しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。</p> - -<pre class="brush: js">if (window.Element && !Element.prototype.closest) { - Element.prototype.closest = - function(s) { - var matches = (this.document || this.ownerDocument).querySelectorAll(s), - i, - el = this; - do { - i = matches.length; - while (--i >= 0 && matches.item(i) !== el) {}; - } while ((i < 0) && (el = el.parentElement)); - return el; - }; -} -</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-closest', 'Element.closest()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("api.Element.closest")}}</p> - -<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3> - -<ul> - <li>Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 <code>document.createElement(tagName).closest(tagName)</code> が <code>null</code> を返します。</li> -</ul> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element")}} インターフェイス</li> - <li> - <div class="syntaxbox"><a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクターの構文</a></div> - </li> - <li> - <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div> - </li> -</ul> -</div> diff --git a/files/ja/web/api/element/closest/index.md b/files/ja/web/api/element/closest/index.md new file mode 100644 index 0000000000..5cb1ccccda --- /dev/null +++ b/files/ja/web/api/element/closest/index.md @@ -0,0 +1,127 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - CSS セレクター + - DOM + - Element + - メソッド + - リファレンス + - セレクター +browser-compat: api.Element.closest +translation_of: Web/API/Element/closest +--- +{{APIRef('DOM')}} + +**`closest()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素 ({{domxref("Element")}}) とその親階層に（文書ルートに向かって）、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 `null` を返します。 + +## 構文 + +```js +var closestElement = targetElement.closest(selectors); +``` + +### 引数 + +- `selectors` は {{domxref("DOMString")}} で、セレクターのリストを指定します。 + 例: `p:hover, .toto + q` + +### 返値 + +- `closestElement` は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 `null` になることがあります。 + +### 例外 + +- {{exception("SyntaxError")}} は `selectors` が妥当なセレクターリストの文字列ではない場合に発生します。 + +## 例 + +### HTML + +```html +<article> + <div id="div-01">Here is div-01 + <div id="div-02">Here is div-02 + <div id="div-03">Here is div-03</div> + </div> + </div> +</article> +``` + +### JavaScript + +```js +var el = document.getElementById('div-03'); + +var r1 = el.closest("#div-02"); +// id=div-02 である要素を返す + +var r2 = el.closest("div div"); +// div の中にある div である直近の祖先、ここでは div-03 自身を返す + +var r3 = el.closest("article > div"); +// 親に article を持つ div である直近の祖先、ここでは div-01 を返す + +var r4 = el.closest(":not(div)"); +// div ではない直近の祖先、ここではもっとも外側の article を返す +``` + +## ポリフィル + +`Element.closest()` に対応していないブラウザーで、 `element.matches()` (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。 + +```js +if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; +} + +if (!Element.prototype.closest) { + Element.prototype.closest = function(s) { + var el = this; + + do { + if (Element.prototype.matches.call(el, s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; +} +``` + +しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。 + +```js +if (window.Element && !Element.prototype.closest) { + Element.prototype.closest = function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i, + el = this; + do { + i = matches.length; + while (--i >= 0 && matches.item(i) !== el) {}; + } while ((i < 0) && (el = el.parentElement)); + return el; + }; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +### 互換性のメモ + +- Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 `document.createElement(tagName).closest(tagName)` が `null` を返します。 + +## 関連情報 + +- {{domxref("Element")}} インターフェイス +- [セレクターの構文](/ja/docs/Learn/CSS/Building_blocks/Selectors) +- セレクターを取る他のメソッド: {{domxref("element.querySelector()")}} および {{domxref("element.matches()")}} diff --git a/files/ja/web/api/element/computedstylemap/index.md b/files/ja/web/api/element/computedstylemap/index.md new file mode 100644 index 0000000000..17acec435f --- /dev/null +++ b/files/ja/web/api/element/computedstylemap/index.md @@ -0,0 +1,94 @@ +--- +title: Element.computedStyleMap() +slug: Web/API/Element/computedStyleMap +tags: + - API + - CSS Typed Object Model API + - Element + - 実験的 + - Houdini + - メソッド + - リファレンス + - StylePropertyMapReadOnly + - computedStyleMap() +browser-compat: api.Element.computedStyleMap +translation_of: Web/API/Element/computedStyleMap +--- +{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}} + +**`computedStyleMap()`** は {{domxref("Element")}} インターフェイスのメソッドであり、 {{domxref("StylePropertyMapReadOnly")}} インターフェイスで {{domxref("CSSStyleDeclaration")}} の代替となる CSS 宣言ブロックの読み取り専用の表現を提供します。 + +## 構文 + +```js +var stylePropertyMapReadOnly = element.computedStyleMap() +``` + +### 引数 + +なし。 + +### 返値 + +{{domxref("StylePropertyMapReadOnly")}} インターフェイスです。 + +## 例 + +まず、簡単な HTML から始めましょう。リンクのある段落と、すべての CSS プロパティと値の組を追加する定義リストです。 + +```html +<p> + <a href="https://example.com">Link</a> +</p> +<dl id="regurgitation"></dl> +``` + +いくらか CSS を追加します。 + +```css +a { + --color: red; + color: var(--color); +} +``` + +JavaScript を追加してリンクを取得し、 `computedStyleMap()` を使用してすべての CSS プロパティ値の定義リストを返します。 + +```js +// 要素を取得 +const myElement = document.querySelector('a'); + +// 入力する <dl> を取得 +const stylesList = document.querySelector('#regurgitation'); + +// すべての計算済みスタイルを computedStyleMap() で受け取る +const allComputedStyles = myElement.computedStyleMap(); + +// すべてのプロパティと値のマップを反復処理し、それぞれに <dt> と <dd> を追加します。 +for (const [prop, val] of allComputedStyles) { + // プロパティ + const cssProperty = document.createElement('dt'); + cssProperty.appendChild(document.createTextNode(prop)); + stylesList.appendChild(cssProperty); + + // 値 + const cssValue = document.createElement('dd'); + cssValue.appendChild(document.createTextNode(val)); + stylesList.appendChild(cssValue); +} +``` + +[`computedStyleMap()` に対応しているブラウザー](#ブラウザーの互換性)では、すべての CSS プロパティと値のリストが表示されます。 +他のブラウザーでは、リンクが表示されるだけです。 + +{{EmbedLiveSample("Examples", 300, 300)}} + +リンクが持つ既定の CSS プロパティがいくつもあることに気づきましたか？ '`a`' を '`p`' に更新すると、`margin-top` と `margin-bottom` の既定の計算値の違いに気が付くでしょう。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/createshadowroot/index.md b/files/ja/web/api/element/createshadowroot/index.md new file mode 100644 index 0000000000..a18ac75a8e --- /dev/null +++ b/files/ja/web/api/element/createshadowroot/index.md @@ -0,0 +1,41 @@ +--- +title: Element.createShadowRoot() +slug: Web/API/Element/createShadowRoot +tags: + - API + - Deprecated + - Element + - メソッド + - 標準外 + - リファレンス + - シャドウ DOM +browser-compat: api.Element.createShadowRoot +translation_of: Web/API/Element/createShadowRoot +--- +{{APIRef('Shadow DOM')}}{{non-standard_header}}{{deprecated_header}} + +`Element.createShadowRoot` は[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のインスタンスを作成するために使用し案す。シャドウ DOM が作成されると、常に既存の要素に割り当てられます。シャドウ DOM が作成された後、それが割り当てられている要素を{{glossary("shadow root", "シャドウルート")}}と呼びます。 + +> **Note:** このメソッドは非推奨となり、 {{DOMxRef("Element.attachShadow()","attachShadow()")}} に置き換えられました。 + +## 構文 + +```js +var shadowroot = element.createShadowRoot(); +``` + +### 引数 + +引数はありません。 + +### 返値 + +{{DOMxRef("ShadowRoot")}} を返します。 + +## 仕様書 + +この機能は仕様書で定義されなくなりました。 + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/error_event/index.html b/files/ja/web/api/element/error_event/index.html index c5e0ddc136..b058a7a822 100644 --- a/files/ja/web/api/element/error_event/index.html +++ b/files/ja/web/api/element/error_event/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/Element/error_event </tbody> </table> -<p>イベントオブジェ久は、ユーザーインターフェイス要素から生成された場合は {{domxref("UIEvent")}} のインスタンスとなり、それ以外の場合は {{domxref("Event")}} となります。</p> +<p>イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は {{domxref("UIEvent")}} のインスタンスとなり、それ以外の場合は {{domxref("Event")}} となります。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/api/element/firstelementchild/index.md b/files/ja/web/api/element/firstelementchild/index.md new file mode 100644 index 0000000000..a1a1182594 --- /dev/null +++ b/files/ja/web/api/element/firstelementchild/index.md @@ -0,0 +1,55 @@ +--- +title: Element.firstElementChild +slug: Web/API/Element/firstElementChild +tags: + - API + - DOM + - Element + - プロパティ +browser-compat: api.Element.firstElementChild +translation_of: Web/API/Element/firstElementChild +--- +{{ APIRef("DOM") }} + +**`Element.firstElementChild`** は読み取り専用のプロパティで、要素の最初の子を {{domxref("Element")}} で返します。子要素がない場合は `null` を返します。 + +`Element.firstElementChild` は要素ノードのみを含みます。 +テキストやコメントノードなど、要素以外のノードを含むすべての子ノードを取得するには、 {{domxref("Node.firstChild")}} を使用してください。 + +## 構文 + +```js +// ゲッター +element = el.firstElementChild; + +// セッターなし。読み取り専用プロパティ +``` + +## 例 + +```html +<ul id="list"> + <li>First (1)</li> + <li>Second (2)</li> + <li>Third (3)</li> +</ul> + +<script> +const list = document.getElementById('list'); +console.log(list.firstElementChild.textContent); +// logs "First (1)" +</script> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.nextElementSibling")}} +- {{domxref("Element.lastElementChild")}} diff --git a/files/ja/web/api/element/getanimations/index.md b/files/ja/web/api/element/getanimations/index.md new file mode 100644 index 0000000000..2ab0b9efe4 --- /dev/null +++ b/files/ja/web/api/element/getanimations/index.md @@ -0,0 +1,73 @@ +--- +title: Element.getAnimations() +slug: Web/API/Element/getAnimations +tags: + - API + - Animatable + - CSS + - CSS アニメーション + - CSS トランジション + - Element + - 実験的 + - メソッド + - リファレンス + - トランジション + - ウェブアニメーション + - getAnimations + - waapi + - web animations api +browser-compat: api.Element.getAnimations +translation_of: Web/API/Element/getAnimations +--- +{{ SeeCompatTable() }}{{APIRef("Web Animations")}} + +`getAnimations()` は {{domxref("Element")}} インターフェイスのメソッドで（`Animatable` ミックスインで指定されており）、この要素に影響を与える、あるいは将来的に影響を与える予定のすべての {{domxref("Animation")}} オブジェクトの配列を返します。オプションとして、子孫要素の {{domxref("Animation")}} オブジェクトも返すことができます。 + +> **Note:** この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)、[CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)、[ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API)が含まれます。 + +## 構文 + +```js +const animations = Element.getAnimations(options); +``` + +### 引数 + +- `options {{optional_inline}}` + + - : 以下のプロパティを含むオプションオブジェクトです。 + + - `subtree` + - : 論理値で、`true` の場合、 _Element_ の子孫をターゲットとしたアニメーションも返すようになります。これは、 _Element_ やその子孫に付けられた CSS [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)をターゲットとするアニメーションを含みます。既定値は `false` です。 + +### 返値 + +{{domxref("Animation")}} オブジェクトの配列 ({{jsxref("Array")}}) で、それぞれが +このメソッドが呼び出された {{domxref("Element")}}、または `{ subtree: true }` が指定されている場合は、その子孫の要素の 1 つを現在ターゲットにしているアニメーションです。 + +## 例 + +以下のコードでは、 `elem` とその子孫のすべてのアニメーションが終了するのを待ってから、文書からその要素を削除します。 + +```js +Promise.all( + elem.getAnimations({ subtree: true }) + .map(animation => animation.finished) +).then(() => elem.remove()); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API) +- [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations) +- [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions) +- {{domxref("Document.getAnimations()")}} - 文書内のすべてのアニメーションを読み取る +- {{domxref("Animation")}} diff --git a/files/ja/web/api/element/getattribute/index.html b/files/ja/web/api/element/getattribute/index.html deleted file mode 100644 index 4ee84122ba..0000000000 --- a/files/ja/web/api/element/getattribute/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Element.getAttribute() -slug: Web/API/Element/getAttribute -tags: - - API - - DOM - - Element - - Method - - Reference - - メソッド -translation_of: Web/API/Element/getAttribute ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><strong><code>getAttribute()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、要素の指定された属性の値を返します。</span>指定された属性が存在しない場合、値は <code>null</code> か <code>""</code> (空文字列) のどちらかになります。詳しくは<a href="#Non-existing_attributes">属性が存在しない場合</a>を参照してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">let <var>attribute</var> = <var>element</var>.getAttribute(<var>attributeName</var>); -</pre> - -<p>ここで、</p> - -<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> - -<pre class="brush:js">const div1 = document.getElementById('div1'); -const align = div1.getAttribute('align'); - -alert(align); // id="div1" の要素の align の値を表示します。</pre> - -<h2 id="Description" name="Description">解説</h2> - -<h3 id="Lower_casing" name="Lower_casing">小文字化</h3> - -<p>HTML 文書である DOM の HTML 要素に対して呼び出すと、 <code>getAttribute()</code> は処理前に引数を小文字化します。</p> - -<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> - -<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'); -// 空文字列が返される -</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> diff --git a/files/ja/web/api/element/getattribute/index.md b/files/ja/web/api/element/getattribute/index.md new file mode 100644 index 0000000000..af0ef01437 --- /dev/null +++ b/files/ja/web/api/element/getattribute/index.md @@ -0,0 +1,78 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Element + - メソッド + - リファレンス +browser-compat: api.Element.getAttribute +translation_of: Web/API/Element/getAttribute +--- +{{APIRef("DOM")}} + +**`getAttribute()`** は {{domxref("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 仕様書の草稿](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'); +// 空文字列が返される +``` + +コンテンツ属性のノンスをるには、代わりに {{domxref("HTMLElement/nonce", "nonce")}} プロパティを使用してください。 + +```js +let nonce = script.nonce; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/getattributenames/index.html b/files/ja/web/api/element/getattributenames/index.html deleted file mode 100644 index f353b84b74..0000000000 --- a/files/ja/web/api/element/getattributenames/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Element.getAttributeNames() -slug: Web/API/Element/getAttributeNames -tags: - - API - - DOM - - Element - - getAttributeNames - - メソッド - - 属性 -translation_of: Web/API/Element/getAttributeNames ---- -<div>{{APIRef("DOM")}}</div> - -<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> - -<pre class="syntaxbox notranslate"><em>let attributeNames</em> = element.getAttributeNames(); -</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js notranslate">// 要素の属性に対して反復処理する -for(let name of element.getAttributeNames()) { - let value = element.getAttribute(name); - console.log(name, value); -} -</pre> - -<h2 id="Polyfill" name="Polyfill">代替モジュール</h2> - -<pre class="brush:js notranslate">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++) { - 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> diff --git a/files/ja/web/api/element/getattributenames/index.md b/files/ja/web/api/element/getattributenames/index.md new file mode 100644 index 0000000000..7aa98aca5b --- /dev/null +++ b/files/ja/web/api/element/getattributenames/index.md @@ -0,0 +1,86 @@ +--- +title: Element.getAttributeNames() +slug: Web/API/Element/getAttributeNames +tags: + - API + - 属性 + - DOM + - Element + - メソッド + - getAttributeNames +browser-compat: api.Element.getAttributeNames +translation_of: Web/API/Element/getAttributeNames +--- +{{APIRef("DOM")}} + +**`getAttributeNames()`** は {{domxref("Element")}} インターフェースのメソッドで、この要素の属性名を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。 + +`getAttributeNames()` を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。 + +**`getAttributeNames()`** から返される名前は*修飾*属性名です。すなわち、名前空間接頭辞がついた属性であり、名前空間接頭辞（実際の名前空間では*ない*）にコロンが続き、属性名が続きます（例えば **`xlink:href`**）。名前空間接頭辞のない属性は、そのままの名前になります（例えば **`href`**）。 + +## 構文 + +```js +let attributeNames = element.getAttributeNames(); +``` + +## 例 + +以下の例は、次の方法を示しています。 + +- 名前空間接頭辞のある属性については、 `getAttributeNames()` は属性名と一緒に名前空間接頭辞を返します。 +- 名前空間接頭辞のない属性については、 `getAttributeNames()` は属性名のみをそのまま返します。 + +以下のことを理解することが重要です。 + +1. DOM には名前空間に所属していても、名前空間接頭辞がない場合があります。 +2. 名前空間に所属しているが、名前空間接頭辞のない DOM 内の属性については、 `getAttributeNames()` は属性名だけを返し、その属性が名前空間に所属していることを示しません。 + +以下の例では、このような「名前空間に所属しているが、名前空間接頭辞がない」場合を示しています。 + +```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); +} + +// 出力結果: +// href https://example.com +// xlink:href https://example.com +// show new +``` + +## ポリフィル + +```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++) { + result[i] = attributes[i].name; + } + return result; + }; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/getattributenode/index.html b/files/ja/web/api/element/getattributenode/index.html deleted file mode 100644 index 4d28b69f39..0000000000 --- a/files/ja/web/api/element/getattributenode/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Element.getAttributeNode() -slug: Web/API/Element/getAttributeNode -tags: - - API - - DOM - - Element - - Method - - Reference -translation_of: Web/API/Element/getAttributeNode ---- -<div>{{ APIRef("DOM") }}</div> - -<p>指定された要素の指定された属性を、 <code>Attr</code> ノードとして返します。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="eval"><em>var attrNode</em> = <em>element</em>.getAttributeNode(<em>attrName</em>); -</pre> - -<ul> - <li><code>attrNode</code> は指定の属性に対する <code>Attr</code> ノードです。</li> - <li><code>attrName</code> は属性の名前を表す文字列です。</li> -</ul> - -<h2 id="Example">Example</h2> - -<pre class="brush: js">// html: <div id="top" /> -let t = document.getElementById("top"); -let idAttr = t.getAttributeNode("id"); -alert(idAttr.value == "top") -</pre> - -<h2 id="Notes">注</h2> - -<p>HTML 文書としてフラグが立てられた DOM 内の HTML 要素に対して呼び出された場合、<code>getAttributeNode</code> は処理前に引数を小文字にします。</p> - -<p><code>Attr</code> ノードは <code>Node</code> を継承していますが、文書ツリーの一部と考えることはできません。一般の <code>Node</code> 属性、例えば <a href="/ja/docs/Web/API/Node/parentNode">parentNode</a>、 <a href="/ja/docs/Web/API/Node/previousSibling">previousSibling</a>、<a href="/ja/docs/Web/API/Node/nextSibling">nextSibling</a> などは <code>Attr</code> ノードでは <code>null</code> になります。しかしながら、 <code>ownerElement</code> プロパティではこの属性が属している要素を取得することができます。</p> - -<p>要素の属性の値を取得するためには、通常 <code>getAttributeNode</code> の代わりに <a href="/ja/docs/Web/API/Element/getAttribute">getAttribute</a> を使用してください。</p> - -<p>{{ DOMAttributeMethods() }}</p> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-element-getattributenode','getAttributeNode()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.getAttributeNode")}}</p> diff --git a/files/ja/web/api/element/getattributenode/index.md b/files/ja/web/api/element/getattributenode/index.md new file mode 100644 index 0000000000..c8e31861fd --- /dev/null +++ b/files/ja/web/api/element/getattributenode/index.md @@ -0,0 +1,51 @@ +--- +title: Element.getAttributeNode() +slug: Web/API/Element/getAttributeNode +tags: + - API + - DOM + - Element + - メソッド + - リファレンス +browser-compat: api.Element.getAttributeNode +translation_of: Web/API/Element/getAttributeNode +--- +{{ APIRef("DOM") }} + +この要素の指定された属性を、 `Attr` ノードとして返します。 + +## 構文 + +```js +var attrNode = element.getAttributeNode(attrName); +``` + +- `attrNode` は指定の属性に対する `Attr` ノードです。 +- `attrName` は属性の名前を表す文字列です。 + +## 例 + +```js +// html: <div id="top" /> +let t = document.getElementById("top"); +let idAttr = t.getAttributeNode("id"); +alert(idAttr.value == "top") +``` + +## メモ + +HTML 文書としてフラグが立てられた DOM 内の HTML 要素に対して呼び出された場合、`getAttributeNode` は処理前に引数を小文字にします。 + +`Attr` ノードは `Node` を継承していますが、文書ツリーの一部と考えることはできません。一般の `Node` 属性、例えば [parentNode](/ja/docs/Web/API/Node/parentNode)、 [previousSibling](/ja/docs/Web/API/Node/previousSibling)、[nextSibling](/ja/docs/Web/API/Node/nextSibling) などは `Attr` ノードでは `null` になります。しかしながら、 `ownerElement` プロパティではこの属性が属している要素を取得することができます。 + +要素の属性の値を取得するためには、通常 `getAttributeNode` の代わりに [getAttribute](/ja/docs/Web/API/Element/getAttribute) が使用されます。 + +{{ DOMAttributeMethods() }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/getattributens/index.html b/files/ja/web/api/element/getattributens/index.html deleted file mode 100644 index ee03de1cab..0000000000 --- a/files/ja/web/api/element/getattributens/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: element.getAttributeNS -slug: Web/API/Element/getAttributeNS -tags: - - DOM - - Gecko - - 翻訳中 -translation_of: Web/API/Element/getAttributeNS ---- -<p>{{ ApiRef("DOM") }}</p> - -<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> - -<p><code>getAttributeNS</code> は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は <code>null</code> または <code>""</code>(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。</p> - -<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> - -<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>) -</pre> - -<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3> - -<ul> - <li><code><em>attrVal</em> </code> は指定の属性の文字列値です。</li> - <li><code><em>namespace</em> </code> は指定の属性の名前空間です。</li> - <li><code><em>name</em> </code> は指定の属性の名前です。</li> -</ul> - -<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> - -<pre class="eval">var div1 = document.getElementById("div1"); -var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/", - "special-align"); -alert(a); // div の align 属性の値を表示します。 -</pre> - -<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> - -<p><code>getAttributeNS</code> は <a href="/ja/DOM/element.getAttribute">getAttribute</a> と異なります。<code>getAttributeNS</code> は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。</p> - -<p>DOM4 より前の仕様では、このメソッドは属性が存在しない場合に <code>null</code> ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは <code>null</code> を返していました。DOM4 以降は、仕様でも <code>null</code> を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら <code>getAttributeNS</code> を呼ぶ前に <a href="/ja/docs/Web/API/Element/hasAttributeNS"><code>hasAttributeNS</code></a> を使用して属性の存在を確かめる必要があります。</p> - -<p>{{ DOMAttributeMethods() }}</p> - -<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p> diff --git a/files/ja/web/api/element/getattributens/index.md b/files/ja/web/api/element/getattributens/index.md new file mode 100644 index 0000000000..7ec8113595 --- /dev/null +++ b/files/ja/web/api/element/getattributens/index.md @@ -0,0 +1,100 @@ +--- +title: Element.getAttributeNS() +slug: Web/API/Element/getAttributeNS +tags: + - API + - DOM + - Element + - メソッド + - リファレンス +browser-compat: api.Element.getAttributeNS +translation_of: Web/API/Element/getAttributeNS +--- +{{APIRef("DOM")}} + +**`getAttributeNS()`** は {{domxref("Element")}} インターフェイスのメソッドで、指定された名前空間と名前を持つ属性の文字列値を返します。のような名前の属性が存在しない場合は、 `null` または `""` （空文字列のどちらかを返します。詳しくは{{Anch("メモ")}}を参照してください。 + +## 構文 + +```js +attrVal = element.getAttributeNS(namespace, name) +``` + +### 引数 + +- `namespace` + - : 指定された属性を探す名前空間です。 +- `name` + - : 探す属性の名前です。 + +### 返値 + +指定された属性の文字列値です。その属性が存在しない場合、結果は `null` になります。 + +> **Note:** 古いバージョンの DOM 仕様書では、このメソッドが存在しない属性に対しては空文字列を返すと説明していました。しかし、 null の方が分かりやすいので、そのような実装はあまり行われませんでした。 DOM4 仕様書ではこのメソッドは存在しない属性に対して null を返すと書くようになりました。 + +## 例 + +以下の SVG 文書は独自の名前空間にある `foo` 属性の値を読み取ります。 + +```xml +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:test="http://www.example.com/2014/test" width="40" height="40"> + + <circle id="target" cx="12" cy="12" r="10" stroke="#444" + stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/> + + <script type="text/javascript"> + var ns = 'http://www.example.com/2014/test'; + var circle = document.getElementById( 'target' ); + + console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' ); + </script> +</svg> +``` + +HTML5 文書では名前空間に対応していないため、この属性は `test:foo` でアクセスする必要があります。 + +```html +<!DOCTYPE html> +<html> +<body> + +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:test="http://www.example.com/2014/test" width="40" height="40"> + <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" + fill="none" test:foo="Foo value"/> +</svg> + +<script type="text/javascript"> + var ns = 'http://www.example.com/2014/test'; + var circle = document.getElementById( 'target' ); + console.log('Attribute value: ' + circle.getAttribute('test:foo')); +</script> + +</body> +</html> +``` + +## メモ + +名前空間は XML 文書でのみ対応しています。 HTML5 文書では、代わりに `getAttribute()` を使用する必要があります。 + +`getAttributeNS()` は {{domxref("element.getAttribute()", + "getAttribute()")}} とは異なり、特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は Mozilla の架空の "specialspace" 名前空間に属しています。 + +DOM4 より前の仕様では、このメソッドは属性が存在しない場合に null ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブブラウザーは null を返していました。 DOM4 以降は、仕様でも null を返すように指定されました。しかし、一部の古いウェブブラウザーは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら、 `getAttributeNS` を呼ぶ前に {{domxref("element.hasAttributeNS()", "hasAttributeNS()")}} を使用して属性の存在を確かめる必要があります。 + +{{DOMAttributeMethods}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [コードスニペット:getAttributeNS](/ja/docs/Mozilla/Add-ons/Code_snippets/getAttributeNS) diff --git a/files/ja/web/api/element/getboundingclientrect/index.html b/files/ja/web/api/element/getboundingclientrect/index.html deleted file mode 100644 index 69c2b2500a..0000000000 --- a/files/ja/web/api/element/getboundingclientrect/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Element.getBoundingClientRect() -slug: Web/API/Element/getBoundingClientRect -tags: - - API - - Boundary - - Bounding - - Bounds - - CSSOM View - - Client - - Containing - - DOM - - Element - - Enclosing - - Method - - Minimum - - Rectangle - - Reference - - Smallest - - clientHeight - - getBoundingClientRect - - getClientRects - - offsetHeight - - scrollHeight - - メソッド -translation_of: Web/API/Element/getBoundingClientRect ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>Element.getBoundingClientRect()</strong></code> メソッドは、要素の寸法と、そのビューポートに対する位置を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> の各プロパティを持つ、要素全体を含む最小の矩形です。 <code>width</code> と <code>height</code> 以外のプロパティは、<strong>"<em>ビューポート</em></strong><em>の左上を基準</em>"としています。</p> - -<p style="display: block;"><img alt="DOMRect 値の説明" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p> - -<p>空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 <code>width</code> と <code>height</code> が 0 で、 <code>top</code> と <code>left</code> は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。</p> - -<p>境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) が変更されることを意味しています。</p> - -<p>もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する <code>top</code> と <code>left</code> プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。</p> - -<h3 id="Cross-browser_fallback" name="Cross-browser_fallback">クロスブラウザーの代替</h3> - -<p>高いクロスブラウザーの互換性を必要とするスクリプトでは、 <code>window.scrollX</code> と <code>window.scrollY</code> の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。</p> - -<pre class="brush: js notranslate">// For scrollX -(((t = document.documentElement) || (t = document.body.parentNode)) - && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft -// For scrollY -(((t = document.documentElement) || (t = document.body.parentNode)) - && typeof t.scrollTop == 'number' ? t : document.body).scrollTop -</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: js notranslate">// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト -var rect = obj.getBoundingClientRect(); -</pre> - -<h2 id="Specification" name="Specification">仕様書</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("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h3 id="Notes" name="Notes">メモ</h3> - -<p>モダンブラウザーでは返された <code>DOMRect</code> オブジェクトを変更することが可能ですが、これは <code>DOMRectReadOnly</code> を返す古いバージョンには該当しません。IE と Edge では、返された <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"> <code>ClientRect</code></a> オブジェクトに対し、見過ごされたプロパティを追加することができず、<code>x</code> と <code>y</code> を補填することができません。</p> - -<p>互換性問題 (下記参照) のため、 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> のみに頼ることが最も安全です。</p> - -<p>返された <code>DOMRect</code> オブジェクトのプロパティは、自身のプロパティではありません。<code>in</code> 演算子や <code>for...in</code> では返されたプロパティを見つけますが、他の <code>Object.keys()</code> のような API では失敗します。さらに予期しないことに、 <code>Object.assign()</code> のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。</p> - -<pre class="brush: js notranslate">rect = elt.getBoundingClientRect() -// emptyObj の結果は {} -emptyObj = Object.assign({}, rect) -emptyObj = { ...rect } -{width, ...emptyObj} = rect -</pre> - -<p><code>DOMRect</code> の <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</code> の各プロパティは他のプロパティ値から計算されます。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.getBoundingClientRect")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li> - <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> - <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li> -</ul> diff --git a/files/ja/web/api/element/getboundingclientrect/index.md b/files/ja/web/api/element/getboundingclientrect/index.md new file mode 100644 index 0000000000..ce2316632b --- /dev/null +++ b/files/ja/web/api/element/getboundingclientrect/index.md @@ -0,0 +1,179 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - 境界 + - Bounding + - Bounds + - CSSOM View + - Client + - Containing + - DOM + - Element + - Enclosing + - メソッド + - Minimum + - 長方形 + - リファレンス + - Smallest + - clientHeight + - getBoundingClientRect + - getClientRects + - offsetHeight + - scrollHeight +browser-compat: api.Element.getBoundingClientRect +translation_of: Web/API/Element/getBoundingClientRect +--- +{{APIRef("DOM")}} + +**`Element.getBoundingClientRect()`** メソッドは、要素の寸法と、その[ビューポート](/ja/docs/Glossary/Viewport)に対する相対位置に関する情報を返します。 + +## 構文 + +```js +domRect = element.getBoundingClientRect(); +``` + +### 値 + +返値は {{domxref("DOMRect")}} オブジェクトで、（パディングと境界の幅を含む）要素全体が収まる最小の長方形です。`left`, `top`, `right`, `bottom`, `x`, `y`, `width`, `height` の各プロパティは、長方形の全体の位置と大きさをピクセル数で記述します。 `width` と `height` 以外のプロパティは、ビューポートの左上を基準としています。 + + + +このメソッドが返す {{domxref("DOMRect")}} オブジェクトの `width` と `height` プロパティは、内容物の幅や高さだけでなく、 `padding` と `border-width` も含まれます。標準的なボックスモデルでは、これは要素の `width` または `height` プロパティ + `padding` + `border-width` と同じになります。しかし、もし [`box-sizing: border-box`](/ja/docs/Web/CSS/box-sizing) が要素に設定されていれば、これは `width` または `height` と等しくなります。 + +返される値は、その要素に対して {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の和、つまり、その要素に関連する CSS の border-box と見なすことができます。 + +空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 `width` と `height` が 0 で、 `top` と `left` は、要素に対する（コンテンツ順での）最初の CSS ボックスの左上である矩形を返します。 + +境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に（その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界の辺 (`top`, `right`, `bottom`, `left`) が変更されることを意味しています。 + +もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する `top` と `left` プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。 + +### ブラウザー間で互換性のある代替手段 + +高いブラウザー間の互換性を必要とするスクリプトでは、 `window.scrollX` と `window.scrollY` の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。 + +```js +// For scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft +// For scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollTop == 'number' ? t : document.body).scrollTop +``` + +## 例 + +### 基本 + +この単純な例では、単純な `<div>` 要素のクライアント矩形を表す `DOMRect` オブジェクトを取得し、その下にプロパティを出力しています。 + +```html +<div></div> +``` + +```css +div { + width: 400px; + height: 200px; + padding: 20px; + margin: 50px auto; + background: purple; +} +``` + +```js +let elem = document.querySelector('div'); +let rect = elem.getBoundingClientRect(); +for (var key in rect) { + if(typeof rect[key] !== 'function') { + let para = document.createElement('p'); + para.textContent = `${ key } : ${ rect[key] }`; + document.body.appendChild(para); + } +} +``` + +{{EmbedLiveSample('Basic', '100%', 640)}} + +なお、 `width`/`height` は `width`/`height` + `padding` と等しくなります。 + +また、`x`/`left`, `y`/`top`, `right`, `bottom` の値は、それぞれのケースで、ビューポートの関連する辺から要素のその側までの絶対的な距離に等しいことに注意してください。 + +#### スクロール + +この例では、文書がスクロールされたときに、クライアント矩形の境界がどのように変化するかを示しています。 + +```html +<div id="example"></div> +<div id="controls"></div> +``` + +```css +div#example { + width: 400px; + height: 200px; + padding: 20px; + margin: 50px auto; + background: purple; +} + +body { padding-bottom: 1000px; } +p { margin: 0; } +``` + +```js +function update() { + const container = document.getElementById("controls"); + const elem = document.getElementById("example"); + const rect = elem.getBoundingClientRect(); + + container.innerHTML = ''; + for (let key in rect) { + if(typeof rect[key] !== 'function') { + let para = document.createElement('p'); + para.textContent = `${ key } : ${ rect[key] }`; + container.appendChild(para); + } + } +} + +document.addEventListener('scroll', update); +update(); +``` + +{{EmbedLiveSample('Scrolling', '100%', 640)}} + +## 仕様書 + +{{Specifications}} + +### メモ + +最近のブラウザーでは返された `DOMRect` オブジェクトを変更することが可能ですが、これは `DOMRectReadOnly` を返す古いバージョンには該当しません。IE と Edge では、返された [`ClientRect`](<https://msdn.microsoft.com/library/hh826029(VS.85).aspx>) オブジェクトに対し、見過ごされたプロパティを追加することができず、`x` と `y` を補填することができません。 + +互換性問題 (下記参照) のため、 `left`, `top`, `right`, `bottom` のみに頼ることが最も安全です。 + +返された `DOMRect` オブジェクトのプロパティは、自身のプロパティではありません。`in` 演算子や `for...in` では返されたプロパティを見つけますが、他の `Object.keys()` のような API では失敗します。さらに予期しないことに、 `Object.assign()` のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。 + +```js +rect = elt.getBoundingClientRect() +// emptyObj の結果は {} +emptyObj = Object.assign({}, rect) +emptyObj = { ...rect } +{width, ...emptyObj} = rect +``` + +`DOMRect` の `top`, `left`, `right`, `bottom` の各プロパティは他のプロパティ値から計算されます。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.getClientRects", "getClientRects()")}} +- [MSDN: `getBoundingClientRect`](<https://msdn.microsoft.com/library/ms536433(VS.85).aspx>) +- [MSDN: `ClientRect`](<https://msdn.microsoft.com/library/hh826029(VS.85).aspx>)、初期バージョンの `DOMRect` diff --git a/files/ja/web/api/element/getclientrects/index.html b/files/ja/web/api/element/getclientrects/index.html deleted file mode 100644 index f8276ed1cb..0000000000 --- a/files/ja/web/api/element/getclientrects/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Element.getClientRects() -slug: Web/API/Element/getClientRects -tags: - - API - - CSSOM View - - Element - - Method - - Reference - - clientHeight - - getBoundingClientRect - - getClientRects - - offsetHeight - - scrollHeight -translation_of: Web/API/Element/getClientRects ---- -<p>{{APIRef("DOM")}}</p> - -<p><strong><code>getClientRects()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの <a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 境界ボックス</a>の境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。</p> - -<p>多くの要素はそれぞれ1つの境界ボックスしか持ちませんが、複数行の<a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a> (例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合) には行ごとに囲む境界ボックスがあります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">let <var>rectCollection</var> = <var>object</var>.getClientRects();</pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の <code><svg></code> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <code><svg></code> が確立したビューポートになります (明確にするために、矩形は外部の <code><svg></code> の <code>viewBox</code> 変形によっても変換されます)。</p> - -<p>本来、Microsoft はこのメソッドがテキストの各行に対して <code>TextRectangle</code> オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この二つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。</p> - -<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で <code>width</code> と <code>height</code> の各プロパティが <code>TextRectangle</code> オブジェクトに追加されました。")}}</p> - -<p>矩形を計算する際には、ビューポート領域 (またはその他のスクロール可能な要素) のスクロール量が考慮されます。</p> - -<p>返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。</p> - -<p>HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 <code>display:none</code> の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。</p> - -<p>CSS ボックスで境界ボックスが空であっても矩形が返されます。 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各座標はなお意味を持っています。</p> - - - -<p>小数のピクセルオフセットが可能です。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 <code>withClientRectsOverlay</code> クラスを介してマークアップに接続されていることに注意してください。</p> - -<h3 id="HTML">HTML</h3> - -<p>例 1: このHTMLは、 <code><span></code> 要素を含む3つの段落を生成し、それぞれを <code><div></code> ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの <code><span></code> 要素には、クライアントの矩形が描画されます。</p> - -<pre class="brush: html notranslate"><h3>A paragraph with a span inside</h3> -<p>Both the span and the paragraph have a border set. The - client rects are in red. Note that the p has onlyone border - box, while the span has multiple border boxes.</p> - -<div> - <strong>Original</strong> - <p> - <span>Paragraph that spans multiple lines</span> - </p> -</div> - -<div> - <strong>p's rect</strong> - <p class="withClientRectsOverlay"> - <span>Paragraph that spans multiple lines</span> - </p> -</div> - -<div> - <strong>span's rect</strong> - <p> - <span class="withClientRectsOverlay">Paragraph that spans multiple lines</span> - </p> -</div></pre> - -<p>例 2: このHTMLは3つの順序付きリストを生成します。2 番目のブロックの <code><ol></code> と 3 番目のブロックの各 <code><li></code> 要素に対してクライアントの矩形が描かれています。</p> - -<pre class="brush: html notranslate"><h3>A list</h3> -<p>Note that the border box doesn't include the number, so - neither do the client rects.</p> - -<div> - <strong>Original</strong> - <ol> - <li>Item 1</li> - <li>Item 2</li> - </ol> -</div> - -<div> - <strong>ol's rect</strong> - <ol class="withClientRectsOverlay"> - <li>Item 1</li> - <li>Item 2</li> - </ol> -</div> - -<div> - <strong>each li's rect</strong> - <ol> - <li class="withClientRectsOverlay">Item 1</li> - <li class="withClientRectsOverlay">Item 2</li> - </ol> -</div></pre> - -<p>例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの <code><table></code> で描画されます。</p> - -<pre class="brush: html notranslate"><h3>A table with a caption</h3> -<p>Although the table's border box doesn't include the - caption, the client rects do include the caption.</p> - -<div> - <strong>Original</strong> - <table> - <caption>caption</caption> - <thead> - <tr><th>thead</th></tr> - </thead> - <tbody> - <tr><td>tbody</td></tr> - </tbody> - </table> -</div> - -<div> - <strong>table's rect</strong> - <table class="withClientRectsOverlay"> - <caption>caption</caption> - <thead> - <tr><th>thead</th></tr> - </thead> - <tbody> - <tr><td>tbody</td></tr> - </tbody> - </table> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<p>CSS は、最初の例では各 <code><div></code> ブロック内の段落と <code><span></code> の周りに、2番目の例では <code><ol></code> と <code><li></code> の周りに、3番目の例では <code><table></code>, <code><th></code>, <code><td></code> の各要素の周りに境界線を描画します。</p> - -<pre class="brush: css notranslate">strong { - text-align: center; -} -div { - display: inline-block; - width: 150px; -} -div p, ol, table { - border: 1px solid blue; -} -span, li, th, td { - border: 1px solid green; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>JavaScriptコードは、 CSS のクラス <code>withClientRectsOverlay</code> が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。</p> - -<pre class="brush: js notranslate">function addClientRectsOverlay(elt) { - /* Absolutely position a div over each client rect so that its border width - is the same as the rectangle's width. - Note: the overlays will be out of place if the user resizes or zooms. */ - var rects = elt.getClientRects(); - for (var i = 0; i != rects.length; i++) { - var rect = rects[i]; - var tableRectDiv = document.createElement('div'); - tableRectDiv.style.position = 'absolute'; - tableRectDiv.style.border = '1px solid red'; - var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; - tableRectDiv.style.margin = tableRectDiv.style.padding = '0'; - tableRectDiv.style.top = (rect.top + scrollTop) + 'px'; - tableRectDiv.style.left = (rect.left + scrollLeft) + 'px'; - // We want rect.width to be the border width, so content width is 2px less. - tableRectDiv.style.width = (rect.width - 2) + 'px'; - tableRectDiv.style.height = (rect.height - 2) + 'px'; - document.body.appendChild(tableRectDiv); - } -} - -(function() { - /* Call function addClientRectsOverlay(elt) for all elements with - assigned class "withClientRectsOverlay" */ - var elt = document.getElementsByClassName('withClientRectsOverlay'); - for (var i = 0; i < elt.length; i++) { - addClientRectsOverlay(elt[i]); - } -})();</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Examples', 680, 650)}}</p> - -<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("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h3 id="Notes" name="Notes">補足</h3> - -<p><code>getClientRects()</code> は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.getClientRects")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li> -</ul> diff --git a/files/ja/web/api/element/getclientrects/index.md b/files/ja/web/api/element/getclientrects/index.md new file mode 100644 index 0000000000..2a1c0f613a --- /dev/null +++ b/files/ja/web/api/element/getclientrects/index.md @@ -0,0 +1,225 @@ +--- +title: Element.getClientRects() +slug: Web/API/Element/getClientRects +tags: + - API + - CSSOM View + - Element + - メソッド + - リファレンス + - clientHeight + - getBoundingClientRect + - getClientRects + - offsetHeight + - scrollHeight +browser-compat: api.Element.getClientRects +translation_of: Web/API/Element/getClientRects +--- +{{APIRef("DOM")}} + +**`getClientRects()`** は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの [CSS 境界ボックス](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)の境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。 + +多くの要素はそれぞれ 1 つの境界ボックスしか持ちませんが、複数行の[インライン要素](/ja/docs/Web/HTML/Inline_elements) （例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合）には行ごとに囲む境界ボックスがあります。 + +## 構文 + +```js +let rectCollection = object.getClientRects(); +``` + +### 返値 + +返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の `left`, `top`, `right`, `bottom` の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の `<svg>` 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の `<svg>` が確立したビューポートになります（明確にするために、矩形は外部の `<svg>` の `viewBox` 変形によっても変換されます）。 + +本来、Microsoft はこのメソッドがテキストの各行に対して `TextRectangle` オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この 2 つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。 + +{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で <code>width</code> と <code>height</code> の各プロパティが <code>TextRectangle</code> オブジェクトに追加されました。")}} + +矩形を計算する際には、ビューポート領域（またはその他のスクロール可能な要素）のスクロール量が考慮されます。 + +返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。 + +HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 `display:none` の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。 + +CSS ボックスで境界ボックスが空であっても矩形が返されます。 `left`, `top`, `right`, `bottom` の各座標はなお意味を持っています。 + +小数のピクセルオフセットが可能です。 + +## 例 + +これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 `withClientRectsOverlay` クラスを介してマークアップに接続されていることに注意してください。 + +### HTML + +例 1: このHTMLは、 `<span>` 要素を含む3つの段落を生成し、それぞれを `<div>` ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの `<span>` 要素には、クライアントの矩形が描画されます。 + +```html +<h3>A paragraph with a span inside</h3> +<p>Both the span and the paragraph have a border set. The + client rects are in red. Note that the p has only one border + box, while the span has multiple border boxes.</p> + +<div> + <strong>Original</strong> + <p> + <span>Paragraph that spans multiple lines</span> + </p> +</div> + +<div> + <strong>p's rect</strong> + <p class="withClientRectsOverlay"> + <span>Paragraph that spans multiple lines</span> + </p> +</div> + +<div> + <strong>span's rect</strong> + <p> + <span class="withClientRectsOverlay">Paragraph that spans multiple lines</span> + </p> +</div> +``` + +例 2: この HTML は 3 つの順序付きリストを生成します。2 番目のブロックの `<ol>` と 3 番目のブロックの各 `<li>` 要素に対してクライアントの矩形が描かれています。 + +```html +<h3>A list</h3> +<p>Note that the border box doesn't include the number, so + neither do the client rects.</p> + +<div> + <strong>Original</strong> + <ol> + - Item 1</li> + - Item 2</li> + </ol> +</div> + +<div> + <strong>ol's rect</strong> + <ol class="withClientRectsOverlay"> + - Item 1</li> + - Item 2</li> + </ol> +</div> + +<div> + <strong>each li's rect</strong> + <ol> + <li class="withClientRectsOverlay">Item 1</li> + <li class="withClientRectsOverlay">Item 2</li> + </ol> +</div> +``` + +例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの `<table>` で描画されます。 + +```html +<h3>A table with a caption</h3> +<p>Although the table's border box doesn't include the + caption, the client rects do include the caption.</p> + +<div> + <strong>Original</strong> + <table> + <caption>caption</caption> + <thead> + <tr><th>thead</th></tr> + </thead> + <tbody> + <tr><td>tbody</td></tr> + </tbody> + </table> +</div> + +<div> + <strong>table's rect</strong> + <table class="withClientRectsOverlay"> + <caption>caption</caption> + <thead> + <tr><th>thead</th></tr> + </thead> + <tbody> + <tr><td>tbody</td></tr> + </tbody> + </table> +</div> +``` + +### CSS + +CSS は、最初の例では各 `<div>` ブロック内の段落と `<span>` の周りに、2番目の例では `<ol>` と `<li>` の周りに、3番目の例では `<table>`, `<th>`, `<td>` の各要素の周りに境界線を描画します。 + +```css +strong { + text-align: center; +} +div { + display: inline-block; + width: 150px; +} +div p, ol, table { + border: 1px solid blue; +} +span, li, th, td { + border: 1px solid green; +} +``` + +### JavaScript + +JavaScriptコードは、 CSS のクラス `withClientRectsOverlay` が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。 + +```js +function addClientRectsOverlay(elt) { + /* Absolutely position a div over each client rect so that its border width + is the same as the rectangle's width. + Note: the overlays will be out of place if the user resizes or zooms. */ + var rects = elt.getClientRects(); + for (var i = 0; i != rects.length; i++) { + var rect = rects[i]; + var tableRectDiv = document.createElement('div'); + tableRectDiv.style.position = 'absolute'; + tableRectDiv.style.border = '1px solid red'; + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; + tableRectDiv.style.margin = tableRectDiv.style.padding = '0'; + tableRectDiv.style.top = (rect.top + scrollTop) + 'px'; + tableRectDiv.style.left = (rect.left + scrollLeft) + 'px'; + // We want rect.width to be the border width, so content width is 2px less. + tableRectDiv.style.width = (rect.width - 2) + 'px'; + tableRectDiv.style.height = (rect.height - 2) + 'px'; + document.body.appendChild(tableRectDiv); + } +} + +(function() { + /* Call function addClientRectsOverlay(elt) for all elements with + assigned class "withClientRectsOverlay" */ + var elt = document.getElementsByClassName('withClientRectsOverlay'); + for (var i = 0; i < elt.length; i++) { + addClientRectsOverlay(elt[i]); + } +})(); +``` + +### 結果 + +{{EmbedLiveSample('Examples', 680, 650)}} + +## 仕様書 + +{{Specifications}} + +### メモ + +`getClientRects()` は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef("Element.getBoundingClientRect()")}} diff --git a/files/ja/web/api/element/getelementsbyclassname/index.html b/files/ja/web/api/element/getelementsbyclassname/index.html deleted file mode 100644 index c20756a14b..0000000000 --- a/files/ja/web/api/element/getelementsbyclassname/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Element.getElementsByClassName() -slug: Web/API/Element/getElementsByClassName -tags: - - API - - Classes - - Element - - Method - - Reference - - getElementsByClassName -translation_of: Web/API/Element/getElementsByClassName ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary">{{domxref("Element")}} の <strong><code>getElementsByClassName()</code></strong> メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 </span></p> - -<p>{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>names</code></dt> - <dd>マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p><code>names</code> で指定したすべてのクラスを持つすべての要素のリストである <em>live</em> な {{ domxref("HTMLCollection") }} です。</p> - -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> - -<p>この関数が返すコレクションは常に <em>live</em> です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で <code>names</code> にマッチする新しい要素が追加されたり、サブツリー上にある <code>names</code> にマッチしなかった要素が <code>names</code> にマッチするよう変更された場合、すぐにこのコレクションに追加されます。</p> - -<p>逆もしかりです。<code>names</code> にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。</p> - -<div class="note"> -<p>クラス名は<a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">後方互換モード</a>では大文字・小文字を区別されず、それ以外では区別されます。</p> -</div> - -<h2 id="Syntax" name="Syntax">例</h2> - -<h3 id="Matching_a_single_class" name="Matching_a_single_class">単一のクラスとマッチさせる</h3> - -<p>単一の指定されたクラスを含む要素を探すには、 <code>getElementsByClassName()</code> を呼び出す際にそのクラス名を指定するだけです。</p> - -<pre class="brush: js notranslate">element.getElementsByClassName('test');</pre> - -<p>この例は <code>main</code> の <code>id</code> を持つ要素の子孫の中で、<code>test</code> クラスをもつ全要素を見つけます。</p> - -<pre class="brush: js notranslate">document.getElementById('main').getElementsByClassName('test');</pre> - -<h3 id="Matching_multiple_classes" name="Matching_multiple_classes">複数のクラスとマッチさせる</h3> - -<p><code>red</code> と <code>test</code> 両方のクラスを含んだ要素を見つけます。</p> - -<pre class="brush: js notranslate">element.getElementsByClassName('red test');</pre> - -<h3 id="Examining_the_results" name="Examining_the_results">結果を調査する</h3> - -<p>標準の配列構文や、<code>HTMLCollection</code> の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、<strong><u>次の例はうまく動作しないでしょう</u></strong>。<code>colorbox</code> クラスを外した際に、<code>matches</code> がすぐに変更されてしまうからです。</p> - -<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox'); - -for (var i=0; i<matches.length; i++) { - matches[i].classList.remove('colorbox'); - matches.item(i).classList.add('hueframe'); -} -</pre> - -<p>別の手段を使いましょう。例えば、</p> - -<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox'); - -while (matches.length > 0) { - matches.item(0).classList.add('hueframe'); - matches[0].classList.remove('colorbox'); -}</pre> - -<p>このコードは、<code>"colorbox"</code> クラスを持つ子孫要素を見つけ、<code>item(0)</code>を呼び出して <code>"hueframe"</code> クラスを追加し、（配列表記で） <code>"colorbox"</code> を削除します。その後、（もし残っていれば）別の要素が <code>item(0)</code> になります。</p> - -<h3 id="Filtering_the_results_using_array_methods" name="Filtering_the_results_using_array_methods">Arrayメソッドで結果を抽出する</h3> - -<p>このメソッドの戻り値を <code>this</code> 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で <code>Array</code> メソッドを使うことができます。次の例では <code>test</code> クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。</p> - -<pre class="brush: js notranslate">var testElements = document.getElementsByClassName('test'); -var testDivs = Array.prototype.filter.call(testElements, function(testElement){ - return testElement.nodeName === 'DIV'; -});</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.getElementsByClassName")}}</p> diff --git a/files/ja/web/api/element/getelementsbyclassname/index.md b/files/ja/web/api/element/getelementsbyclassname/index.md new file mode 100644 index 0000000000..1b69097ee3 --- /dev/null +++ b/files/ja/web/api/element/getelementsbyclassname/index.md @@ -0,0 +1,110 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +tags: + - API + - クラス + - Element + - メソッド + - リファレンス + - getElementsByClassName +browser-compat: api.Element.getElementsByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +{{APIRef("DOM")}} + +{{domxref("Element")}} の **`getElementsByClassName()`** メソッドは、引数で与えられたクラス名を含むすべての子要素を、生きた {{domxref("HTMLCollection")}} で返します。 + +{{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、 {{domxref("Document")}} 全体に働きます。特定された文書ルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。 + +## 構文 + +```js +var elements = element.getElementsByClassName(names); +``` + +### 引数 + +- `names` + - : 一致させる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。 + +### 返値 + +{{domxref("HTMLCollection")}} で、 `names` で指定したすべてのクラスを持つすべての要素のライブで更新されるリストです。 + +## 使用上の注意 + +この関数が返すコレクションは常に*生きています*。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で `names` に一致する新しい要素が追加された場合は、直ちにこのコレクションに追加されます。同様に、サブツリー上にある `names` に一致しなかった要素が一致するよう変更された場合も、すぐにこのコレクションに現れます。 + +逆もしかりです。 `names` に一致しなくなったりツリーから外された要素は、すぐにコレクションから除外されます。 + +> **Note:** クラス名は[後方互換モード](/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)では大文字・小文字が区別されず、それ以外では区別されます。 + +## 例 + +### 単一のクラスと一致させる + +単一の指定されたクラスを含む要素を探すには、 `getElementsByClassName()` を呼び出す際にそのクラス名を指定するだけです。 + +```js +element.getElementsByClassName('test'); +``` + +この例は `main` の `id` を持つ要素の子孫の中で、`test` クラスをもつ全要素を見つけます。 + +```js +document.getElementById('main').getElementsByClassName('test'); +``` + +### 複数のクラスと一致させる + +`red` と `test` 両方のクラスを含んだ要素を見つけます。 + +```js +element.getElementsByClassName('red test'); +``` + +### 結果を調査する + +標準の配列構文や、`HTMLCollection` の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、次の例はうまく動作しないでしょう。`colorbox` クラスを外した際に、`matches` がすぐに変更されてしまうからです。 + +```js +var matches = element.getElementsByClassName('colorbox'); + +for (var i=0; i<matches.length; i++) { + matches[i].classList.remove('colorbox'); + matches.item(i).classList.add('hueframe'); +} +``` + +別の手段を使いましょう。例えば、 + +```js +var matches = element.getElementsByClassName('colorbox'); + +while (matches.length > 0) { + matches.item(0).classList.add('hueframe'); + matches[0].classList.remove('colorbox'); +} +``` + +このコードは、`"colorbox"` クラスを持つ子孫要素を見つけ、`item(0)`を呼び出して `"hueframe"` クラスを追加し、（配列記法で） `"colorbox"` を削除します。その後、（もし残っていれば）別の要素が `item(0)` になります。 + +### Array メソッドで結果を抽出する + +このメソッドの戻り値を `this` 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で `Array` メソッドを使うことができます。次の例では `test` クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。 + +```js +var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement) { + return testElement.nodeName === 'DIV'; +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/getelementsbytagname/index.html b/files/ja/web/api/element/getelementsbytagname/index.html deleted file mode 100644 index 248bf36639..0000000000 --- a/files/ja/web/api/element/getelementsbytagname/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: element.getElementsByTagName -slug: Web/API/Element/getElementsByTagName -tags: - - DOM - - Gecko -translation_of: Web/API/Element/getElementsByTagName ---- -<p>{{ ApiRef() }}</p> - -<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> - -<p>指定された <a href="/ja/DOM/element.tagName">タグ名</a> による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。</p> - -<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> - -<pre class="eval"><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>) -</pre> - -<ul> - <li><code>elements</code> は見つかった要素の「生」の <code>NodeList</code> で、サブツリー内に出現した順番になります。</li> - <li><code>element</code> は検索を開始する要素です。この要素の子孫要素のみが検索に含まれ、この要素自体は検索対象とならないことに注意してください。</li> - <li><code>tagName</code> は検索条件とするタグ名です。特別な文字列 <code>"*"</code> はすべての要素を表します。</li> -</ul> - -<div class="note"> -<p>Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。</p> - -<p>複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。</p> -</div> - -<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> - -<pre class="brush: js">// テーブル内のセルの数だけ反復処理します -var table = document.getElementById("forecast-table"); -var cells = table.getElementsByTagName("td"); -for (var i = 0; i < cells.length; i++) { - status = cells[i].getAttribute("status"); - if ( status == "open") { - // データを取得します - } -} -</pre> - -<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3> - -<p><code>element.getElementsByTagName</code> は、検索対象が指定された要素の子孫要素に限られるという点を除けば、<a href="/ja/DOM/document.getElementsByTagName">document.getElementsByTagName</a> と似ています。</p> - -<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D">DOM Level 2 Core: Element.getElementsByTagName </a></p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}</p> diff --git a/files/ja/web/api/element/getelementsbytagname/index.md b/files/ja/web/api/element/getelementsbytagname/index.md new file mode 100644 index 0000000000..5164678956 --- /dev/null +++ b/files/ja/web/api/element/getelementsbytagname/index.md @@ -0,0 +1,54 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - Element + - メソッド + - リファレンス +browser-compat: api.Element.getElementsByTagName +translation_of: Web/API/Element/getElementsByTagName +--- +{{ APIRef("DOM") }} + +**`Element.getElementsByTagName()`** メソッドは、生きた {{domxref("HTMLCollection")}} で指定された[タグ名](/ja/docs/Web/API/Element/tagName)を持つ要素を返します。 + +この要素のすべての子孫が検索されますが、要素そのものは検索されません。返されるリストは*生きており*、 DOM ツリーとともに自動的に更新されます。したがって、同じ要素と引数で `Element.getElementsByTagName()` を繰り返し呼び出す必要はなく、呼び出しの間に DOM が変化しても大丈夫です。 + +HTML 文書内の HTML 要素に対して呼び出された場合、 `getElementsByTagName` は引数を小文字に変換してから検索を行います。これは、HTML 文書内のキャメルケースの SVG 要素（例えば [`<linearGradient>`](/ja/docs/Web/SVG/Element/linearGradient)）と照合しようとする場合には望ましくありません。代わりに、 {{ domxref("Element.getElementsByTagNameNS()") }} を使ってください。この場合、タグ名の大文字と小文字は区別されます。 + +`Element.getElementsByTagName` は {{domxref("Document.getElementsByTagName()")}} に似ていますが、指定した要素の子孫の要素のみを検索する点が異なります。 + +## 構文 + +```js +elements = element.getElementsByTagName(tagName) +``` + +- `elements` は*生きた* {{domxref("HTMLCollection")}} で、タグ名が一致する要素が出現順で入ります。要素が見つかアなかった場合は `HTMLCollection` は空になります。 +- `element` は検索を始める要素です。この要素の子孫のみが含まれ、この要素自身は含まれません。 +- `tagName` は検索する修飾名です。特別な文字列 `"*"` はすべての要素を表します。 XHTML との互換性のため、小文字を使用してください。 + +## 例 + +```js +// テーブル内のセルの数だけ反復処理します +const table = document.getElementById('forecast-table'); +const cells = table.getElementsByTagName('td'); + +for (let cell of cells) { + let status = cell.getAttribute('data-status'); + if (status === 'open') { + // データを取得 + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/getelementsbytagnamens/index.html b/files/ja/web/api/element/getelementsbytagnamens/index.html deleted file mode 100644 index f0344fd357..0000000000 --- a/files/ja/web/api/element/getelementsbytagnamens/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: element.getElementsByTagNameNS -slug: Web/API/Element/getElementsByTagNameNS -tags: - - DOM - - Gecko -translation_of: Web/API/Element/getElementsByTagNameNS ---- -<p>{{ ApiRef() }}</p> - -<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> - -<p>与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。</p> - -<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> - -<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>) -</pre> - -<ul> - <li><code>elements</code> は見付かった要素のツリーに出現した順に生きた <code>NodeList</code> です。</li> - <li><code>element</code> は検索を始める要素です。この要素の子孫のみが検索対象になり、そのノード自身は対象になりません。</li> - <li><code>namespaceURI</code> は検索される要素の名前空間 URI です(<code><a href="/ja/DOM/element.namespaceURI">element.namespaceURI</a></code> を参照)。例えば、XHTML 要素を検索する必要があるなら、XHTML の名前空間 URI <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code> を使ってください。</li> - <li><code>localName</code> は探す要素のローカル名か全ての要素にマッチする特別な値 <code>"*"</code> のどちらかです(<code><a href="/ja/DOM/element.localName">element.localName</a></code> 参照)。</li> -</ul> - -<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> - -<pre class="brush: js">// XHTML 文書の table の多くのセルの配列をチェック。 -var table = document.getElementById("forecast-table"); -var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td"); -for (var i = 0; i < cells.length; i++) { - axis = cells[i].getAttribute("axis"); - if ( axis == "year") { - // データを取得 - } -} -</pre> - -<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">注意</h3> - -<p><code>element.getElementsByTagNameNS</code> は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。</p> - -<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}</p> diff --git a/files/ja/web/api/element/getelementsbytagnamens/index.md b/files/ja/web/api/element/getelementsbytagnamens/index.md new file mode 100644 index 0000000000..982a51bb6b --- /dev/null +++ b/files/ja/web/api/element/getelementsbytagnamens/index.md @@ -0,0 +1,49 @@ +--- +title: Element.getElementsByTagNameNS() +slug: Web/API/Element/getElementsByTagNameNS +tags: + - API + - DOM + - Element + - メソッド + - リファレンス +browser-compat: api.Element.getElementsByTagNameNS +translation_of: Web/API/Element/getElementsByTagNameNS +--- +{{APIRef("DOM")}} + +**`Element.getElementsByTagNameNS()`** メソッドは、指定された名前空間に属する、指定されたタグ名を持つ要素の {{domxref("HTMLCollection")}} をライブで返します。これは {{Domxref("Document.getElementsByTagNameNS")}} に似ていますが、検索対象が指定された要素の子孫に限定される点が異なります。 + +## 構文 + +```js +elements = element.getElementsByTagNameNS(namespaceURI, localName) +``` + +- `elements` は生きた {{domxref("HTMLCollection")}} で、ツリー内で見つかった要素を出現順に保持します。 +- `element` は検索を開始する要素です。なお、この要素の子孫は含まれますが、このノード自体は含まれません。 +- `namespaceURI` は検索する要素の名前空間 URI です（{{domxref("Element.namespaceURI")}} および {{domxref("Attr.namespaceURI")}} を参照してください）。例えば、 XHTML 要素を検索する場合は、 XHTML の名前空間 URI である `http://www.w3.org/1999/xhtml` を使用してください。 +- `localName` は検索する要素のローカル名、またはすべての要素に一致する特殊な値 `"*"` です（{{domxref("Element.localName")}} および {{domxref("Attr.localName")}} を参照）。 + +## 例 + +```js +// XHTML 文書の table の多くのセルの配列をチェック。 +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td"); + +for (var i = 0; i < cells.length; i++) { + var axis = cells[i].getAttribute("axis"); + if (axis == "year") { + // データを取得 + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/id/index.html b/files/ja/web/api/element/id/index.html deleted file mode 100644 index 46cf1c1a9e..0000000000 --- a/files/ja/web/api/element/id/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: element.id -slug: Web/API/Element/id -tags: - - DOM - - Gecko -translation_of: Web/API/Element/id ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>要素の 識別子 (identifier) を取得 / 設定します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>idStr</var> =<em>element</em>.id; // 取得 -<em>element</em>.id = <var>idStr</var>; // 設定 -</pre> - -<h2 id="Notes" name="Notes">注意</h2> - -<p>ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 <code>id</code> の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。</p> - -<p>document によっては(特に <a href="/ja/docs/Web/HTML">HTML</a> 、 <a href="/ja/docs/XUL">XUL</a> 、<a href="/ja/docs/SVG">SVG</a>)、要素の <code>id</code> は次のような要素の属性として指定することができます: <code><div id="part_3"></code>.</p> - -<p>但しカスタム XML 文書に於いては、<code>id</code> 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『<a href="http://blog.bitflux.ch/wiki/GetElementById_Pitfalls">getElementById Pitfalls (getElementById の落とし穴)</a>』をご覧下さい。</p> - -<p><code>id</code> 属性は、<a href="/ja/docs/CSS">スタイルシート</a>でスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した <code>id</code> 属性値の先頭に <code>#</code> を付けます。</p> - -<pre class="brush:css">#thisID { - background: darkblue; - color; ghostwhite; -}</pre> - -<p><code>id</code> 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "<code>thisID</code>" と "<code>ThisID</code>" は別の <code>id</code> として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : <a href="/ja/docs/Case_Sensitivity_in_class_and_id_Names">class 属性 / id 属性 / name 属性はケースセンシティブである</a>)</p> - -<h2 id="Specification" name="Specification">仕様</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('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/ja/web/api/element/id/index.md b/files/ja/web/api/element/id/index.md new file mode 100644 index 0000000000..9cd313c8ca --- /dev/null +++ b/files/ja/web/api/element/id/index.md @@ -0,0 +1,46 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Element + - プロパティ + - リファレンス +browser-compat: api.Element.id +translation_of: Web/API/Element/id +--- +{{ ApiRef("DOM") }} + +**`id`** は {{domxref("Element")}} インターフェイスのプロパティで、グローバル属性の [**`id`**](/ja/docs/Web/HTML/Global_attributes/id) を反映した要素の識別子を表します。 + +`id` の値が空文字列でない場合は、文書内で固有でなければなりません。 + +`id` はよく {{domxref("Document.getElementById()", "getElementById()")}} で特定の要素を受け取るために使用します。他の一般的な用途としては、要素の [ID をセレクターとして](/ja/docs/Web/CSS/ID_selectors) [CSS](/ja/docs/Web/CSS) で文書をスタイル付けするために使用されます。 + +> **Note:** 識別子は大文字小文字の区別がありますが、大文字小文字の区別だけで見分ける ID を作ることは避けてください。 + + +## 構文 + +```js +var idStr = element.id; // id を取得 +``` + +```js +element.id = 'newid'; // id を設定 +``` + +- `idStr` はこの要素の識別子です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- DOM の [**id**](/ja/docs/Web/HTML/Global_attributes/id) グローバル属性 diff --git a/files/ja/web/api/element/index.html b/files/ja/web/api/element/index.html deleted file mode 100644 index 6bece2f11f..0000000000 --- a/files/ja/web/api/element/index.html +++ /dev/null @@ -1,464 +0,0 @@ ---- -title: Element -slug: Web/API/Element -tags: - - API - - DOM - - DOM Reference - - Element - - Interface - - Reference - - Web API -browser-compat: api.Element -translation_of: Web/API/Element ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><strong><code>Element</code></strong> は {{DOMxRef("Document")}} の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが <code>Element</code> を継承します。</span>例えば HTML 要素には {{DOMxRef("HTMLElement")}} インターフェイス、SVG 要素には {{DOMxRef("SVGElement")}} インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。</p> - -<p>XUL の <code>XULElement</code> インターフェイスのようなウェブプラットフォームの枠外の言語もまた、<code>Element</code> インターフェイスを通じて要素を実装しています。</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">プロパティ</h2> - -<p><em><code>Element</code> は、親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。</em></p> - -<dl> - <dt>{{DOMxRef("Element.assignedSlot")}}{{readonlyInline}}</dt> - <dd>このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。</dd> - <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> - <dd>対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。</dd> - <dt>{{domxref("Element.childElementCount")}} {{readonlyInline}}</dt> - <dd>この要素の子要素の数を返します。</dd> - <dt>{{domxref("Element.children")}} {{readonlyInline}}</dt> - <dd>この要素の子要素を返します。</dd> - <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> - <dd>class 属性のトークンリストを含む {{DOMxRef("DOMTokenList")}} を返します。</dd> - <dt>{{DOMxRef("Element.className")}}</dt> - <dd>{{DOMxRef("DOMString")}} 型であり、要素のクラスを表します。</dd> - <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> - <dd>要素の内部の高さを表す {{jsxref("Number")}} を返します。</dd> - <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> - <dd>要素の左境界の幅を表す {{jsxref("Number")}} を返します。</dd> - <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> - <dd>要素の上境界の幅を表す {{jsxref("Number")}} を返します。</dd> - <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> - <dd>要素の内部の幅を表す {{jsxref("Number")}} を返します。</dd> - <dt>{{domxref("Element.firstElementChild")}} {{readonlyInline}}</dt> - <dd>アクセシビリティ向けに公開されたラベルを含む {{DOMxRef("DOMString")}} を返します。</dd> - <dt>{{DOMxRef("Element.id")}}</dt> - <dd>{{DOMxRef("DOMString")}} 型であり、要素の id を表します。</dd> - <dt>{{DOMxRef("Element.innerHTML")}}</dt> - <dd>{{DOMxRef("DOMString")}} 型であり、要素内容のマークアップを表します。</dd> - <dt>{{domxref("Element.lastElementChild")}} {{readonlyInline}}</dt> - <dd>Returns the last child element of this element.</dd> - <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> - <dd>要素の修飾名のローカル部分を表す {{DOMxRef("DOMString")}} です。</dd> - <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> - <dd>要素の名前空間の URI。名前空間がない場合は <code>null</code> になります。 - <div class="note"> - <p><strong>注:</strong> Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> 名前空間内に存在します。</p> - </div> - </dd> - <dt>{{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}}</dt> - <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ <code>null</code>。</dd> - <dt>{{DOMxRef("Element.outerHTML")}}</dt> - <dd>{{DOMxRef("DOMString")}} 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。</dd> - <dt>{{DOMxRef("Element.part")}}</dt> - <dd>要素のパート識別子 (すなわち、 <code>part</code> 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。</dd> - <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> - <dd>要素の名前空間接頭辞を表す {{DOMxRef("DOMString")}}。接頭辞が指定されていない場合は <code>null</code>。</dd> - <dt>{{DOMxRef("Element.previousElementSibling")}} {{readOnlyInline}}</dt> - <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ <code>null</code>。</dd> - <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> - <dd>要素のスクロールビューの高さを表す {{jsxref("Number")}} を返します。</dd> - <dt>{{DOMxRef("Element.scrollLeft")}}</dt> - <dd>{{jsxref("Number")}} 型であり、要素の左スクロールオフセット値を表します。</dd> - <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> - <dd>要素で可能な左スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。</dd> - <dt>{{DOMxRef("Element.scrollTop")}}</dt> - <dd>文書の上端が垂直方向にスクロールされた量をピクセル数で表す {{jsxref("Number")}} です。</dd> - <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> - <dd>要素で可能な上スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。</dd> - <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> - <dd>要素のスクロールビュー幅を表す {{jsxref("Number")}} を返します。</dd> - <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> - <dd>要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。</dd> - <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> - <dd>オープン・クローズに関係なく、要素が所持している Shadow Root を返します。<strong><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> に限り使用できます。</strong></dd> - <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> - <dd>要素が挿入されている shadow DOM スロットの名前を返します。</dd> - <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> - <dd>要素のタグ名を {{jsxref("String")}} で返します。</dd> -</dl> - -<h3 id="Properties_included_from_Aria">ARIA から導入されたプロパティ</h3> - -<p><em><code>Element</code> インターフェイスは <code>ARIAMixin</code> ミックスインで定義されている以下のプロパティを持っています。</em></p> - -<dl> - <dt>{{domxref("Element.ariaAtomic")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-atomic</code> 属性を反映し、 <code>aria-relevant</code> 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。</dd> - <dt>{{domxref("Element.ariaAutoComplete")}}</dt> - <dd>{{domxref("DOMString")}} で、 <code>aria-autocomplete</code> 属性を反映し、コンボボックス、サーチボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。</dd> - <dt>{{domxref("Element.ariaBusy")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-busy</code> 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。</dd> - <dt>{{domxref("Element.ariaChecked")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-checked</code> 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。</dd> - <dt>{{domxref("Element.ariaColCount")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-colcount</code> 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。</dd> - <dt>{{domxref("Element.ariaColIndex")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-colindex</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。</dd> - <dt>{{domxref("Element.ariaColIndexText")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-colindextext</code> 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。</dd> - <dt>{{domxref("Element.ariaColSpan")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-colspan</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。</dd> - <dt>{{domxref("Element.ariaCurrent")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-current</code> 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。</dd> - <dt>{{domxref("Element.ariaDescription")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-description</code> 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。</dd> - <dt>{{domxref("Element.ariaDisabled")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-disabled</code> 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。</dd> - <dt>{{domxref("Element.ariaExpanded")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-expanded</code> 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。</dd> - <dt>{{domxref("Element.ariaHasPopup")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-haspopup</code> 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。</dd> - <dt>{{domxref("Element.ariaHidden")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-hidden</code> 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。</dd> - <dt>{{domxref("Element.ariaKeyShortcuts")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-keyshortcuts</code> 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。</dd> - <dt>{{domxref("Element.ariaLabel")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-label</code> 属性を反映し、現在の要素をラベル付けする文字列値を定義します。</dd> - <dt>{{domxref("Element.ariaLevel")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-level</code> 属性を反映し、構造内の要素の階層レベルを定義します。</dd> - <dt>{{domxref("Element.ariaLive")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-live</code> 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。</dd> - <dt>{{domxref("Element.ariaModal")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-modal</code> 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。</dd> - <dt>{{domxref("Element.ariaMultiline")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-multiline</code> 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。</dd> - <dt>{{domxref("Element.ariaMultiSelectable")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-multiselectable</code> 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。</dd> - <dt>{{domxref("Element.ariaOrientation")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-orientation</code> 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。</dd> - <dt>{{domxref("Element.ariaPlaceholder")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-placeholder</code> 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。</dd> - <dt>{{domxref("Element.ariaPosInSet")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-posinset</code> 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。</dd> - <dt>{{domxref("Element.ariaPressed")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-pressed</code> 属性を反映し、トグルボタンの現在の「押された」状態を示します。</dd> - <dt>{{domxref("Element.ariaReadOnly")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-readonly</code> 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。</dd> - <dt>{{domxref("Element.ariaRelevant")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-relevant</code> 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 <code>aria-live</code> リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。</dd> - <dt>{{domxref("Element.ariaRequired")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-required</code> 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。</dd> - <dt>{{domxref("Element.ariaRoleDescription")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-roledescription</code> 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。</dd> - <dt>{{domxref("Element.ariaRowCount")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-rowcount</code> 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。</dd> - <dt>{{domxref("Element.ariaRowIndex")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-rowindex</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。</dd> - <dt>{{domxref("Element.ariaRowIndexText")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-rowindextext</code> 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。</dd> - <dt>{{domxref("Element.ariaRowSpan")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-rowspan</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。</dd> - <dt>{{domxref("Element.ariaSelected")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-selected</code> 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。</dd> - <dt>{{domxref("Element.ariaSetSize")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-setsize</code> 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。</dd> - <dt>{{domxref("Element.ariaSort")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-sort</code> 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。</dd> - <dt>{{domxref("Element.ariaValueMax")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-valueMax</code> 属性を反映し、 range ウィジェットの最大許容値を定義します。</dd> - <dt>{{domxref("Element.ariaValueMin")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-valueMin</code> 属性を反映し、 range ウィジェットに許容される最小値を定義します。</dd> - <dt>{{domxref("Element.ariaValueNow")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-valueNow</code> 属性を反映し、 range ウィジェットの現在の値を定義します。</dd> - <dt>{{domxref("Element.ariaValueText")}}</dt> - <dd>{{domxref("DOMString")}} で <code>aria-valuetext</code> 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義ます。</dd> -</dl> - -<h3 id="Handlers">イベントハンドラー</h3> - -<dl> - <dt>{{domxref("Element.onfullscreenchange")}}</dt> - <dd>要素が全画面モードに入ったり出たりしたときに送られる {{event("fullscreenchange")}} イベントのイベントハンドラーです。これは期待された遷移が成功したかどうかを監視するために使用することができますが、アプリの実行がバックグラウンドになった場合など、想定外の変化を監視することもできます。</dd> - <dt>{{domxref("Element.onfullscreenerror")}}</dt> - <dd>全画面モードへ移行しようとしてエラーが発生したときに送られる {{event("fullscreenerror")}} イベントのイベントハンドラーです。</dd> -</dl> - -<h2 id="Methods">メソッド</h2> - -<p><em><code>Element</code> は親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。</em></p> - -<dl> - <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> - <dd>要素に特定のイベント型を扱うイベントハンドラーを登録します。</dd> - <dt>{{DOMxRef("Element.attachShadow()")}}</dt> - <dd>指定した要素に shadow DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。</dd> - <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> - <dd>要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。</dd> - <dt>{{DOMxRef("Element.append()")}}</dt> - <dd>この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。</dd> - <dt>{{DOMxRef("Element.closest()")}}</dt> - <dd>引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を {{DOMxRef("Element")}} 型で返します。</dd> - <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> - <dd>要素で <a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> を作成します。その要素はシャドウホストになります。 {{DOMxRef("ShadowRoot")}} を返します。</dd> - <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> - <dd>{{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスを返します。</dd> - <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> - <dd>DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す {{jsxref("Boolean")}} を返します。</dd> - <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> - <dd>要素でアクティブな Animation オブジェクトの配列を返します。</dd> - <dt>{{DOMxRef("Element.getAttribute()")}}</dt> - <dd>現在ノードから指定された名前の付いた属性値を取得して、 {{jsxref("Object")}} を返します。</dd> - <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> - <dd>現在の要素の属性名の配列を返します。</dd> - <dt>{{DOMxRef("Element.getAttributeNode()")}}</dt> - <dd>現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。</dd> - <dt>{{DOMxRef("Element.getAttributeNodeNS()")}}</dt> - <dd>指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。</dd> - <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> - <dd>現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、{{jsxref("Object")}} を返します。</dd> - <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> - <dd>要素のサイズと、ビューポートにおける位置を返します。</dd> - <dt>{{domxref("Element.getBoxQuads()")}} {{experimental_inline}}</dt> - <dd>{{domxref("DOMQuad")}} オブジェクトのリストを返し、これはノードの CSS フラグメントを表します。</dd> - <dt>{{DOMxRef("Element.getClientRects()")}}</dt> - <dd>クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。</dd> - <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> - <dd>現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ {{DOMxRef("HTMLCollection")}} を返します。</dd> - <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> - <dd>現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。</dd> - <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> - <dd>現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。</dd> - <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> - <dd>要素が指定された指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd> - <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> - <dd>要素が指定された名前空間内に指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd> - <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> - <dd>要素が現在 1 つ以上の属性をもっているかを示す {{jsxref("Boolean")}} を返します。</dd> - <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> - <dd>呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。</dd> - <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> - <dd>メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。</dd> - <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> - <dd>テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。</dd> - <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> - <dd>メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。</dd> - <dt>{{DOMxRef("Element.matches()")}}</dt> - <dd>要素が指定されたセレクター文字列で選択されているか否かを示す {{jsxref("Boolean")}} を返します。</dd> - <dt>{{DOMxRef("Element.prepend()")}}</dt> - <dd>この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。</dd> - <dt>{{DOMxRef("Element.querySelector()")}}</dt> - <dd>要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。</dd> - <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> - <dd>要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。</dd> - <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> - <dd>以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。</dd> - <dt>{{DOMxRef("Element.remove()")}}</dt> - <dd>親要素の子リストから、要素を取り除きます。</dd> - <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> - <dd>現在ノードから，指定された名前を持つ属性を取り除きます。</dd> - <dt>{{DOMxRef("Element.removeAttributeNode()")}}</dt> - <dd>現在のノードから名前の付いた属性のノード表現を削除します。</dd> - <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> - <dd>現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。</dd> - <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> - <dd>要素からイベントリスナーを取り除きます。</dd> - <dt>{{DOMxRef("Element.replaceChildren()")}}</dt> - <dd>{{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。</dd> - <dt>{{DOMxRef("Element.replaceWith()")}}</dt> - <dd>親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。</dd> -<dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> - <dd>要素を全画面表示するよう、ブラウザーへ非同期的に要求します。</dd> - <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> - <dd>指定した要素でポインターをロックするよう、非同期的に要求できます。</dd> - <dt>{{domxref("Element.scroll()")}}</dt> - <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd> - <dt>{{domxref("Element.scrollBy()")}}</dt> - <dd>指定された量だけ要素をスクロールします。</dd> - <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> - <dd>要素がビューの内側に来るまでページをスクロールします。</dd> - <dt>{{domxref("Element.scrollTo()")}}</dt> - <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd> - <dt>{{DOMxRef("Element.setAttribute()")}}</dt> - <dd>現在ノードに、指定された名前を持つ属性値を設定します。</dd> - <dt>{{DOMxRef("Element.setAttributeNode()")}}</dt> - <dd>現在のノードから指定された属性のノード表現を設定します。</dd> - <dt>{{DOMxRef("Element.setAttributeNodeNS()")}}</dt> - <dd>指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。</dd> - <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> - <dd>現在ノードに、指定された名前と名前空間を持つ属性値を設定します。</dd> - <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}}</dt> - <dd>すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。</dd> - <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> - <dd>以降の <a href="/ja/docs/Web/API/Pointer_events">pointer イベント</a> のキャプチャー対象とする、特定の要素を指定します。</dd> - <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> - <dd>指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。</dd> -</dl> - -<h2 id="Events">イベント</h2> - -<p>これらのイベントを待ち受けするには、 <code>addEventListener()</code> を使用するか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかします。</p> - -<dl> - <dt>{{domxref("HTMLDialogElement/cancel_event", "cancel")}}</dt> - <dd>ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが <kbd>Esc</kbd> キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。<br> - {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/error_event", "error")}}</dt> - <dd>リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。<br> - {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/scroll_event", "scroll")}}</dt> - <dd>文書のビューまたは要素がスクロールしたときに発生します。<br> - {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/select_event", "select")}}</dt> - <dd>いくらかのテキストが選択されたときに発生します。<br> - {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/show_event", "show")}}</dt> - <dd>{{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <code><a href="/ja/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code> 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 {{deprecated_inline}}<br> - {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/wheel_event","wheel")}}</dt> - <dd>ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。<br> - {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティから利用することもできます。</dd> -</dl> - -<h3 id="Clipboard_events">クリップボードイベント</h3> - -<dl> - <dt>{{domxref("Element/copy_event", "copy")}}</dt> - <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発生します。<br> - {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/cut_event", "cut")}}</dt> - <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発生します。<br> - {{domxref("HTMLElement/oncut", "oncut")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/paste_event", "paste")}}</dt> - <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発生します。<br> - {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティから利用することもできます。</dd> -</dl> - -<h3 id="Composition_events">構成イベント</h3> - -<dl> - <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> - <dd>{{glossary("input method editor")}} のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発生します。</dd> - <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt> - <dd>{{glossary("input method editor")}} のようなテキスト構成システムで、新しい入力セッションを始まったときに発生します。</dd> - <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt> - <dd>{{glossary("input method editor")}} のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。</dd> -</dl> - -<h3 id="Focus_events">フォーカスイベント</h3> - -<dl> - <dt>{{domxref("Element/blur_event", "blur")}}</dt> - <dd>要素がフォーカスを失ったときに発生します。<br> - {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/focus_event", "focus")}}</dt> - <dd>要素がフォーカスを受け取ったときに発生します。<br> - {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/focusin_event", "focusin")}}</dt> - <dd>要素がフォーカスを受け取ろうとしているときに発生します。</dd> - <dt>{{domxref("Element/focusout_event", "focusout")}}</dt> - <dd>要素がフォーカスを失おうとしているときに発生します。</dd> -</dl> - -<h3 id="Fullscreen_events">全画面イベント</h3> - -<dl> - <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt> - <dd>全画面モードへの移行時または終了時に、 {{domxref("Document")}} または {{domxref("Element")}} に送られます。</dd> - <dd>{{domxref("Element.onfullscreenchange", "onfullscreenchange")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt> - <dd>全画面モードへの移行または終了を試みている中でエラーが発生したときに、 <code>Document</code> または <code>Element</code> に送られます。</dd> - <dd>{{domxref("Element.onfullscreenerror", "onfullscreenerror")}} プロパティから利用することもできます。</dd> -</dl> - -<h3 id="Keyboard_events">キーボードイベント</h3> - -<dl> - <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt> - <dd>キーが押されたときに発生します。<br> - {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティから利用することもできます。</dd> - <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt> - <dd>文字の値を発生させるキーが押されたときに発生します。 {{deprecated_inline}}<br> - {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティから利用することもできます。</dd> - <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt> - <dd>キーが離されたときに発生します。<br> - {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティから利用することもできます。</dd> -</dl> - -<h3 id="Mouse_events">マウスイベント</h3> - -<dl> - <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> - <dd>ポインティングデバイスの第一ボタン以外のボタン (例えば、マウスの左ボタン以外のボタン) が要素上で押されて離されたときに発生します。<br> - {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/click_event", "click")}}</dt> - <dd>ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で押されて離されたときに発生します。<br> - {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt> - <dd>ユーザーがコンテキストメニューを開こうとしたときに発生します。<br> - {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt> - <dd>ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で2回クリックされたときに発生します。<br> - {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt> - <dd>要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。</dd> - <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt> - <dd>ポインティングデバイスのボタンが要素上で押されたときに発生します。<br> - {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt> - <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の上へ移動したときに発生します。<br> - {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt> - <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の外へ移動したときに発生します。<br> - {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt> - <dd>ポインティングデバイス (ふつうはマウス) が、要素の上を移動したときに発生します。<br> - {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt> - <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発生します。<br> - {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt> - <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発生します。<br> - {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt> - <dd>ポインティングデバイスのボタンが要素の上で離されたときに発生します。<br> - {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> - <dd>trackpadtouchscreen の上の圧力が変化するたびに発生します。</dd> - <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> - <dd>「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発生します。</dd> - <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> - <dd>{{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発生します。</dd> - <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> - <dd>「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発生します。</dd> -</dl> - -<h3 id="Touch_events">タッチイベント</h3> - -<dl> - <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> - <dd>1つ以上のタッチ点が実装依存の理由により破棄された (例えば、タッチ点が多く作られすぎた) 場合に発生します。<br> - {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/touchend_event", "touchend")}}</dt> - <dd>1つ以上のタッチ点がタッチ面から取り除かれたときに発生します。<br> - {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt> - <dd>1つ以上のタッチ点がタッチ面上で移動したときに発生します。<br> - {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティから利用することもできます。</dd> - <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt> - <dd>1つ以上のタッチ点がタッチ面に配置されたときに発生します。<br> - {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティから利用することもできます。</dd> -</dl> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> diff --git a/files/ja/web/api/element/index.md b/files/ja/web/api/element/index.md new file mode 100644 index 0000000000..407d8b2672 --- /dev/null +++ b/files/ja/web/api/element/index.md @@ -0,0 +1,442 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM リファレンス + - Element + - インターフェイス + - リファレンス + - Web API +browser-compat: api.Element +translation_of: Web/API/Element +--- +{{APIRef("DOM")}} + +**`Element`** は {{DOMxRef("Document")}} が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが `Element` を継承しています。 + +例えば {{DOMxRef("HTMLElement")}} インターフェイスは HTML 要素の基本インターフェイスであり、 {{DOMxRef("SVGElement")}} インターフェイスはすべての SVG 要素の基本になります。ほとんどの機能は、クラスの階層を下りると具体化していきます。 + +XUL の `XULElement` インターフェイスのようなウェブプラットフォームの枠外の言語もまた、`Element` インターフェイスを実装しています。 + +{{InheritanceDiagram}} + +## プロパティ + +_`Element` は、親インターフェイスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承しています。_ + +- {{DOMxRef("Element.assignedSlot")}}{{readonlyInline}} + - : このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。 +- {{DOMxRef("Element.attributes")}} {{readOnlyInline}} + - : 対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。 +- {{domxref("Element.childElementCount")}} {{readonlyInline}} + - : この要素の子要素の数を返します。 +- {{domxref("Element.children")}} {{readonlyInline}} + - : この要素の子要素を返します。 +- {{DOMxRef("Element.classList")}} {{readOnlyInline}} + - : class 属性のリストが入った {{DOMxRef("DOMTokenList")}} を返します。 +- {{DOMxRef("Element.className")}} + - : {{DOMxRef("DOMString")}} で、この要素のクラスを表します。 +- {{DOMxRef("Element.clientHeight")}} {{readOnlyInline}} + - : この要素の内部の高さを表す数値を返します。 +- {{DOMxRef("Element.clientLeft")}} {{readOnlyInline}} + - : この要素の左境界の幅を表す数値を返します。 +- {{DOMxRef("Element.clientTop")}} {{readOnlyInline}} + - : この要素の上境界の幅を表す数値を返します。 +- {{DOMxRef("Element.clientWidth")}} {{readOnlyInline}} + - : この要素の内部の幅を表す数値を返します。 +- {{domxref("Element.firstElementChild")}} {{readonlyInline}} + - : この要素の最初の子要素を返します。 +- {{DOMxRef("Element.id")}} + - : {{DOMxRef("DOMString")}} で、この要素の id を表します。 +- {{DOMxRef("Element.innerHTML")}} + - : {{DOMxRef("DOMString")}} で、この要素の内容のマークアップを表します。 +- {{domxref("Element.lastElementChild")}} {{readonlyInline}} + - : この要素の最後の子要素を返します。 +- {{DOMxRef("Element.localName")}} {{readOnlyInline}} + - : {{DOMxRef("DOMString")}} で、この要素の修飾名のローカル部分を表します。 +- {{DOMxRef("Element.namespaceURI")}} {{readonlyInline}} + + - : この要素の名前空間の URI。名前空間がない場合は `null` になります。 + + > **Note:** Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) 名前空間内に存在します。 + +- {{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}} + - : {{DOMxRef("Element")}} で、ツリー上で自身の直後の要素を表します。兄弟ノードがなければ `null` になります。 +- {{DOMxRef("Element.outerHTML")}} + - : {{DOMxRef("DOMString")}} で、その要素の内容を含むマークアップを表します。値が設定された場合、その文字列から解釈されたノードでその要素を置換します。 +- {{DOMxRef("Element.part")}} + - : 要素のパート識別子 (すなわち、 `part` 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。 +- {{DOMxRef("Element.prefix")}} {{readOnlyInline}} + - : {{DOMxRef("DOMString")}} で、要素の名前空間接頭辞を表します。接頭辞が指定されていない場合は `null` です。 +- {{DOMxRef("Element.previousElementSibling")}} {{readOnlyInline}} + - : {{DOMxRef("Element")}} で、ツリー上で自身の直前の要素を表します。兄弟ノードが無ければ `null` です。 +- {{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}} + - : この要素のスクロールビューの高さを表す数値を返します。 +- {{DOMxRef("Element.scrollLeft")}} + - : 数値型で、この要素の左スクロールオフセット値を表します。 +- {{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}} + - : この要素で可能な左スクロールオフセットの最大値を表す数値を返します。 +- {{DOMxRef("Element.scrollTop")}} + - : この要素の上端が垂直方向にスクロールされた量をピクセル数で表す数値です。 +- {{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}} + - : 要素で可能な上スクロールオフセットの最大値を表す数値を返します。 +- {{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}} + - : 要素のスクロールビュー幅を表す数値を返します。 +- {{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}} + - : 要素が所持しているオープンモードのシャドウルート、あるいはオープンモードのシャドウルートがない場合は null を返します。 +- {{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}} + - : オープン・クローズに関係なく、要素が所持しているさh同ルートを返します。**[WebExtensions](/ja/docs/Mozilla/Add-ons/WebExtensions) に限り使用できます。** +- {{DOMxRef("Element.setHTML")}} + - : HTML の文字列を解釈して[無害化](/ja/docs/Web/API/HTML_Sanitizer_API)し、 DOM の中にこの要素のサブツリーとして挿入します。 +- {{DOMxRef("Element.slot")}} {{Experimental_Inline}} + - : この要素が挿入されているシャドウ DOM スロットの名前を返します。 +- {{DOMxRef("Element.tagName")}} {{readOnlyInline}} + - : この要素のタグ名を文字列で返します。 + +### ARIA から導入されたプロパティ + +_`Element` インターフェイスには、 `ARIAMixin` ミックスインで定義されている以下のプロパティを持っています。_ + +- {{domxref("Element.ariaAtomic")}} + - : {{domxref("DOMString")}} で [`aria-atomic`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) 属性を反映し、 [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。 +- {{domxref("Element.ariaAutoComplete")}} + - : {{domxref("DOMString")}} で、 [`aria-autocomplete`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) 属性を反映し、コンボボックス、検索ボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。 +- {{domxref("Element.ariaBusy")}} + - : {{domxref("DOMString")}} で [`aria-busy`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-busy) 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。 +- {{domxref("Element.ariaChecked")}} + - : {{domxref("DOMString")}} で [`aria-checked`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-checked) 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。 +- {{domxref("Element.ariaColCount")}} + - : {{domxref("DOMString")}} で [`aria-colcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。 +- {{domxref("Element.ariaColIndex")}} + - : {{domxref("DOMString")}} で [`aria-colindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。 +- {{domxref("Element.ariaColIndexText")}} + - : {{domxref("DOMString")}} で [`aria-colindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。 +- {{domxref("Element.ariaColSpan")}} + - : {{domxref("DOMString")}} で [`aria-colspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。 +- {{domxref("Element.ariaCurrent")}} + - : {{domxref("DOMString")}} で [`aria-current`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-current) 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。 +- {{domxref("Element.ariaDescription")}} + - : {{domxref("DOMString")}} で [`aria-description`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-description) 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。 +- {{domxref("Element.ariaDisabled")}} + - : {{domxref("DOMString")}} で [`aria-disabled`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。 +- {{domxref("Element.ariaExpanded")}} + - : {{domxref("DOMString")}} で [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。 +- {{domxref("Element.ariaHasPopup")}} + - : {{domxref("DOMString")}} で [`aria-haspopup`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。 +- {{domxref("Element.ariaHidden")}} + - : {{domxref("DOMString")}} で [`aria-hidden`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。 +- {{domxref("Element.ariaKeyShortcuts")}} + - : {{domxref("DOMString")}} で [`aria-keyshortcuts`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts) 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。 +- {{domxref("Element.ariaLabel")}} + - : {{domxref("DOMString")}} で [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性を反映し、現在の要素をラベル付けする文字列値を定義します。 +- {{domxref("Element.ariaLevel")}} + - : {{domxref("DOMString")}} で [`aria-level`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-level) 属性を反映し、構造内の要素の階層レベルを定義します。 +- {{domxref("Element.ariaLive")}} + - : {{domxref("DOMString")}} で [`aria-live`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-live) 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。 +- {{domxref("Element.ariaModal")}} + - : {{domxref("DOMString")}} で [`aria-modal`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-modal) 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。 +- {{domxref("Element.ariaMultiline")}} + - : {{domxref("DOMString")}} で [`aria-multiline`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiline) 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。 +- {{domxref("Element.ariaMultiSelectable")}} + - : {{domxref("DOMString")}} で [`aria-multiselectable`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable) 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。 +- {{domxref("Element.ariaOrientation")}} + - : {{domxref("DOMString")}} で [`aria-orientation`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。 +- {{domxref("Element.ariaPlaceholder")}} + - : {{domxref("DOMString")}} で [`aria-placeholder`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder) 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。 +- {{domxref("Element.ariaPosInSet")}} + - : {{domxref("DOMString")}} で [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。 +- {{domxref("Element.ariaPressed")}} + - : {{domxref("DOMString")}} で [`aria-pressed`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 属性を反映し、トグルボタンの現在の「押された」状態を示します。 +- {{domxref("Element.ariaReadOnly")}} + - : {{domxref("DOMString")}} で [`aria-readonly`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。 +- {{domxref("Element.ariaRelevant")}} + - : {{domxref("DOMString")}} で [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 `aria-live` リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。 +- {{domxref("Element.ariaRequired")}} + - : {{domxref("DOMString")}} で [`aria-required`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-required) 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。 +- {{domxref("Element.ariaRoleDescription")}} + - : {{domxref("DOMString")}} で [`aria-roledescription`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。 +- {{domxref("Element.ariaRowCount")}} + - : {{domxref("DOMString")}} で [`aria-rowcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。 +- {{domxref("Element.ariaRowIndex")}} + - : {{domxref("DOMString")}} で [`aria-rowindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。 +- {{domxref("Element.ariaRowIndexText")}} + - : {{domxref("DOMString")}} で [`aria-rowindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。 +- {{domxref("Element.ariaRowSpan")}} + - : {{domxref("DOMString")}} で [`aria-rowspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。 +- {{domxref("Element.ariaSelected")}} + - : {{domxref("DOMString")}} で [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。 +- {{domxref("Element.ariaSetSize")}} + - : {{domxref("DOMString")}} で [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。 +- {{domxref("Element.ariaSort")}} + - : {{domxref("DOMString")}} で [`aria-sort`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-sort) 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。 +- {{domxref("Element.ariaValueMax")}} + - : {{domxref("DOMString")}} で [`aria-valueMax`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) 属性を反映し、 range ウィジェットの最大許容値を定義します。 +- {{domxref("Element.ariaValueMin")}} + - : {{domxref("DOMString")}} で [`aria-valueMin`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) 属性を反映し、 range ウィジェットに許容される最小値を定義します。 +- {{domxref("Element.ariaValueNow")}} + - : {{domxref("DOMString")}} で [`aria-valueNow`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) 属性を反映し、 range ウィジェットの現在の値を定義します。 +- {{domxref("Element.ariaValueText")}} + - : {{domxref("DOMString")}} で [`aria-valuetext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。 + +## メソッド + +_`Element` は親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。_ + +- {{DOMxRef("EventTarget.addEventListener()")}} + - : この要素、特定のイベント型を扱うイベントハンドラーを登録します。 +- {{DOMxRef("Element.after()")}} + - : {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子ノードリストの中、 `Element` の直後に追加します。 +- {{DOMxRef("Element.attachShadow()")}} + - : 指定した要素にシャドウ DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。 +- {{DOMxRef("Element.animate()")}} {{Experimental_Inline}} + - : この要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。 +- {{DOMxRef("Element.append()")}} + - : この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。 +- {{DOMxRef("Element.before()")}} + - : {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子ノードリストの中、 `Element` の直前に追加します。 +- {{DOMxRef("Element.closest()")}} + - : {{DOMxRef("Element")}} 型で、引数に指定したセレクターによって選択される要素がもっとも近い祖先要素（または当該要素自身）を返します。 +- {{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : この要素に[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) を作成し、シャドウホストにします。 {{DOMxRef("ShadowRoot")}} を返します。 +- {{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}} + - : {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスで、 {{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを返します。 +- {{DOMxRef("EventTarget.dispatchEvent()")}} + - : DOM 内のこのノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す論理値を返します。 +- {{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}} + - : 要素でアクティブな Animation オブジェクトの配列を返します。 +- {{DOMxRef("Element.getAttribute()")}} + - : 現在ノードから指定された名前付きの属性値を取得して文字列で返します。 +- {{DOMxRef("Element.getAttributeNames()")}} + - : 現在の要素の属性名の配列を返します。 +- {{DOMxRef("Element.getAttributeNode()")}} + - : 現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。 +- {{DOMxRef("Element.getAttributeNodeNS()")}} + - : 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。 +- {{DOMxRef("Element.getAttributeNS()")}} + - : 現在のノードから指定された名前と名前空間を持つ属性値を取得して、文字列で返します。 +- {{DOMxRef("Element.getBoundingClientRect()")}} + - : この要素のサイズと、ビューポートにおける位置を返します。 +- {{domxref("Element.getBoxQuads()")}} {{experimental_inline}} + - : このノードの CSS フラグメントを表す {{domxref("DOMQuad")}} オブジェクトのリストを返します。 +- {{DOMxRef("Element.getClientRects()")}} + - : クライアント領域内のテキストの各行の外接矩形 (bounding rectangle) の集合を返します。 +- {{DOMxRef("Element.getElementsByClassName()")}} + - : 生きた {{DOMxRef("HTMLCollection")}} で、現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を生きた {{DOMxRef("HTMLCollection")}} で、返します。 +- {{DOMxRef("Element.getElementsByTagName()")}} + - : 現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得して生きた {{DOMxRef("HTMLCollection")}} で返します。 +- {{DOMxRef("Element.getElementsByTagNameNS()")}} + - : 生きた {{DOMxRef("HTMLCollection")}} で、現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得して、生きた {{DOMxRef("HTMLCollection")}} で返します。 +- {{DOMxRef("Element.hasAttribute()")}} + - : 要素が指定された指定された属性を持っているか否かを示す論理値を返します。 +- {{DOMxRef("Element.hasAttributeNS()")}} + - : 要素が指定された名前空間内に指定された属性を持っているか否かを示す論理値を返します。 +- {{DOMxRef("Element.hasAttributes()")}} + - : 要素が現在 1 つ以上の属性をもっているかを示す論理値を返します。 +- {{DOMxRef("Element.hasPointerCapture()")}} + - : 呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。 +- {{DOMxRef("Element.insertAdjacentElement()")}} + - : メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。 +- {{DOMxRef("Element.insertAdjacentHTML()")}} + - : テキストを HTML または XML として解釈し、解釈結果のノードをツリーの指定した位置に挿入します。 +- {{DOMxRef("Element.insertAdjacentText()")}} + - : メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。 +- {{DOMxRef("Element.matches()")}} + - : 要素が指定されたセレクター文字列で選択されるか否かを示す論理値を返します。 +- {{DOMxRef("Element.prepend()")}} + - : この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。 +- {{DOMxRef("Element.querySelector()")}} + - : 要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。 +- {{DOMxRef("Element.querySelectorAll()")}} + - : 要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。 +- {{DOMxRef("Element.releasePointerCapture()")}} + - : 以前に特定の{{DOMxRef("PointerEvent","ポインターイベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。 +- {{DOMxRef("Element.remove()")}} + - : 親要素の子リストから、要素を取り除きます。 +- {{DOMxRef("Element.removeAttribute()")}} + - : 現在ノードから，指定された名前を持つ属性を取り除きます。 +- {{DOMxRef("Element.removeAttributeNode()")}} + - : 現在のノードから名前の付いた属性のノード表現を取り除きます。 +- {{DOMxRef("Element.removeAttributeNS()")}} + - : 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。 +- {{DOMxRef("EventTarget.removeEventListener()")}} + - : 要素からイベントリスナーを取り除きます。 +- {{DOMxRef("Element.replaceChildren()")}} + - : {{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。 +- {{DOMxRef("Element.replaceWith()")}} + - : 親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。 +- {{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}} + - : 要素を全画面表示するよう、ブラウザーへ非同期的に要求します。 +- {{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}} + - : 指定した要素でポインターをロックするよう、非同期的に要求できます。 +- {{domxref("Element.scroll()")}} + - : 指定された要素の中で特定の座標のセットへスクロールします。 +- {{domxref("Element.scrollBy()")}} + - : 指定された量だけ要素をスクロールします。 +- {{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}} + - : 要素がビューの内側に来るまでページをスクロールします。 +- {{domxref("Element.scrollTo()")}} + - : 指定された要素の中で特定の座標のセットへスクロールします。 +- {{DOMxRef("Element.setAttribute()")}} + - : 現在ノードに、指定された名前を持つ属性値を設定します。 +- {{DOMxRef("Element.setAttributeNode()")}} + - : 現在のノードから指定された属性のノード表現を設定します。 +- {{DOMxRef("Element.setAttributeNodeNS()")}} + - : 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。 +- {{DOMxRef("Element.setAttributeNS()")}} + - : 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。 +- {{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}} + - : マウスイベントキャプチャーを設定し、すべてのマウスイベントをこの要素にリダイレクトします。 +- {{DOMxRef("Element.setPointerCapture()")}} + - : 指定された要素を、以降の[ポインターイベント](/ja/docs/Web/API/Pointer_events)のキャプチャー対象として指定します。 +- {{DOMxRef("Element.toggleAttribute()")}} + - : 論理属性のオンオフを切り替えます。属性が存在していれば削除、属性が存在していなければ追加します。 + +## イベント + +これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかします。 + +- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} + + - : ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発行されます。ブラウザーがこのイベントを発行させる可能性があるのは、例えばユーザーが <kbd>Esc</kbd> キーを押したり、ブラウザーの UI の一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。 {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティからも利用できます。 +- {{domxref("Element/error_event", "error")}} + - : リソースの読み込みに失敗したか、利用できなかった場合に発行されます。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。 + {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティからも利用できます。 +- {{domxref("Element/scroll_event", "scroll")}} + - : 文書のビューまたは要素がスクロールしたときに発行されます。 + {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティからも利用できます。 +- {{domxref("Element/select_event", "select")}} + - : いくらかのテキストが選択されたときに発行されます。 + {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティからも利用できます。 +- {{domxref("Element/show_event", "show")}} + - : {{domxref("Element/contextmenu_event", "contextmenu")}} イベントが [`contextmenu`](/ja/docs/Web/HTML/Global_attributes/contextmenu) 属性 {{deprecated_inline}} を持つ要素で発生したか、バブリングで到達した場合に発行されます。 + {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティからも利用できます。 +- {{domxref("Element/wheel_event","wheel")}} + - : ユーザーがポインティングデバイス（普通はマウス）のホイールボタンを回転させたときに発行されます。 + {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティからも利用できます。 +- {{domxref("Element/securitypolicyviolation_event","securitypolicyviolation")}} + - : [コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)の違反があった場合に発行されます。 + グローバルの {{DOMxRef("GlobalEventHandlers.onsecuritypolicyviolation", "onsecuritypolicyviolation")}} プロパティからも利用できます。これは要素と {{domxref("Document")}} と {{domxref("Window")}} の各オブジェクトで利用できます。 + +### クリップボードイベント + +- {{domxref("Element/copy_event", "copy")}} + - : ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発行されます。 + {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティからも利用できます。 +- {{domxref("Element/cut_event", "cut")}} + - : ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発行されます。 + {{domxref("HTMLElement/oncut", "oncut")}} プロパティからも利用できます。 +- {{domxref("Element/paste_event", "paste")}} + - : ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発行されます。 + {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティからも利用できます。 + +### 構成イベント + +- {{domxref("Element/compositionend_event", "compositionend")}} + - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。 +- {{domxref("Element/compositionstart_event", "compositionstart")}} + - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムで、新しい入力セッションを始まったときに発行されます。 +- {{domxref("Element/compositionupdate_event", "compositionupdate")}} + - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。 + +### フォーカスイベント + +- {{domxref("Element/blur_event", "blur")}} + - : 要素がフォーカスを失ったときに発行されます。 + {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティからも利用できます。 +- {{domxref("Element/focus_event", "focus")}} + - : 要素がフォーカスを受け取ったときに発行されます。 + {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティからも利用できます。 +- {{domxref("Element/focusin_event", "focusin")}} + - : 要素がフォーカスを受け取ろうとしているときに発行されます。 +- {{domxref("Element/focusout_event", "focusout")}} + - : 要素がフォーカスを失おうとしているときに発行されます。 + +### 全画面イベント + +- {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} + - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへの移行時または終了時に、 {{domxref("Element")}} に送られます。 +- {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} + - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへの移行または終了を試みている中でエラーが発生したときに、 `Element` に送られます。 + +### キーボードイベント + +- `{{domxref("Element/keydown_event", "keydown")}}` + - : キーが押されたときに発行されます。 + {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティからも利用できます。 +- `{{domxref("Element/keypress_event", "keypress")}}` + - : 文字の値を発行させるキーが押されたときに発行されます。 {{deprecated_inline}} + {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティからも利用できます。 +- `{{domxref("Element/keyup_event", "keyup")}}` + - : キーが離されたときに発行されます。 + {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティからも利用できます。 + +### マウスイベント + +- {{domxref("Element/auxclick_event", "auxclick")}} + - : ポインティングデバイスの第一ボタン以外のボタン（例えば、マウスの左ボタン以外のボタン）が要素上で押されて離されたときに発行されます。 + {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティからも利用できます。 +- {{domxref("Element/click_event", "click")}} + - : ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で押されて離されたときに発行されます。 + {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティからも利用できます。 +- {{domxref("Element/contextmenu_event", "contextmenu")}} + - : ユーザーがコンテキストメニューを開こうとしたときに発行されます。 + {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティからも利用できます。 +- {{domxref("Element/dblclick_event", "dblclick")}} + - : ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で 2 回クリックされたときに発行されます。 + {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティからも利用できます。 +- {{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}} + - : 要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発行されます。 +- {{domxref("Element/mousedown_event", "mousedown")}} + - : ポインティングデバイスのボタンが要素上で押されたときに発行されます。 + {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティからも利用できます。 +- {{domxref("Element/mouseenter_event", "mouseenter")}} + - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の上へ移動したときに発行されます。 + {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティからも利用できます。 +- {{domxref("Element/mouseleave_event", "mouseleave")}} + - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の外へ移動したときに発行されます。 + {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティからも利用できます。 +- {{domxref("Element/mousemove_event", "mousemove")}} + - : ポインティングデバイス（ふつうはマウス）が、要素の上を移動したときに発行されます。 + {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティからも利用できます。 +- {{domxref("Element/mouseout_event", "mouseout")}} + - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発行されます。 + {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティからも利用できます。 +- {{domxref("Element/mouseover_event", "mouseover")}} + - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発行されます。 + {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティからも利用できます。 +- {{domxref("Element/mouseup_event", "mouseup")}} + - : ポインティングデバイスのボタンが要素の上で離されたときに発行されます。 + {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティからも利用できます。 +- {{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}} + - : trackpadtouchscreen の上の圧力が変化するたびに発行されます。 +- {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} + - : 「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発行されます。 +- {{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}} + - : {{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発行されます。 +- {{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}} + - : 「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発行されます。 + +### タッチイベント + +- {{domxref("Element/touchcancel_event", "touchcancel")}} + - : 1 つ以上のタッチ点が実装依存の理由により破棄された（例えば、タッチ点が多く作られすぎた）場合に発行されます。 + {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティからも利用できます。 +- {{domxref("Element/touchend_event", "touchend")}} + - : 1 つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。 + {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティからも利用できます。 +- {{domxref("Element/touchmove_event", "touchmove")}} + - : 1 つ以上のタッチ点がタッチ面上で移動したときに発行されます。 + {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティからも利用できます。 +- {{domxref("Element/touchstart_event", "touchstart")}} + - : 1 つ以上のタッチ点がタッチ面に配置されたときに発行されます。 + {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティからも利用できます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/innerhtml/index.html b/files/ja/web/api/element/innerhtml/index.html deleted file mode 100644 index bd63262b6c..0000000000 --- a/files/ja/web/api/element/innerhtml/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Element.innerHTML -slug: Web/API/Element/innerHTML -tags: - - API - - DOM - - DOM Parsing - - Element - - Parsing HTML - - Property - - Reference - - innerHTML - - プロパティ -browser-compat: api.Element.innerHTML -translation_of: Web/API/Element/innerHTML ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary">{{domxref("Element")}} オブジェクトの <strong><code>innerHTML</code></strong> プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。</span></p> - -<div class="note"><strong>メモ:</strong> {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが <code>(&)</code>, <code>(<)</code>, <code>(>)</code> の文字を含むテキストの子ノードを持っている場合、 <code>innerHTML</code> はこれらの文字を HTML エンティティの <code>"&amp;"</code>, <code>"&lt;"</code>, <code>"&gt;"</code> としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。</div> - -<p>要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js">const <var>content</var> = <var>element</var>.innerHTML; - -<var>element</var>.innerHTML = <var>htmlString</var>; -</pre> - -<h3 id="Value">値</h3> - -<p>要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 <code>innerHTML</code> に値を設定すると、要素のすべての子孫を削除して、 <var>htmlString</var> の文字列で与えられた HTML を解析して構築されたノードに置き換えます。</p> - -<h3 id="Exceptions">例外</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>正しくない形の HTML の文字列を使用して <code>innerHTML</code> の値を設定しようとした場合。</dd> - <dt><code>NoModificationAllowedError</code></dt> - <dd>親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。</dd> -</dl> - -<h2 id="Usage_notes">使用上のメモ</h2> - -<p><code>innerHTML</code> プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。</p> - -<h3 id="Reading_the_HTML_contents_of_an_element">要素の HTML コンテンツの読み取り</h3> - -<p><code>innerHTML</code> を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。</p> - -<pre class="brush: js">let contents = myElement.innerHTML;</pre> - -<p>これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。</p> - -<div class="note"> - <p><strong>メモ:</strong> 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。</p> -</div> - -<h3 id="Replacing_the_contents_of_an_element">要素の中身の置き換え</h3> - -<p><code>innerHTML</code> の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。</p> - -<p>例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。</p> - -<pre class="brush: js">document.body.innerHTML = "";</pre> - -<p>この例は文書の現在の HTML マークアップを走査し、 <code>"<"</code> の文字を HTML エンティティの <code>"&lt;"</code> に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 <code>innerHTML</code> の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。</p> - -<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + - document.documentElement.innerHTML.replace(/</g,"&lt;") + - "</pre>";</pre> - -<h4 id="Operational_details">操作の詳細</h4> - -<p><code>innerHTML</code> に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。</p> - -<ol> - <li>指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。</li> - <li>中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 <code><template></code> 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ1で生成された新しい <code>DocumentFragment</code> で置き換えます。</li> - <li>その他の要素はすべて、要素の内容を新しい <code>DocumentFragment</code> のノードで置き換えます。</li> -</ol> - -<h3 id="Security_considerations">セキュリティの考慮事項</h3> - -<p>ウェブページにテキストを挿入するために <code>innerHTML</code> を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。</p> - -<pre class="brush: js">const name = "John"; -// 'el' を HTML の DOM 要素と想定します -el.innerHTML = name; // この場合は無害 - -// ... - -name = "<script>alert('I am John in an annoying alert!')</script>"; -el.innerHTML = name; // この場合は無害</pre> - -<p>これは{{interwiki("wikipedia", "クロスサイトスクリプティング")}}攻撃のように見えますが、結果的には無害です。 HTML5 では <code>innerHTML</code> で挿入された {{HTMLElement("script")}} タグは<a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">実行するべきではない</a>と定義しているからです。</p> - -<p>しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために <code>innerHTML</code> を使用するたびに、セキュリティリスクは残ります。</p> - -<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; -el.innerHTML = name; // アラートが表示される</pre> - -<p>このため、プレーンテキストを挿入するときには <code>innerHTML</code> を使用せず、代わりに {{domxref("Node.textContent")}} を使用することをお勧めします。これは渡されたコンテンツを HTML として解釈するのではなく、生テキストとして挿入します。</p> - -<div class="warning"> -<p><strong>警告:</strong> プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 <code>innerHTML</code> は多くの場合、コードが拒絶される結果になります。例えば、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">ブラウザー拡張機能</a>の中で <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"><code>innerHTML</code> を使用した場合</a>、拡張機能を <a href="https://addons.mozilla.org/">addons.mozilla.org</a> に提出すると、自動レビュープロセスを通過できないでしょう。</p> -</div> - -<h2 id="Example">例</h2> - -<p>この例は <code>innerHTML</code> を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。</p> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">function log(msg) { - var logElem = document.querySelector(".log"); - - var time = new Date(); - var timeStr = time.toLocaleTimeString(); - logElem.innerHTML += timeStr + ": " + msg + "<br/>"; -} - -log("Logging mouse events inside this container..."); -</pre> - -<p><code>log()</code> 関数は {{jsxref("Date")}} オブジェクトから {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから <code>"log"</code> クラスのボックスにメッセージを追加します。</p> - -<p>{{domxref("MouseEvent")}} ベースのイベント ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。</p> - -<pre class="brush: js">function logEvent(event) { - var msg = "Event <strong>" + event.type + "</strong> at <em>" + - event.clientX + ", " + event.clientY + "</em>"; - log(msg); -}</pre> - -<p>それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。</p> - -<pre class="brush: js">var boxElem = document.querySelector(".box"); - -boxElem.addEventListener("mousedown", logEvent); -boxElem.addEventListener("mouseup", logEvent); -boxElem.addEventListener("click", logEvent); -boxElem.addEventListener("mouseenter", logEvent); -boxElem.addEventListener("mouseleave", logEvent);</pre> - -<h3 id="HTML">HTML</h3> - -<p>この例の HTML はとても単純です。</p> - -<pre class="brush: html"><div class="box"> - <div><strong>Log:</strong></div> - <div class="log"></div> -</div></pre> - -<p><code>"box"</code> クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが <code>"log"</code> である <code><div></code> は、ログテキスト自身のコンテナーです。</p> - -<h3 id="CSS">CSS</h3> - -<p>以下の CSS が例の内容をスタイル付けします。</p> - -<pre class="brush: css">.box { - width: 600px; - height: 300px; - border: 1px solid black; - padding: 2px 4px; - overflow-y: scroll; - overflow-x: auto; -} - -.log { - margin-top: 8px; - font-family: monospace; -}</pre> - -<h3 id="Result">結果</h3> - -<p>結果の内容はこのように見えます。マウスが移動してボックスを出入りしたり、中でクリックしたりすると、ログが出力されるのを見ることができます。</p> - -<p>{{EmbedLiveSample("Example", 640, 350)}}</p> - -<h2 id="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 Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> - <td>{{Spec2('DOM Parsing')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.textContent")}} および {{domxref("HTMLElement.innerText")}}</li> - <li>{{domxref("Element.insertAdjacentHTML()")}}</li> - <li>HTML を解析して DOM ツリーへ入れる: {{domxref("DOMParser")}}</li> - <li>XML または HTML をシリアライズして DOM ツリーへ入れる: {{domxref("XMLSerializer")}}</li> -</ul> diff --git a/files/ja/web/api/element/innerhtml/index.md b/files/ja/web/api/element/innerhtml/index.md new file mode 100644 index 0000000000..f3e54ca72c --- /dev/null +++ b/files/ja/web/api/element/innerhtml/index.md @@ -0,0 +1,245 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - DOM Parsing + - Element + - Parsing HTML + - プロパティ + - リファレンス + - innerHTML + - プロパティ +browser-compat: api.Element.innerHTML +translation_of: Web/API/Element/innerHTML +--- +{{APIRef("DOM")}} + +{{domxref("Element")}} オブジェクトの **`innerHTML`** プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。 + +要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。 + +## 構文 + +```js +const content = element.innerHTML; + +element.innerHTML = content; +``` + +### 値 + +要素の子孫を HTML にシリアライズしたものを含んだ {{domxref("DOMString")}} です。 `innerHTML` に値を設定すると、要素のすべての子孫を削除して、 _htmlString_ の文字列で与えられた HTML を解釈して構築されたノードに置き換えます。 + +### 例外 + +- `SyntaxError` {{domxref("DOMException")}} + - : 正しくない形の HTML の文字列を使用して `innerHTML` の値を設定しようとした場合に発生します。 +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : 親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合に発生します。 + +## 使用上のメモ + +`innerHTML` プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。 + +### 要素の HTML コンテンツの読み取り + +`innerHTML` を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。 + +```js +let contents = myElement.innerHTML; +``` + +これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。 + +> **Note:** 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。 + +### 要素の中身の置き換え + +`innerHTML` の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。 + +> **Note:** 挿入される文字列に悪意のある内容が含まれる可能性がある場合、[セキュリティ上のリスク](#セキュリティの考慮事項)になります。 +> ユーザーが提供したデータを挿入する場合は、 {{domxref("Element.SetHTML()")}} を使用するよう常に検討してください。こちらは挿入する前に無害化を行います。 + +例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。 + +```js +document.body.innerHTML = ""; +``` + +この例は文書の現在の HTML マークアップを走査し、 `"<"` の文字を HTML エンティティの `"<"` に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 `innerHTML` の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。 + +```js +document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"<") + + "</pre>"; +``` + +#### 操作の詳細 + +`innerHTML` に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。 + +1. 指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。 +2. 中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 `<template>` 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ 1 で生成された新しい `DocumentFragment` で置き換えます。 +3. その他の要素はすべて、要素の内容を新しい `DocumentFragment` のノードで置き換えます。 + +### HTML を要素に適用 + +`innerHTML` に値を設定すると、既存の要素の一つに新しい内容物を追加します。 + +例えば、新しいリスト項目 (`<li>`) を既存のリスト (`<ul>`) に追加することができます。 + +#### HTML + +```html +<ul id="list"> + <li><a href="#">Item 1</a></li> + <li><a href="#">Item 2</a></li> + <li><a href="#">Item 3</a></li> +</ul> +``` + +#### JavaScript + +```js +const list = document.getElementById("list"); + +list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`; +``` + +なお、 `innerHTML` を使用して HTML 要素を追加すると（例えば `el.innerHTML += "<a href='...'>link</a>"`）、以前設定したイベントリスナーを取り除くことになります。 +つまり、この方法で HTML 要素を追加すると、以前設定したイベントリスナーで待ち受けすることができなくなります。 + +### セキュリティの考慮事項 + +ウェブページにテキストを挿入するために `innerHTML` を使用している例は珍しくありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。 + +```js +const name = "John"; +// 'el' を HTML の DOM 要素と想定します +el.innerHTML = name; // この場合は無害 + +// ... + +name = "<script>alert('I am John in an annoying alert!')</script>"; +el.innerHTML = name; // この場合は無害 +``` + +これは{{interwiki("wikipedia", "クロスサイトスクリプティング")}}攻撃のように見えますが、結果的には無害です。 HTML5 では `innerHTML` で挿入された {{HTMLElement("script")}} タグは[実行するべきではない](https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0)と定義しているからです。 + +しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために `innerHTML` を使用するたびに、セキュリティリスクは残ります。 + +```js +const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // アラートが表示される +``` + +このため、 `innerHTML` を使用する代わりに次のようにしてください。 + +- {{domxref("Element.SetHTML()")}} で DOM に挿入する前にテキストを無害化する。 +- プレーンテキストを挿入する際には、代わりに {{domxref("Node.textContent")}} を使用する。これは渡されたコンテンツを HTML として解釈するのではなく、生のテキストとして挿入します。 + +> **Warning:** プロジェクトに対して何らかの形のセキュリティレビューが行われた場合、 `innerHTML` は多くの場合で、コードが拒絶される結果になります。 +> 例えば、[ブラウザー拡張機能](/ja/docs/Mozilla/Add-ons/WebExtensions)の中で [`innerHTML` を使用した場合](https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation)、拡張機能を [addons.mozilla.org](https://addons.mozilla.org/) に提出すると、自動レビュープロセスを通過できないでしょう。 +> 代替方法については、[ページへ外部コンテンツを安全に挿入する](/ja/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page)を参照してください。 + +## 例 + +この例は `innerHTML` を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。 + +### JavaScript + +```js +function log(msg) { + var logElem = document.querySelector(".log"); + + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} + +log("Logging mouse events inside this container..."); +``` + +`log()` 関数は {{jsxref("Date")}} オブジェクトから {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから `"log"` クラスのボックスにメッセージを追加します。 + +{{domxref("MouseEvent")}} ベースのイベント ({{domxref("Element/mousedown_event", "mousedown")}}, {{domxref("Element/click_event", "click")}}, {{domxref("Element/mouseenter_event", "mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。 + +```js +function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +} +``` + +それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。 + +```js +var boxElem = document.querySelector(".box"); + +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent); +``` + +### HTML + +この例の HTML はとても単純です。 + +```html +<div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div> +``` + +`"box"` クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。 +クラスが `"log"` である `<div>` は、ログテキスト自身のコンテナーです。 + +### CSS + +以下の CSS が例の内容をスタイル付けします。 + +```css +.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} + +.log { + margin-top: 8px; + font-family: monospace; +} +``` + +### 結果 + +結果の内容はこのように見えます。 +マウスを移動してボックスを出入りさせたり、中でクリックしたりすると、ログが出力されるのを見ることができます。 + +{{EmbedLiveSample("Example", 640, 350)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.textContent")}} および {{domxref("HTMLElement.innerText")}} +- {{domxref("Element.insertAdjacentHTML()")}} +- {{domxref("Element.outerHTML")}} +- {{domxref("Element.setHTML")}} +- HTML または XML を解釈して DOM ツリーへ: {{domxref("DOMParser")}} +- DOM ツリーを XML 文字列へシリアライズ: {{domxref("XMLSerializer")}} diff --git a/files/ja/web/api/element/localname/index.html b/files/ja/web/api/element/localname/index.html deleted file mode 100644 index b92152fbfa..0000000000 --- a/files/ja/web/api/element/localname/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Element.localName -slug: Web/API/Element/localName -tags: -- API -- DOM -- NeedsBrowserCompatibility -- NeedsMobileBrowserCompatibility -- Property -- Reference -browser-compat: api.Element.localName -translation_of: Web/API/Element/localName ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Element.localName</code></strong> は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js"><var>name</var> = <var>element</var>.localName -</pre> - -<h3 id="Return_value">返値</h3> - -<p>要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。 -</p> - -<h2 id="Example">例</h2> - -<p>(<code>text/xml</code> や <code>application/xhtml+xml</code> のような、XML のコンテンツタイプで送出される必要があります。)</p> - -<pre class="brush:xml"><html xmlns="http://www.w3.org/1999/xhtml" - xmlns:svg="http://www.w3.org/2000/svg"> -<head> - <script type="application/javascript"><![CDATA[ - function test() { - var text = document.getElementById('text'); - var circle = document.getElementById('circle'); - - text.value = "<svg:circle> has:\n" + - "localName = '" + circle.localName + "'\n" + - "namespaceURI = '" + circle.namespaceURI + "'"; - } - ]]></script> -</head> -<body onload="test()"> - <svg:svg version="1.1" - width="100px" height="100px" - viewBox="0 0 100 100"> - <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> - </svg:svg> - <textarea id="text" rows="4" cols="55"/> -</body> -</html> -</pre> - -<h2 id="Notes">注</h2> - -<p>ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、<code>ecomm:partners</code> という修飾名において、 <code>partners</code> はローカル名、<code>ecomm</code> は接頭辞です。</p> - -<pre class="brush:xml"><ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> - <ecomm:partners> - <ecomm:partner id="1001">Tony's Syrup Warehouse - </ecomm:partner> - </ecomm:partner> -</ecomm:business> -</pre> - -<div class="note"> -<p><strong>注: </strong>{{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML要素と XHTML DOM における XHTML要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。</p> -</div> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element.namespaceURI")}}</li> - <li>{{domxref("Element.prefix")}}</li> - <li>{{domxref("Attr.localName")}}</li> -</ul> diff --git a/files/ja/web/api/element/localname/index.md b/files/ja/web/api/element/localname/index.md new file mode 100644 index 0000000000..c676607ad5 --- /dev/null +++ b/files/ja/web/api/element/localname/index.md @@ -0,0 +1,85 @@ +--- +title: Element.localName +slug: Web/API/Element/localName +tags: +- API +- DOM +- NeedsBrowserCompatibility +- NeedsMobileBrowserCompatibility +- プロパティ +- リファレンス +browser-compat: api.Element.localName +translation_of: Web/API/Element/localName +--- +{{APIRef("DOM")}} + +**`Element.localName`** は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。 + +## 構文 + +```js +name = element.localName +``` + +### 返値 + +要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。 + +## 例 + +(`text/xml` や `application/xhtml+xml` のような、XML のコンテンツタイプで送出される必要があります。) + +```xml +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <script type="application/javascript"><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></script> +</head> +<body onload="test()"> + <svg:svg version="1.1" + width="100px" height="100px" + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> + <textarea id="text" rows="4" cols="55"/> +</body> +</html> +``` + +## メモ + +ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、`ecomm:partners` という修飾名において、 `partners` はローカル名、`ecomm` は接頭辞です。 + +```xml +<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +``` + +> **Note:** {{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML 要素と XHTML DOM における XHTML 要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.namespaceURI")}} +- {{domxref("Element.prefix")}} +- {{domxref("Attr.localName")}} diff --git a/files/ja/web/api/element/namespaceuri/index.html b/files/ja/web/api/element/namespaceuri/index.html deleted file mode 100644 index ebf84fb77c..0000000000 --- a/files/ja/web/api/element/namespaceuri/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Node.namespaceURI -slug: Web/API/Element/namespaceURI -tags: - - DOM - - Gecko - - Gecko DOM Reference - - 要更新 -translation_of: Web/API/Node/namespaceURI -original_slug: Web/API/Node/namespaceURI ---- -<p>{{ ApiRef() }}</p> -<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> -<p>ノードの名前空間 URI か、もし指定されていなければ <code>null</code>(読み込み専用)。</p> -<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> -<pre class="eval"><i>namespace</i> =<i>node</i>.namespaceURI -</pre> -<ul> - <li><code>namespace</code> は指定されたノードの名前空間 URI を表す文字列です。</li> -</ul> -<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> -<p>この断片では、ノードの <a href="/ja/DOM/element.localName">localName</a> と <code>namespaceURI</code> が試験されます。もし、<code>namespaceURI</code> が XUL の名前空間を返し、<code>localName</code> が "browser" を返せば、そのノードは XUL の <code><browser/></code> と理解されます。</p> -<pre>if (node.localName == "browser" && - node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { - // これは XUL browser です。 -} -</pre> -<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> -<p>これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。</p> -<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="/ja/DOM/element.nodeType">種類</a>全てに属すノードと, <code><a href="/ja/DOM/document.createElement">document.createElement</a></code> のような DOM Level 1 のメソッドで作られたノードでは、常に <code>namespaceURI</code> は <code>null</code> です。</p> -<p>DOM Level 2 の <a href="/ja/DOM/document.createElementNS">document.createElementNS</a> メソッドを使うことで、特定の <code>namespaceURI</code> を持った要素を作ることができます。</p> -<p><a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a> によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。</p> -<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></p> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: XML Namespaces</a></p> diff --git a/files/ja/web/api/element/namespaceuri/index.md b/files/ja/web/api/element/namespaceuri/index.md new file mode 100644 index 0000000000..cd898c602d --- /dev/null +++ b/files/ja/web/api/element/namespaceuri/index.md @@ -0,0 +1,58 @@ +--- +title: Element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - API + - DOM + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - プロパティ + - リファレンス +browser-compat: api.Element.namespaceURI +translation_of: Web/API/Element/namespaceURI +original_slug: Web/API/Node/namespaceURI +--- +{{APIRef("DOM")}} + +**`Element.namespaceURI`** は読み取り専用のプロパティで、この要素の名前空間 URI を返します。この要素が名前空間に所属していない場合は `null` を返します。 + +## 構文 + +```js +namespace = element.namespaceURI +``` + +## 例 + +このスニペットでは、ある要素が {{domxref("Element.localName", "localName")}} と `namespaceURI` で調べます。この `namespaceURI` は XUL の名前空間を返し、 `localName` は "browser" を返すので、このノードは XUL の `<browser/>` と解釈されます。 + +```js +if (element.localName == "browser" && + element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { + // これは XUL browser です +} +``` + +## メモ + +これは、スコープ内の名前空間宣言を調べて名前空間を検索した結果であり、計算値ではありません。ノードの名前空間 URI は、ノードの生成時に凍結されます。 + +Firefox 3.5 以前では、 HTML 文書中の HTML 要素の名前空間 URI は `null` です。それ以降のバージョンでは、 HTML5 に準拠し、 XHTML と同様に [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) となります。 + +DOM Level 2 のメソッド [document.createElementNS](/en-US/docs/Web/API/Document/createElementNS) を用いると、指定した `namespaceURI` を持つ要素を作成することができる。 + +DOM はそれ自体で名前空間の検証を行ったり強制したりすることはありません。必要な検証を行うのは DOM アプリケーションに任されています。また、一度特定の要素に関連付けられた名前空間接頭辞は、変更することができないことに注意しましょう。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.localName")}} +- {{domxref("Element.prefix")}} +- {{domxref("Attr.namespaceURI")}} diff --git a/files/ja/web/api/element/nextelementsibling/index.md b/files/ja/web/api/element/nextelementsibling/index.md new file mode 100644 index 0000000000..ea24a59878 --- /dev/null +++ b/files/ja/web/api/element/nextelementsibling/index.md @@ -0,0 +1,59 @@ +--- +title: Element.nextElementSibling +slug: Web/API/Element/nextElementSibling +tags: + - API + - DOM + - Element + - プロパティ +browser-compat: api.Element.nextElementSibling +translation_of: Web/API/Element/nextElementSibling +--- +{{APIRef("DOM")}} + +**`Element.nextElementSibling`** は読み取り専用のプロパティで、この要素の親の子リスト内ですぐ次にある要素を返します。このノードがリストの最後のノードであった場合は `null` を返します。 + +## 構文 + +```js +// ゲッター +element = el.nextElementSibling; + +// セッターなし。読み取り専用プロパティ +``` + +## 例 + +```html +<div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> + +<script type="text/javascript"> + let el = document.getElementById('div-01').nextElementSibling; + console.log('Siblings of div-01:'); + while (el) { + console.log(el.nodeName); + el = el.nextElementSibling; + } +</script> +``` + +この例は読み込み時に、コンソールに以下のような出力を行います。 + +``` +Siblings of div-01: +DIV +SCRIPT +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.previousElementSibling")}} diff --git a/files/ja/web/api/element/outerhtml/index.html b/files/ja/web/api/element/outerhtml/index.html deleted file mode 100644 index 1b476879bf..0000000000 --- a/files/ja/web/api/element/outerhtml/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Element.outerHTML -slug: Web/API/Element/outerHTML -tags: - - API - - DOM - - DOM Parsing - - Element - - Parsing - - Property - - Reference - - Serialization - - Serializing - - outerHTML -translation_of: Web/API/Element/outerHTML ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>outerHTML</code></strong> は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。</p> - -<p>要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>content</var> = <var>element</var>.outerHTML; - -<var>element</var>.outerHTML = <var>htmlString</var>; -</pre> - -<h3 id="Value" name="Value">値</h3> - -<p><code>outerHTML</code> の値を読み取ると、 <code><var>element</var></code> およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 <code>outerHTML</code> の値を設定すると、その要素とそのすべての子孫を、指定された <code><var>htmlString</var></code> を解釈して構築された新しい DOM ツリーで置き換えます。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd><code>outerHTML</code> に正しくない HTML の文字列を使用して設定しようとした場合。</dd> - <dt><code>NoModificationAllowedError</code></dt> - <dd><code>outerHTML</code> を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>要素の <code>outerHTML</code> プロパティの値を得る例を示します。</p> - -<pre class="brush: js">// HTML: -// <div id="d"><p>Content</p><p>Further Elaborated</p></div> - -d = document.getElementById("d"); -console.log(d.outerHTML); - -// 次の文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' -// が、コンソールウィンドウに出力されます。 -</pre> - -<p>次の例では、 <code>outerHTML</code> プロパティに値を設定し、ノードを置換します。</p> - -<pre class="brush: js">// HTML: -// <div id="container"><div id="d">This is a div.</div></div> - -container = document.getElementById("container"); -d = document.getElementById("d"); -console.log(container.firstChild.nodeName); // "DIV" が記録される - -d.outerHTML = "<p>This paragraph replaced the original div.</p>"; -console.log(container.firstChild.nodeName); // "P" が記録される - -// #d の div 要素はもはや文書ツリーの一部ではなく、 -// 新たな段落に置き換えられました。 -</pre> - -<h2 id="Notes" name="Notes">メモ</h2> - -<p>要素が親要素を持たない場合、その <code>outerHTML</code> プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。</p> - -<pre class="brush: js">var div = document.createElement("div"); -div.outerHTML = "<div class=\"test\">test</div>"; -console.log(div.outerHTML); // output: "<div></div>"</pre> - -<p>また、文書の中で要素が置換された場合も、 <code>outerHTML</code> プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。</p> - -<pre class="brush: js">var p = document.getElementsByTagName("p")[0]; -console.log(p.nodeName); // "P" を表示 -p.outerHTML = "<div>This div replaced a paragraph.</div>"; -console.log(p.nodeName); // "P" のまま -</pre> - -<h2 id="Specification" name="Specification">仕様書</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 Parsing', '#outerhtml', 'Element.outerHTML')}}</td> - <td>{{ Spec2('DOM Parsing') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.Element.outerHTML")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>DOM ツリーを XML または HTML にシリアライズ: {{domxref("XMLSerializer")}}</li> - <li>XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}</li> - <li>{{domxref("HTMLElement.outerText")}}</li> -</ul> diff --git a/files/ja/web/api/element/outerhtml/index.md b/files/ja/web/api/element/outerhtml/index.md new file mode 100644 index 0000000000..3b6278d25e --- /dev/null +++ b/files/ja/web/api/element/outerhtml/index.md @@ -0,0 +1,132 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - API + - DOM + - DOM 解釈 + - Element + - NeedsMobileBrowserCompatibility + - Parsing + - プロパティ + - リファレンス + - シリアライズ + - Serializing + - outerHTML +browser-compat: api.Element.outerHTML +translation_of: Web/API/Element/outerHTML +--- +{{APIRef("DOM")}} + +**`outerHTML`** は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで、指定された文字列を解釈したノードの要素に置き換えることができます。 + +要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。 + +## 構文 + +```js +var content = element.outerHTML; + +element.outerHTML = htmlString; +``` + +### 値 + +`outerHTML` の値を読み取ると、 `element` およびその子孫を HTML にシリアライズしたものを含む {{domxref("DOMString")}} が返されます。 `outerHTML` の値を設定すると、その要素とそのすべての子孫を、指定された `htmlString` を解釈して構築された新しい DOM ツリーで置き換えます。 + +### 例外 + +- `SyntaxError` {{domxref("DOMException")}} + - : `outerHTML` に有効ではない HTML の文字列を使用して設定しようとした場合に発生します。 +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : `outerHTML` を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。 + +## 例 + +要素の `outerHTML` プロパティの値を得る例を示します。 + +### HTML + +```html +<div id="d"> + <p>Content</p> + <p>Further Elaborated</p> +</div> +``` + +### Javascript + +```js +var d = document.getElementById("d"); +console.log(d.outerHTML); + +// 文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' +// がコンソールウィンドウに書き出されます。 +``` + +次の例では、 `outerHTML` プロパティに値を設定し、ノードを置換します。 + +### HTML + +```html +<div id="container"> + <div id="d">これは div です。</div> +</div> +``` + +### Javascript + +```js +var container = document.getElementById("container"); +var d = document.getElementById("d"); + +console.log(container.firstElementChild.nodeName); // "DIV" と出力 + +d.outerHTML = "<p>この段落は元の div を置き換えたものです。</p>"; + +console.log(container.firstElementChild.nodeName); // "P" と出力 + +// #d の div 要素は文書ツリーの一部ではなくなり、 +// 新たな段落に置き換えられました。 +``` + +## メモ + +要素が親要素を持たない場合、その `outerHTML` プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。 + +```js +var div = document.createElement("div"); +div.outerHTML = "<div class=\"test\">test</div>"; +console.log(div.outerHTML); // output: "<div></div>" +``` + +また、文書の中で要素が置換された場合も、 `outerHTML` プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。 + +```js +var p = document.getElementsByTagName("p")[0]; +console.log(p.nodeName); // shows: "P" +p.outerHTML = "<div>This div replaced a paragraph.</div>"; +console.log(p.nodeName); // still "P"; +``` + +返値には HTML エスケープされた属性が入ります。 + +```js +var anc = document.createElement("a"); +anc.href = "https://developer.mozilla.org?a=b&c=d"; +console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&c=d'></a>" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- DOM ツリーを XML 文字列にシリアライズ: {{domxref("XMLSerializer")}} +- XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}} +- {{domxref("HTMLElement.outerText")}} diff --git a/files/ja/web/api/element/part/index.md b/files/ja/web/api/element/part/index.md new file mode 100644 index 0000000000..ea93a70d1a --- /dev/null +++ b/files/ja/web/api/element/part/index.md @@ -0,0 +1,59 @@ +--- +title: Element.part +slug: Web/API/Element/part +tags: + - API + - Element + - プロパティ + - リファレンス + - part +browser-compat: api.Element.part +--- +{{ ApiRef("DOM") }} + +**`part`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素の部品識別子（すなわち `part` 属性を使用して設定されたもの）を {{domxref("DOMTokenList")}} で返します。これらはシャドウ DOM の部品を {{cssxref("::part")}} 擬似要素でスタイル付けするために使用することができます。 + +## 構文 + +```js +let elementPartList = element.part +``` + +## 例 + +以下は、 [shadow-part](https://mdn.github.io/web-components-examples/shadow-part/) の例から抜粋したものです。ここでは、 `part` 属性を使用してシャドウ部品を見つけ、 `part` プロパティを使用して各タブの部品識別子を変更し、タブがクリックされたときに正しいスタイルがアクティブなタブに適用されるようにしています。 + +```js +let tabs = []; +let children = this.shadowRoot.children; + +for(let elem of children) { + if(elem.getAttribute('part')) { + tabs.push(elem); + } +} + +tabs.forEach((tab) => { + tab.addEventListener('click', (e) => { + tabs.forEach((tab) => { + tab.part = 'tab'; + }) + e.target.part = 'tab active'; + }) + + console.log(tab.part); +}) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("::part")}} +- {{htmlattrxref("part")}} diff --git a/files/ja/web/api/element/prefix/index.html b/files/ja/web/api/element/prefix/index.html deleted file mode 100644 index b2baf67888..0000000000 --- a/files/ja/web/api/element/prefix/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Element.prefix -slug: Web/API/Element/prefix -tags: -- API -- DOM -- NeedsBrowserCompatibility -- NeedsMobileBrowserCompatibility -- Property -- Reference -browser-compat: api.Element.prefix -translation_of: Web/API/Element/prefix ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>Element.prefix</strong></code> は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は <code>null</code> を返します。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js"><var>string</var> = <var>element</var>.prefix -</pre> - -<h2 id="Examples">例</h2> - -<p>次の例はコンソールに "x" を記録します。</p> - -<pre class="brush:xml"><x:div onclick="console.log(this.prefix)"/> -</pre> - -<h2 id="Notes">注</h2> - -<p>これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。</p> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element.namespaceURI")}}</li> - <li>{{domxref("Element.localName")}}</li> - <li>{{domxref("Attr.prefix")}}</li> -</ul> diff --git a/files/ja/web/api/element/prefix/index.md b/files/ja/web/api/element/prefix/index.md new file mode 100644 index 0000000000..e45b334480 --- /dev/null +++ b/files/ja/web/api/element/prefix/index.md @@ -0,0 +1,48 @@ +--- +title: Element.prefix +slug: Web/API/Element/prefix +tags: +- API +- DOM +- NeedsBrowserCompatibility +- NeedsMobileBrowserCompatibility +- プロパティ +- リファレンス +browser-compat: api.Element.prefix +translation_of: Web/API/Element/prefix +--- +{{APIRef("DOM")}} + +**`Element.prefix`** は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は `null` を返します。 + +## 構文 + +```js +string = element.prefix +``` + +## 例 + +次の例はコンソールに "x" を記録します。 + +```xml +<x:div onclick="console.log(this.prefix)"/> +``` + +## 注 + +これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.namespaceURI")}} +- {{domxref("Element.localName")}} +- {{domxref("Attr.prefix")}} diff --git a/files/ja/web/api/element/previouselementsibling/index.md b/files/ja/web/api/element/previouselementsibling/index.md new file mode 100644 index 0000000000..510b6efcc7 --- /dev/null +++ b/files/ja/web/api/element/previouselementsibling/index.md @@ -0,0 +1,68 @@ +--- +title: Element.previousElementSibling +slug: Web/API/Element/previousElementSibling +tags: + - API + - DOM + - Element + - プロパティ + - 読み取り専用 + - リファレンス +browser-compat: api.Element.previousElementSibling +translation_of: Web/API/Element/nextElementSibling +--- +{{APIRef("DOM")}} + +**`Element.previousElementSibling`** は読み取り専用のプロパティで、この要素 ({{domxref("Element")}}) の親の子リスト内ですぐ前にある要素を返します。このノードがリストの最初のノードであった場合は `null` を返します。 + +## 構文 + +```js +// ゲッター +element = el.previousElementSibling; + +// セッターなし。読み取り専用プロパティ +``` + +## 例 + +```html +<div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> +<li>This is a list item</li> +<li>This is another list item</li> +<div id="div-03">Here is div-03</div> + +<script> + let el = document.getElementById('div-03').previousElementSibling; + document.write('<p>Siblings of div-03</p><ol>'); + while (el) { + document.write('<li>' + el.nodeName + '</li>'); + el = el.previousElementSibling; + } + document.write('</ol>'); +</script> +``` + +この例は読み込み時に、ぺ0時に以下のような出力を行います。 + +``` +Siblings of div-03 + + 1. LI + 2. LI + 3. DIV + 4. DIV +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.nextElementSibling")}} diff --git a/files/ja/web/api/element/replacechildren/index.md b/files/ja/web/api/element/replacechildren/index.md new file mode 100644 index 0000000000..75e0ceab80 --- /dev/null +++ b/files/ja/web/api/element/replacechildren/index.md @@ -0,0 +1,157 @@ +--- +title: Element.replaceChildren() +slug: Web/API/Element/replaceChildren +tags: + - API + - DOM + - メソッド + - Node + - Element + - リファレンス + - replaceChildren +browser-compat: api.Element.replaceChildren +translation_of: Web/API/Element/replaceChildren +--- +{{APIRef("DOM")}} + +**`Element.replaceChildren()`** メソッドは、 {{domxref("Node")}} の既存の子ノードを、指定された新しい一連の子で置き換えます。 {{domxref("DOMString")}} または {{domxref("Node")}} オブジェクトを指定することができます。 + +## 構文 + +```js +replaceChildren(...nodesOrDOMStrings) +``` + +### 引数 + +- `nodesOrDOMStrings` + - : 一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで、この `Element` の既存の子を置き換えるものです。置き換えるオブジェクトが指定されなかった場合は、 `Element` の子ノードは空になります。 + +### 例外 + +- `HierarchyRequestError` {{DOMxRef("DOMException")}} + - : [ノードツリーの制約](https://dom.spec.whatwg.org/#concept-node-tree)に違反したときに発生します。 + +## 例 + +### ノードを空にする + +`replaceChildren()` は、ノードからすべての子ノードを取り除くための非常に便利なメカニズムを提供します。引数を指定せずに、親ノードで呼び出すと実現できます。 + +```js +myNode.replaceChildren(); +``` + +### 要素間でノードを移行 + +`replaceChildren()` を使えば、冗長なループコードに頼ることなく、要素間で簡単にノードを転送することができます。例えば、パーティーの料理を選択するための簡単なアプリケーションがあるとします。この HTML は次のようなものになるでしょう。 + +```html +<h2>パーティーの食べ物リスト</h2> + +<main> + <div> + <label for="no">No thanks!</label> + + <select id="no" multiple size="10"> + <option>りんご</option> + <option>オレンジ</option> + <option>ぶどう</option> + <option>バナナ</option> + <option>キウイフルーツ</option> + <option>チョコレートクッキー</option> + <option>ピーナッツクッキー</option> + <option>チョコレートバー</option> + <option>ハムサンド</option> + <option>チーズサンド</option> + <option>ファラフェルサンド</option> + <option>アイスクリーム</option> + <option>ゼリー</option> + <option>人参スティックとフムス</option> + <option>マルゲリータピザ</option> + <option>ぺぱろーにぴざ</option> + <option>ビーガン野菜ピザ</option> + </select> + </div> + + <div class="buttons"> + <button id="to-yes">"Yes" へ移動 --></button> + <button id="to-no"><-- "No" へ移動</button> + </div> + + <div> + <label for="yes">Yes please!</label> + + <select id="yes" multiple size="10"> + + </select> + </div> +</main> +``` + +簡単な CSS を使って、 2 つの選択リストを並べ、その間にコントロールボタンを配置するのが理にかなっているでしょう。 + +```css +main { + display: flex; +} + +div { + margin-right: 20px; +} + +label, button { + display: block; +} + +.buttons { + display: flex; + flex-flow: column; + justify-content: center; +} + +select { + width: 200px; +} +``` + +ここでやりたいことは、 "yes" ボタンが押されたときに "no" リストで選択されているオプションを "yes" リストに転送し、 "no" ボタンが押されたときに "yes" リストで選択されているオプションを "no" リストに転送することです。 + +このイベントハンドラーは、転送したい選択済みのオプションを 1 つの定数に、転送先のリスト内の既存のオプションを別の定数にまとめます。そして、オプションを転送するリストに対して `replaceChildren()` を呼び出し、スプレッド演算子を用いて両方の定数に含まれるすべてのオプションを渡します。 + +```js +const noSelect = document.getElementById('no'); +const yesSelect = document.getElementById('yes'); +const noBtn = document.getElementById('to-no'); +const yesBtn = document.getElementById('to-yes'); + +yesBtn.addEventListener('click', () => { + const selectedTransferOptions = document.querySelectorAll('#no option:checked'); + const existingYesOptions = document.querySelectorAll('#yes option'); + yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions); +}); + +noBtn.addEventListener('click', () => { + const selectedTransferOptions = document.querySelectorAll('#yes option:checked'); + const existingNoOptions = document.querySelectorAll('#no option'); + noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions); +}); +``` + +最終的な結果は次のようになります。 + +{{EmbedLiveSample('Transferring_nodes_between_elements', '100%', '350')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.prepend()")}} +- {{domxref("Element.append()")}} +- {{domxref("NodeList")}} diff --git a/files/ja/web/api/element/requestpointerlock/index.md b/files/ja/web/api/element/requestpointerlock/index.md new file mode 100644 index 0000000000..908db13eb9 --- /dev/null +++ b/files/ja/web/api/element/requestpointerlock/index.md @@ -0,0 +1,40 @@ +--- +title: Element.requestPointerLock() +slug: Web/API/Element/requestPointerLock +tags: + - API + - DOM + - 実験的 + - メソッド + - NeedsExample + - PointerEvent + - リファレンス + - mouse lock +browser-compat: api.Element.requestPointerLock +translation_of: Web/API/Element/requestPointerLock +--- +{{ APIRef("DOM") }}{{ SeeCompatTable }} + +**`Element.requestPointerLock()`** メソッドで、ポインターをこの要素にロックすることを非同期にリクエストすることができます。 + +リクエストが成功したか失敗したかを追跡するには、 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} および {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} イベントを {{domxref("Document")}} レベルで待ち受けする必要があります。 + +## 構文 + +```js +instanceOfElement.requestPointerLock(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{ domxref("Document.pointerLockElement") }} +- {{ domxref("Document.exitPointerLock()") }} +- [ポインターロック](/ja/docs/Web/API/Pointer_Lock_API) diff --git a/files/ja/web/api/element/scrollheight/index.html b/files/ja/web/api/element/scrollheight/index.html deleted file mode 100644 index a2146b9db5..0000000000 --- a/files/ja/web/api/element/scrollheight/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Element.scrollHeight -slug: Web/API/Element/scrollHeight -tags: - - API - - CSSOM View - - NeedsDHTMLRemovalInExample - - Property - - Reference -translation_of: Web/API/Element/scrollHeight ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Element.scrollHeight</code></strong> は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。</p> - -<p><code>scrollHeight</code> の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その <code>scrollHeight</code> は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。</p> - -<div class="note"> -<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>elemScrollHeight</var> = <var>element</var>.scrollHeight;</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>整数値で、要素の scrollHeight ピクセル値に対応します。</p> - -<h2 id="Example" name="Example">例</h2> - -<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> -<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> -<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> - -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> - -<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - -<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> -</div> -<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 225px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> - -<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p> - -<h2 id="Problems_and_solutions" name="Problems_and_solutions">問題と解決方法</h2> - -<h3 id="要素が完全にスクロールされたかどうかを判定する">要素が完全にスクロールされたかどうかを判定する</h3> - -<p>次の等式は、要素がスクロールの終点にあると <code>true</code> になり、それ以外は <code>false</code> になります。</p> - -<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight -</pre> - -<p>コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。</p> - -<pre class="syntaxbox notranslate">window.getComputedStyle(element).overflowY === 'visible' -window.getComputedStyle(element).overflowY !== 'hidden' -</pre> - -<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight のデモ</h2> - -<p>{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><form name="registration"> - <p> - <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. -Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus -neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at -velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus -ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. -Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, -mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta -at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent -dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas -luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem -sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue -turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. -Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in -ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse -platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat -consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et -a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam -pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum -ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit -interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer -laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, -nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. - </textarea> - </p> - <p> - <input type="checkbox" id="agree" name="accept" /> - <label for="agree">I agree</label> - <input type="submit" id="nextstep" value="Next" /> - </p> -</form></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">#notice { - display: inline-block; - margin-bottom: 12px; - border-radius: 5px; - width: 600px; - padding: 5px; - border: 2px #7FDF55 solid; -} - -#rules { - width: 600px; - height: 130px; - padding: 5px; - border: #2A9F00 solid 2px; - border-radius: 5px; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">function checkReading () { - if (checkReading.read) { - return; - } - checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; - document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; - checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text."; -} - -onload = function () { - var oToBeRead = document.getElementById("rules"); - checkReading.noticeBox = document.createElement("span"); - document.registration.accept.checked = false; - checkReading.noticeBox.id = "notice"; - oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); - oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); - oToBeRead.onscroll = checkReading; - checkReading.call(oToBeRead); -}</pre> - -<p>{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}</p> - -<h2 id="Specification" name="Specification">仕様書</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("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.scrollHeight")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li> - <li>{{domxref("Element.clientHeight")}}</li> - <li>{{domxref("HTMLElement.offsetHeight")}}</li> - <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li> -</ul> diff --git a/files/ja/web/api/element/scrollheight/index.md b/files/ja/web/api/element/scrollheight/index.md new file mode 100644 index 0000000000..cead8be682 --- /dev/null +++ b/files/ja/web/api/element/scrollheight/index.md @@ -0,0 +1,167 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +tags: + - API + - CSSOM View + - NeedsDHTMLRemovalInExample + - プロパティ + - リファレンス +browser-compat: api.Element.scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +{{APIRef("DOM")}} + +**`Element.scrollHeight`** は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。 + + + +`scrollHeight` の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その `scrollHeight` は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。 + +> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。 + +## 構文 + +```js +elemScrollHeight = element.scrollHeight; +``` + +### 値 + +整数値で、要素の scrollHeight ピクセル値に対応します。 + +## 問題と解決方法 + +## 要素が完全にスクロールされたかどうかの判定 + +`scrollTop` は丸められない数値で、 `scrollHeight` と `clientHeight` は丸められます。したがって、スクロール領域が下までスクロールされているかどうかを判断する唯一の方法は、スクロール量が何らかの閾値 (この例では `1`) に十分に近いかどうかを確認することです。 + +```js +Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1 +``` + +次の例は動作しません。 `scrollTop` が小数を含む可能性があるからです。 + +```js +element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight +``` + +### 要素がスクロール可能かどうかを判定 + +コンテナーは、スクロールしないがあふれる子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。 + +```js +window.getComputedStyle(element).overflowY === 'visible' +window.getComputedStyle(element).overflowY !== 'hidden' +``` + +## 例 + +### ユーザーがテキストを読んだかどうかをチェック + +{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。 + +以下のデモにあるチェックボックスは無効になっており、テキストエリアの内容が最後までスクロールするまでチェックして同意を表すことができなくなっています。 + +#### HTML + +```html +<form name="registration"> + <p> + <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. +Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus +neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at +velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus +ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. +Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, +mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta +at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent +dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas +luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem +sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue +turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. +Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in +ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse +platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat +consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et +a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam +pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum +ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit +interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer +laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, +nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. + </textarea> + </p> + <p> + <input type="checkbox" id="agree" name="accept" /> + <label for="agree">I agree</label> + <input type="submit" id="nextstep" value="Next" /> + </p> +</form> +``` + +#### CSS + +```css +#notice { + display: inline-block; + margin-bottom: 12px; + border-radius: 5px; + width: 600px; + padding: 5px; + border: 2px #7FDF55 solid; +} + +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +} +``` + +#### JavaScript + +```js +function checkReading () { + if (checkReading.read) { + return; + } + checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text."; +} + +onload = function () { + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); +} +``` + +### 結果 + +{{EmbedLiveSample('Checking_that_the_user_has_read_a_text', '640', '400')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [MSDN: + Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer + 9](<https://docs.microsoft.com/previous-versions/hh781509(v=vs.85)>) +- {{domxref("Element.clientHeight")}} +- {{domxref("HTMLElement.offsetHeight")}} +- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) diff --git a/files/ja/web/api/element/scrollleft/index.html b/files/ja/web/api/element/scrollleft/index.html deleted file mode 100644 index 4a593af238..0000000000 --- a/files/ja/web/api/element/scrollleft/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Element.scrollLeft -slug: Web/API/Element/scrollLeft -tags: - - API - - CSSOM View - - Property - - Reference - - プロパティ -translation_of: Web/API/Element/scrollLeft ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Element.scrollLeft</code></strong> プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。</p> - -<p>要素の {{cssxref("direction")}} が <code>rtl</code> (right-to-left、右書き) の場合、 <code>scrollLeft</code> が <code>0</code> のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。</p> - -<div class="blockIndicator warning"> -<p>画面拡大を使用するシステムでは、 <code>scrollLeft</code> が小数になることがあります。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Getting_the_value" name="Getting_the_value">値の取得</h3> - -<pre class="syntaxbox">// スクロールしたピクセル数を取得 -var <em>sLeft</em> = <em>element</em>.scrollLeft; -</pre> - -<p><code>sLeft</code> は <code>element</code> が左端からスクロールしたピクセル数を整数で表現したものです。</p> - -<h3 id="Setting_the_value" name="Setting_the_value">値の設定</h3> - -<pre class="syntaxbox">// スクロールしたピクセル数を設定 -<em>element</em>.scrollLeft = 10; -</pre> - -<p><code>scrollLeft</code> は任意の整数値で設定することができます。しかし、</p> - -<ul> - <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li> - <li>指定された値が <code>0</code> より小さかったら (右書きの要素では <code>0</code> より大きかったら)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li> - <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollLeft</code> は最大値に設定されます。</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container"> - <div id="content">ボタンをクリックすると右にスライドします。</div> -</div> - -<button id="slide" type="button">右へスライド</button></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#container { - width: 100px; - height: 100px; - border: 1px solid #ccc; - overflow-x: scroll; -} - -#content { - width: 250px; - background-color: #ccc; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">const button = document.getElementById('slide'); - -button.onclick = function () { - document.getElementById('container').scrollLeft += 20; -};</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<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('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.scrollLeft")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> - <li>{{domxref("Element.scrollTop")}}</li> - <li>{{domxref("Element.scrollTo()")}}</li> -</ul> diff --git a/files/ja/web/api/element/scrollleft/index.md b/files/ja/web/api/element/scrollleft/index.md new file mode 100644 index 0000000000..0d7dc3bbb4 --- /dev/null +++ b/files/ja/web/api/element/scrollleft/index.md @@ -0,0 +1,98 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - CSSOM View + - プロパティ + - リファレンス +browser-compat: api.Element.scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +{{APIRef("DOM")}} + +**`Element.scrollLeft`** プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。 + +要素の {{cssxref("direction")}} が `rtl` (right-to-left、右書き) の場合、 `scrollLeft` が `0` のときにスクロールバーが右端の位置（スクロールする内容の開始位置）にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。 + +> **Warning:** 画面拡大を使用するシステムでは、 `scrollLeft` が小数になることがあります。 + +## 構文 + +### 値の取得 + +```js +// スクロールしたピクセル数を取得 +var sLeft = element.scrollLeft; +``` + +`sLeft` は `element` が左端からスクロールしたピクセル数を整数で表現したものです。 + +### 値の設定 + +```js +// スクロールしたピクセル数を設定 +element.scrollLeft = 10; +``` + +`scrollLeft` は任意の整数値で設定することができます。しかし、 + +- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 `scrollLeft` は `0` に設定されます。 +- 指定された値が `0` より小さかったら (右書きの要素では `0` より大きかったら)、 `scrollLeft` は `0` に設定されます。 +- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollLeft` は最大値に設定されます。 + +## 例 + +### HTML + +```html +<div id="container"> + <div id="content">ボタンをクリックすると右へスライドします。</div> +</div> + +<button id="slide" type="button">右へスライド</button> +``` + +### CSS + +```css +#container { + width: 100px; + height: 100px; + border: 1px solid #ccc; + overflow-x: scroll; +} + +#content { + width: 250px; + background-color: #ccc; +} +``` + +### JavaScript + +```js +const button = document.getElementById('slide'); + +button.onclick = function () { + document.getElementById('container').scrollLeft += 20; +}; +``` + +### 結果 + +{{EmbedLiveSample("Example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [MSDN's Measuring Element Dimension and Location](<https://msdn.microsoft.com/library/hh781509(v=vs.85).aspx> "MSDN Measuring Element Dimension and Location") +- {{domxref("Element.scrollTop")}} +- {{domxref("Element.scrollTo()")}} diff --git a/files/ja/web/api/element/scrollleftmax/index.md b/files/ja/web/api/element/scrollleftmax/index.md new file mode 100644 index 0000000000..a1801fb0fb --- /dev/null +++ b/files/ja/web/api/element/scrollleftmax/index.md @@ -0,0 +1,35 @@ +--- +title: Element.scrollLeftMax +slug: Web/API/Element/scrollLeftMax +tags: + - API + - CSSOM View + - Element + - 標準外 + - プロパティ + - 読み取り専用 + - リファレンス +browser-compat: api.Element.scrollLeftMax +translation_of: Web/API/Element/scrollLeftMax +--- +{{APIRef("DOM")}}{{Non-standard_header}} + +**`Element.scrollLeftMax`** は読み取り専用のプロパティで、この要素で可能な最大の左スクロールオフセットを表す数値を返します。 + +## 構文 + +```js +var pxl = element.scrollLeftMax; +``` + +## 仕様書 + +_このプロパティはどの仕様書にも含まれていません。_ + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 他の軸で同じ情報を提供する {{domxref("Element.scrollTopMax")}}。 diff --git a/files/ja/web/api/element/scrolltop/index.html b/files/ja/web/api/element/scrolltop/index.html deleted file mode 100644 index 21f8478a46..0000000000 --- a/files/ja/web/api/element/scrolltop/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Element.scrollTop -slug: Web/API/Element/scrollTop -tags: - - API - - CSSOM View - - NeedsArtUpdate - - NeedsMarkupWork - - Property - - Reference - - プロパティ -translation_of: Web/API/Element/scrollTop ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><code><strong>Element.scrollTop</strong></code> プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。</span></p> - -<p>要素の <code>scrollTop</code> の値は、要素の上から最も上の<em>表示されている</em>コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 <code>scrollTop</code> の値は <code>0</code> になります。</p> - -<p><code>scrollTop</code> がルート要素 (<code><html></code> 要素) に対して使用されると、ウィンドウの <code>scrollY</code> が返されます。 <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">これは <code>scrollTop</code> の特例です</a>。</p> - -<div class="warning"> -<p>画面の拡大縮小を使用するシステムでは、 <code>scrollTop</code> が小数になることがあります。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">// スクロールしたピクセル数を取得 -var <var>intElemScrollTop</var> = someElement.scrollTop; -</pre> - -<p>このコードを実行した後、 <code><var>intElemScrollTop</var></code> はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。</p> - -<pre class="brush: js">// スクロールするピクセル数を設定 -<var>element</var>.scrollTop = <var>intValue</var>; -</pre> - -<p><code>scrollTop</code> は任意の整数値で設定することができます。しかし、</p> - -<ul> - <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "<strong>non-scrollable</strong>" のプロパティがある場合)、 <code>scrollTop</code> は <code>0</code> に設定されます。</li> - <li><code>scrollTop</code> は負の数には対応していません。代わりに、 <code>0</code> に戻ります。</li> - <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollTop</code> は最大値に設定されます。</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> -<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> -<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> -<em><strong>If you can see this, scrollTop = 0</strong></em> - -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -<strong><em>If you can see this, scrollTop is > 0</em></strong> - -<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -<strong><em>If you can see this, scrollTop is maxed-out</em></strong> - -<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> -</div> -<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> - -<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('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.scrollTop")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> - <li>{{domxref("Element.scrollLeft")}}</li> - <li>{{domxref("Element.scrollTo()")}}</li> -</ul> diff --git a/files/ja/web/api/element/scrolltop/index.md b/files/ja/web/api/element/scrolltop/index.md new file mode 100644 index 0000000000..898f8cc7bb --- /dev/null +++ b/files/ja/web/api/element/scrolltop/index.md @@ -0,0 +1,110 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - CSSOM View + - NeedsArtUpdate + - NeedsMarkupWork + - プロパティ + - リファレンス +browser-compat: api.Element.scrollTop +translation_of: Web/API/Element/scrollTop +--- +{{APIRef("DOM")}} + +**`Element.scrollTop`** プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。 + +要素の `scrollTop` の値は、要素の上から最も上の*表示されている*コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 `scrollTop` の値は `0` になります。 + +`scrollTop` がルート要素 (`<html>` 要素) に対して使用されると、ウィンドウの `scrollY` が返されます。[これは `scrollTop` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop)。 + +> **Warning:** 画面の拡大縮小を使用するシステムでは、 `scrollTop` が小数になることがあります。 + +## 構文 + +```js +// スクロールしたピクセル数を取得 +var intElemScrollTop = someElement.scrollTop; +``` + +このコードを実行した後、 `intElemScrollTop` はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。 + +```js +// スクロールするピクセル数を設定 +element.scrollTop = intValue; +``` + +`scrollTop` は任意の整数値で設定することができます。しかし、 + +- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "**non-scrollable**" のプロパティがある場合)、 `scrollTop` は `0` に設定されます。 +- `scrollTop` は負の数には対応していません。代わりに、 `0` に戻ります。 +- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollTop` は最大値に設定されます。 + +## 例 + +### 要素のスクロール + +この例で、破線の境界線の付いた内部のコンテナーをスクロールしてみて、 `scrollTop` の値がどのように変わるかを確認してください。 + +#### HTML + +```html + +<div id="container"> + <div id="scroller"> + <p>Far out in the uncharted backwaters of the unfashionable end + of the western spiral arm of the Galaxy lies a small unregarded + yellow sun. Orbiting this at a distance of roughly ninety-two million + miles is an utterly insignificant little blue green planet whose + ape-descended life forms are so amazingly primitive that they still + think digital watches are a pretty neat idea.</p> + </div> +</div> + +<div id="output">scrollTop: 0</div> +``` + +#### CSS + +```css +#scroller { + overflow: scroll; + height: 150px; + width: 150px; + border: 5px dashed orange; +} + +#output { + padding: 1rem 0; +} +``` + +#### JavaScript + +```js +const scroller = document.querySelector("#scroller"); +const output = document.querySelector("#output"); + +scroller.addEventListener("scroll", event => { + output.textContent = `scrollTop: ${scroller.scrollTop}`; +}); +``` + +#### 結果 + +{{EmbedLiveSample("Scrolling_an_element", 400, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [MSDN's Measuring Element Dimension and Location](<https://msdn.microsoft.com/library/hh781509(v=vs.85).aspx> "MSDN Measuring Element Dimension and Location") +- {{domxref("Element.scrollLeft")}} +- {{domxref("Element.scrollTo()")}} diff --git a/files/ja/web/api/element/scrollwidth/index.html b/files/ja/web/api/element/scrollwidth/index.html deleted file mode 100644 index 5f3e98892d..0000000000 --- a/files/ja/web/api/element/scrollwidth/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Element.scrollWidth -slug: Web/API/Element/scrollWidth -tags: - - API - - CSSOM View - - Property - - Reference - - プロパティ -translation_of: Web/API/Element/scrollWidth ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Element.scrollWidth</code></strong> は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。</p> - -<p><code>scrollWidth</code> の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 <code>scrollWidth</code> は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。</p> - -<div class="note"> -<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre> - -<p><code><var>xScrollWidth</var></code> はピクセル単位の <code><var>element</var></code> のコンテンツの幅です。</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:html"><!DOCTYPE html> -<html> -<head> - <title>Example</title> - <style> - div { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - #aDiv { - width: 100px; - } - - button { - margin-bottom: 2em; - } - </style> -</head> - -<body> - <div id="aDiv"> - FooBar-FooBar-FooBar-FooBar - </div> - <button id="aButton"> - Check for overflow - </button> - - <div id="anotherDiv"> - FooBar-FooBar-FooBar-FooBar - </div> - <button id="anotherButton"> - Check for overflow - </button> -</body> -<script> - var buttonOne = document.getElementById('aButton'), - buttonTwo = document.getElementById('anotherButton'), - divOne = document.getElementById('aDiv'), - divTwo = document.getElementById('anotherDiv'); - - //check to determine if an overflow is happening - function isOverflowing(element) { - return (element.scrollWidth > element.offsetWidth); - } - - function alertOverflow(element) { - if (isOverflowing(element)) { - alert('Contents are overflowing the container.'); - } else { - alert('No overflows!'); - } - } - - buttonOne.addEventListener('click', function() { - alertOverflow(divOne); - }); - - buttonTwo.addEventListener('click', function() { - alertOverflow(divTwo); - }); -</script> -</html> -</pre> - -<h2 id="Specification" name="Specification">仕様書</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("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.Element.scrollWidth")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element.clientWidth")}}</li> - <li>{{domxref("HTMLElement.offsetWidth")}}</li> - <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li> -</ul> diff --git a/files/ja/web/api/element/scrollwidth/index.md b/files/ja/web/api/element/scrollwidth/index.md new file mode 100644 index 0000000000..3a8a21d6b8 --- /dev/null +++ b/files/ja/web/api/element/scrollwidth/index.md @@ -0,0 +1,115 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - API + - CSSOM View + - NeedsMarkupWork + - NeedsSpecTable + - プロパティ + - リファレンス +browser-compat: api.Element.scrollWidth +translation_of: Web/API/Element/scrollWidth +--- +{{APIRef("DOM")}} + +**`Element.scrollWidth`** は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。 + +`scrollWidth` の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 `scrollWidth` は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。 + +> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。 + +## 構文 + +```js +var xScrollWidth = element.scrollWidth; +``` + +`xScrollWidth` はピクセル単位の `element` のコンテンツの幅です。 + +## 例 + +```html +<!DOCTYPE html> +<html> + <head> + <title>Example</title> + <style> + div { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #aDiv { + width: 100px; + } + + button { + margin-bottom: 2em; + } + </style> + </head> + + <body> + <div id="aDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="aButton"> + Check for overflow + </button> + + <div id="anotherDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="anotherButton"> + Check for overflow + </button> + </body> + <script> + var buttonOne = document.getElementById('aButton'), + buttonTwo = document.getElementById('anotherButton'), + divOne = document.getElementById('aDiv'), + divTwo = document.getElementById('anotherDiv'); + + //check to determine if an overflow is happening + function isOverflowing(element) { + return (element.scrollWidth > element.offsetWidth); + } + + function alertOverflow(element) { + if (isOverflowing(element)) { + alert('Contents are overflowing the container.'); + } else { + alert('No overflows!'); + } + } + + buttonOne.addEventListener('click', function() { + alertOverflow(divOne); + }); + + buttonTwo.addEventListener('click', function() { + alertOverflow(divTwo); + }); + </script> +</html> +``` + +### 結果 + +{{EmbedLiveSample('Example')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.clientWidth")}} +- {{domxref("HTMLElement.offsetWidth")}} +- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) diff --git a/files/ja/web/api/element/sethtml/index.md b/files/ja/web/api/element/sethtml/index.md new file mode 100644 index 0000000000..f00984c539 --- /dev/null +++ b/files/ja/web/api/element/sethtml/index.md @@ -0,0 +1,73 @@ +--- +title: Element.setHTML() +slug: Web/API/Element/setHTML +tags: + - HTML 無害化 API + - メソッド + - Element.setHTML + - setHTML + - 実験的 +browser-compat: api.Element.setHTML +translation_of: Web/API/Element/setHTML +--- +{{SeeCompatTable}}{{DefaultAPISidebar("HTML Sanitizer API")}} + +**`setHTML()`** は {{domxref("Element")}} インターフェイスのメソッドで、 HTML の文字列を解釈して無害化し、この要素のサブツリーとして DOM に挿入します。 +信頼できない HTML の文字列を挿入するために、 {{domxref("Element.innerHTML")}} の代わりに使用してください。 + +解釈処理では、現在の要素のコンテキストで無効な HTML 文字列の要素を削除し、無害化処理では、安全でない、あるいは不要な要素、属性、コメントを削除します。 +既定の `Sanitizer()` 設定では、{{HTMLElement("script")}} タグ、カスタム要素、コメントを含む XSS 関連の入力が取り除かれます。 +無害化の設定は {{domxref("Sanitizer.Sanitizer", "Sanitizer()")}} コンストラクターのオプションを使用してカスタマイズすることができます。 + +> **Note:** 対象となる要素がまだない場合など、後の時点で DOM に文字列を挿入する必要がある場合は、このメソッドの代わりに {{domxref("Sanitizer.sanitizeFor()")}} を使用してください。 + +## 構文 + +```js +setHTML(input, sanitizer) +``` + +### 引数 + +- `input` + - : 無害化する HTML を定義する文字列です。 +- `sanitizer` + - : {{domxref("Sanitizer")}} で、入力されたどの要素を無害化するかを定義します。 + +### 返値 + +`undefined` + +### 例外 + +なし。 + +## 例 + +以下のコードは、 HTML の文字列を無害化して、 id が `target` である `Element` に挿入する方法を示しています。 + +```js +const unsanitized_string = "abc <script>alert(1)</script> def"; // 無害化前の HTML の文字列 +const sanitizer = new Sanitizer(); // 既定の無害化 + +// id が "target" の Element を取得し、無害化された文字列を設定します。 +document.getElementById("target").setHTML(unsanitized_string, sanitizer); + +// 結果 (文字列): "abc def" +``` + +> **Note:** この例では既定の無害化を使用しています。 +> {{domxref("Sanitizer/Sanitizer","Sanitizer")}} コンストラクターで無害化のオプションを構成することができます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Sanitizer.sanitizeFor()")}} +- {{domxref('HTML Sanitizer API')}} diff --git a/files/ja/web/api/element/tagname/index.html b/files/ja/web/api/element/tagname/index.html deleted file mode 100644 index e10c5acf43..0000000000 --- a/files/ja/web/api/element/tagname/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: element.tagName -slug: Web/API/Element/tagName -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Element/tagName ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>要素の名前を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>elementName</var> = element.tagName -</pre> -<ul> - <li><code>elementName</code> : 現在の要素の名前を含む文字列</li> -</ul> -<h2 id="Notes" name="Notes">注記</h2> -<p>XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、<code>tagName</code> は標準的な大文字で要素名を返します。 <code>tagName</code> の値は <a href="/ja/docs/Web/API/Node.nodeName">nodeName</a> の値と同じになります。</p> -<h2 id="Example" name="Example">例</h2> -<p>以下のようなマークアップを想定します。</p> -<pre class="brush:html"><span id="born">When I was born...</span> -</pre> -<p>上記 HTML に対し以下のスクリプトを実行した場合...</p> -<pre class="brush:js">var span = document.getElementById("born"); - -alert(span.tagName); -</pre> -<p>XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。</p> -<h2 id="Specifications" name="Specifications">仕様</h2> -<ul> - <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> -</ul> diff --git a/files/ja/web/api/element/tagname/index.md b/files/ja/web/api/element/tagname/index.md new file mode 100644 index 0000000000..520ec73461 --- /dev/null +++ b/files/ja/web/api/element/tagname/index.md @@ -0,0 +1,63 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - DOM リファレンス + - Element + - Gecko + - NeedsBrowserCompatibility + - プロパティ + - 読み取り専用 + - リファレンス + - tagName +browser-compat: api.Element.tagName +translation_of: Web/API/Element/tagName +--- +{{ApiRef("DOM")}} + +**`tagName`** は {{domxref("Element")}} インターフェイスのプロパティで、呼び出された要素のタグ名を返します。 + +例えば、この要素が {{HTMLElement("img")}} であれば、 `tagName` プロパティは `"IMG"` となります（HTML 文書の場合。 XML/XHTML 文書では大文字小文字が違うかもしれません）。 + +## 構文 + +```js +elementName = Element.tagName; +``` + +### 値 + +この要素のタグ名を示す文字列です。文字列が大文字であるかどうかは、文書型によって変わります。 + +- HTML 文書を表す DOM ツリーでは、タグ名は常に大文字に正規化されます。例えば、 `tagName` が {{HTMLElement("div")}} 要素で呼び出された場合は、 `"DIV"` を返します。 +- XML の DOM ツリー内にある要素のタグ名は、元の XML ファイルに書かれているのと大文字小文字が同じになります。 XML 文書に `"<SomeTag>"` タグがあった場合、 `tagName` プロパティの値は `"SomeTag"` になります。 + +{{domxref("Element")}} オブジェクトにおいては、 `tagName` の値は要素オブジェクトの継承元である {{domxref("Node")}} の {{domxref("Node.nodeName", "nodeName")}} プロパティの値と同じになります。 + +## 例 + +### HTML + +```html +<span id="born">When I was born...</span> +``` + +### JavaScript + +```js +var span = document.getElementById("born"); +console.log(span.tagName); +``` + +XHTML (および他の XML 形式) では、元の大文字小文字が保持されるので、元のタグ名が小文字で生成されている場合は `"span"` が出力されます。 +HTML では、元の文書を生成したときに大文字小文字のどちらが使われたかに関わらず、 `"SPAN"` と出力されます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/element/toggleattribute/index.md b/files/ja/web/api/element/toggleattribute/index.md new file mode 100644 index 0000000000..5f30bb6566 --- /dev/null +++ b/files/ja/web/api/element/toggleattribute/index.md @@ -0,0 +1,97 @@ +--- +title: Element.toggleAttribute() +slug: Web/API/Element/toggleAttribute +tags: + - API + - Element + - メソッド + - リファレンス +browser-compat: api.Element.toggleAttribute +translation_of: Web/API/Element/toggleAttribute +--- +{{APIRef("DOM")}} + +**`toggleAttribute()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素に対して論理属性をトグル切り替えします（存在する場合は取り除き、存在しない場合は追加します）。 + +## 構文 + +```js +toggleAttribute(name); +toggleAttribute(name, force); +``` + +### 引数 + +- `name` + - : {{domxref("DOMString")}} で、トグル切り替えしたい属性の名前を指定します。 HTML 文書内の HTML 要素に対して `toggleAttribute()` が呼び出されるとばれると、属性名は自動的に全て小文字に変換されます。 +- `force` {{optional_inline}} + - : 論理値で、以下の効果があります。 + - 指定されなかった場合、 `toggleAttribute` メソッドは `name` という名前の属性を「トグル切り替え」します。 — 存在すれば取り除き、存在しなければ追加します。 + - true であった場合、 `toggleAttribute` メソッドは、 `name` という名前の属性を追加します。 + - false であった場合、 `toggleAttribute` メソッドは `name` という名前の属性を取り除きます。 + +### 返値 + +**`name`** という属性が存在する状態になれば `true`、そうでなければ `false` となります。 + +### 例外 + +- `InvalidCharacterError` {{domxref("DOMException")}} + - : 指定された属性 `name` に、属性名として無効な文字が 1 文字以上含まれています。 + +## 例 + +次の例では、 `toggleAttribute()` を使って {{HTMLElement("input")}} の `disabled` 属性をトグル切り替えしています。 + +### HTML + +```html +<input value="text"> +<button>toggleAttribute("disabled")</button> +``` + +### JavaScript + +```js +var button = document.querySelector("button"); +var input = document.querySelector("input"); + +button.addEventListener("click", function(){ + input.toggleAttribute("disabled"); +}); +``` + +### 結果 + +{{ EmbedLiveSample('Example', '300', '50') }} + +{{DOMAttributeMethods}} + +## ポリフィル + +```js +if (!Element.prototype.toggleAttribute) { + Element.prototype.toggleAttribute = function(name, force) { + if(force !== void 0) force = !!force + + if (this.hasAttribute(name)) { + if (force) return true; + + this.removeAttribute(name); + return false; + } + if (force === false) return false; + + this.setAttribute(name, ""); + return true; + }; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/eventsource/onerror/index.html b/files/ja/web/api/eventsource/error_event/index.html index 1629027780..31df170d43 100644 --- a/files/ja/web/api/eventsource/onerror/index.html +++ b/files/ja/web/api/eventsource/error_event/index.html @@ -1,6 +1,6 @@ --- title: EventSource.onerror -slug: Web/API/EventSource/onerror +slug: Web/API/EventSource/error_event tags: - API - EventSource @@ -9,6 +9,7 @@ tags: - プロパティ - リファレンス translation_of: Web/API/EventSource/onerror +original_slug: Web/API/EventSource/onerror --- <div>{{APIRef('WebSockets API')}}</div> diff --git a/files/ja/web/api/eventsource/onmessage/index.html b/files/ja/web/api/eventsource/message_event/index.html index 0b0f8c7c6b..6b35ddf7d2 100644 --- a/files/ja/web/api/eventsource/onmessage/index.html +++ b/files/ja/web/api/eventsource/message_event/index.html @@ -1,6 +1,6 @@ --- title: EventSource.onmessage -slug: Web/API/EventSource/onmessage +slug: Web/API/EventSource/message_event tags: - API - EventSource @@ -10,6 +10,7 @@ tags: - プロパティ - リファレンス translation_of: Web/API/EventSource/onmessage +original_slug: Web/API/EventSource/onmessage --- <div>{{APIRef('WebSockets API')}}</div> diff --git a/files/ja/web/api/mediadevices/ondevicechange/index.html b/files/ja/web/api/mediadevices/devicechange_event/index.html index 6f63115726..8c65429674 100644 --- a/files/ja/web/api/mediadevices/ondevicechange/index.html +++ b/files/ja/web/api/mediadevices/devicechange_event/index.html @@ -1,7 +1,8 @@ --- title: MediaDevices.ondevicechange -slug: Web/API/MediaDevices/ondevicechange +slug: Web/API/MediaDevices/devicechange_event translation_of: Web/API/MediaDevices/ondevicechange +original_slug: Web/API/MediaDevices/ondevicechange --- <p>{{APIRef("Media Capture and Streams")}}</p> diff --git a/files/ja/web/api/mediaquerylist/onchange/index.html b/files/ja/web/api/mediaquerylist/change_event/index.html index 5539cdd3c7..388dad93d3 100644 --- a/files/ja/web/api/mediaquerylist/onchange/index.html +++ b/files/ja/web/api/mediaquerylist/change_event/index.html @@ -1,6 +1,6 @@ --- title: MediaQueryList.onchange -slug: Web/API/MediaQueryList/onchange +slug: Web/API/MediaQueryList/change_event tags: - API - CSSOM View @@ -13,6 +13,7 @@ tags: - プロパティ - メディアクエリ translation_of: Web/API/MediaQueryList/onchange +original_slug: Web/API/MediaQueryList/onchange --- <p>{{APIRef("CSSOM")}}</p> diff --git a/files/ja/web/api/mediastream/onaddtrack/index.html b/files/ja/web/api/mediastream/addtrack_event/index.html index 414ffbd27f..2bd4a0887a 100644 --- a/files/ja/web/api/mediastream/onaddtrack/index.html +++ b/files/ja/web/api/mediastream/addtrack_event/index.html @@ -1,7 +1,8 @@ --- title: MediaStream.onaddtrack -slug: Web/API/MediaStream/onaddtrack +slug: Web/API/MediaStream/addtrack_event translation_of: Web/API/MediaStream/onaddtrack +original_slug: Web/API/MediaStream/onaddtrack --- <p>{{APIRef("Media Streams API")}}</p> diff --git a/files/ja/web/api/navigator/online_and_offline_events/index.html b/files/ja/web/api/navigator/online_and_offline_events/index.html deleted file mode 100644 index 15fc35b7c8..0000000000 --- a/files/ja/web/api/navigator/online_and_offline_events/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: オンライン・オフラインイベント -slug: Web/API/Navigator/Online_and_offline_events -tags: - - AJAX - - DOM - - HTML5 - - Intermediate - - NeedsUpdate - - Offline web applications - - Web Development -translation_of: Web/API/Navigator/Online_and_offline_events -original_slug: Web/API/NavigatorOnLine/Online_and_offline_events ---- -<p>一部のブラウザーは、 <a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline イベント</a>を <a href="https://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 仕様書</a>に従って実装しています。</p> - -<h3 id="Overview">概要</h3> - -<p>オフラインに対応した良いウェブアプリケーションを構築するためには、アプリケーションが実際にオフラインになったタイミングを知る必要があります。また、アプリケーションが「オンライン」の状態に復帰したタイミングも知る必要があります。要件を分解すると次のようになります。</p> - -<ol> - <li>サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。</li> - <li>サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。</li> -</ol> - -<p>オンライン／オフラインイベントがこのプロセスを一般化するのに役立ちます。</p> - -<p>残念ながら、これらのイベントは完全には信頼できません。より高い信頼性が必要な場合や、 API がブラウザーに実装されていない場合は、サービスワーカーを使用したり <a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を利用してオフラインであるかどうかを検出することができます。</p> - -<h2 id="API">API</h2> - -<h3 id="navigator.onLine"><code>navigator.onLine</code></h3> - -<p><code><a href="/ja/docs/Web/API/Navigator/onLine">navigator.onLine</a></code> は、 <code>true</code>/<code>false</code> の値を保持しているプロパティです (オンラインの場合は <code>true</code>、オフラインの場合は <code>false</code>)。</p> - -<p>このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル→オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。</p> - -<blockquote cite="https://www.whatwg.org/specs/web-apps/current-work/#offline"> - <code>navigator.onLine</code> 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。</blockquote> - -<p>Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 <a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。</p> - -<p>このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。</p> - -<h3 id=".22online.22_and_.22offline.22_events">"<code>online</code>" および "<code>offline</code>" イベント</h3> - -<p><a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a> は 2 つの新しいイベントを導入しました。"<a href="/ja/docs/Web/API/document.ononline"><code>online</code></a>" and "<a href="/ja/docs/Web/API/document.onoffline"><code>offline</code></a>" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの <code><body></code> に発行されます。加えて、このイベントは <code>document.body</code> から <code>document</code> へとバブリングし、 <code>window</code> までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。</p> - -<p><a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。</p> - -<p>これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。</p> -<ul> - <li><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を、 <code>window</code>, <code>document</code>, <code>document.body</code> に対して使用します。</li> - <li><code>document</code> または <code>document.body</code> の <code>.ononline</code> または <code>.onoffline</code> プロパティを JavaScript の <code>Function</code> オブジェクトに設定します。(<strong>注意:</strong> <code>window.ononline</code> または <code>window.onoffline</code> は互換性の理由で動作しません)</li> - <li>HTML マークアップで <code><body></code> タグの <code>ononline="..."</code> または <code>onoffline="..."</code> 属性を指定します。</li> -</ul> - -<h2 id="Example">例</h2> - -<p>イベントが機能しているかどうかを確認するために、<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a>を用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。</p> - -<p>こちらが JavaScript 部分です。</p> - -<pre class="brush: js">window.addEventListener('load', function() { - var status = document.getElementById("status"); - var log = document.getElementById("log"); - - function updateOnlineStatus(event) { - var condition = navigator.onLine ? "online" : "offline"; - - status.className = condition; - status.innerHTML = condition.toUpperCase(); - - log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); - } - - window.addEventListener('online', updateOnlineStatus); - window.addEventListener('offline', updateOnlineStatus); -});</pre> - -<p>CSS 部分です。</p> - -<pre class="brush: css">#status { - position: fixed; - width: 100%; - font: bold 1em sans-serif; - color: #FFF; - padding: 0.5em; -} - -#log { - padding: 2.5em 0.5em 0.5em; - font: 1em sans-serif; -} - -.online { - background: green; -} - -.offline { - background: red; -} -</pre> - -<p>対応する HTML です。 <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p> - -<pre class="brush: html"><div id="status"></div> -<div id="log"></div> -<p>This is a test</p> -</pre> - -<p>実行例はこちらです。</p> - -<p>{{ EmbedLiveSample('Example', '100%', '150') }}</p> - -<h2 id="Notes">注</h2> - -<p>この API がブラウザに実装されていない場合は、サービスワーカーや <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。</p> - -<h2 id="References">参考文献</h2> - -<ul> - <li><a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG Web Applications 1.0 仕様の「Online/Offline イベント」の節</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Firefox に実装された online/offline イベントのバグ追跡</a>および<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">関連バグ</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a></li> - <li><a href="http://ejohn.org/blog/offline-events/">Online/Offline イベントの解説</a></li> -</ul> diff --git a/files/ja/web/api/navigator/wakelock/index.md b/files/ja/web/api/navigator/wakelock/index.md index 4385312dea..560d04b3ea 100644 --- a/files/ja/web/api/navigator/wakelock/index.md +++ b/files/ja/web/api/navigator/wakelock/index.md @@ -4,7 +4,7 @@ slug: Web/API/Navigator/wakeLock tags: - API - リファレンス - - Screen Wake Lock API + - 画面起動ロック API browser-compat: api.Navigator.wakeLock translation_of: Web/API/Navigator/wakeLock --- @@ -29,5 +29,5 @@ const wakeLock = navigator.wakeLock; ## 関連情報 - {{DOMxRef("WakeLock.request","WakeLock.request()")}} -- [Screen Wake Lock API](/en-US/docs/Web/API/Screen_Wake_Lock_API) +- [画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) - [Blog post - Stay awake with the Screen Wake Lock API](https://web.dev/wakelock/) diff --git a/files/ja/web/api/node/appendchild/index.html b/files/ja/web/api/node/appendchild/index.html deleted file mode 100644 index 3242491906..0000000000 --- a/files/ja/web/api/node/appendchild/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Node.appendChild -slug: Web/API/Node/appendChild -tags: - - API - - DOM - - Method - - Node - - Reference -translation_of: Web/API/Node/appendChild ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>Node.appendChild()</strong></code> メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。</p> - -<p>これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。<code>cloneNode</code> で作成したコピーは自動的に同期を保たないことに注意してください。</p> - -<p>このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre> - -<h3 id="引数">引数</h3> - -<h4 id="aChild">aChild</h4> - -<p>親ノードに追加する子ノード(要素)</p> - -<h3 id="戻り値">戻り値</h3> - -<p>追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。</p> - -<h2 id="Notes" name="Notes">注意</h2> - -<p><code>appendChild()</code> が子要素を返すため、メソッドチェーンが期待通りに動きません。:</p> - -<pre class="brush: js"><code>var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre> - -<p><code>aBlock</code> に <code><b></b></code> を与えただけでは期待通りに動きません。</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。 -var p = document.createElement("p"); -document.body.appendChild(p); -</pre> - -<h2 id="仕様">仕様</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-node-appendchild', 'Node.appendChild()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>{{SpecName("DOM3 Core")}} から変更なし。</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>{{SpecName("DOM2 Core")}} から変更なし。</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>{{SpecName("DOM1")}} から変更なし。</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>初期定義。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<p>{{Compat("api.Node.appendChild")}}</p> - -<div id="compat-mobile"></div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.removeChild()")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("Node.hasChildNodes()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> -</ul> diff --git a/files/ja/web/api/node/appendchild/index.md b/files/ja/web/api/node/appendchild/index.md new file mode 100644 index 0000000000..6abebeaac4 --- /dev/null +++ b/files/ja/web/api/node/appendchild/index.md @@ -0,0 +1,82 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - メソッド + - リファレンス +browser-compat: api.Node.appendChild +translation_of: Web/API/Node/appendChild +--- +{{APIRef("DOM")}} + +**`appendChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 `appendChild()` はその子ノードを現在の位置から新しい位置へ移動します（他のノードに追加する前に、そのノードを親ノードから取り除く必要はありません）。 + +これは、 1 つのノードが同時に文書の 2 か所に存在できないということです。したがって、すでにノードに親がある場合、最初にノードが取り除かれた後、新しい位置に追加されます。 +{{domxref("Node.cloneNode()")}} メソッドを使用すると、新しい親ノード以下に追加する前に、ノードのコピーを作成することができます。 +`cloneNode` で作成したコピーは自動的に同期されません。 + +指定された子ノードが {{domxref("DocumentFragment")}} であった場合、その +{{domxref("DocumentFragment")}} の内容全体が指定された親ノードの子ノードリストに移動します。 + +> **Note:** このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。 + +`appendChild()` は子要素を返すので、メソッドチェーンは動作しません。 + +```js +let aBlock = document.createElement('block').appendChild( document.createElement('b') ); +``` + +`aBlock` に `<b></b>` を追加するだけですが、 `block` に対して複数の `appendChild` を連鎖させるなど、それ以外の操作を連鎖せることはできません。 + +## 構文 + +```js +appendChild(aChild); +``` + +### 引数 + +- `aChild` + - : 指定された親ノードに追加するノード（ふつうは要素）。 + +### 返値 + +{{domxref("Node")}} で追加された子ノード (`aChild`) を返します。 +ただし、 `aChild` が {{domxref("DocumentFragment")}} であった場合は、空の {{domxref("DocumentFragment")}} を返します。 + +### 例外 + +- `HierarchyRequestError` {{domxref("DOMException")}} + - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。 + - `aChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。 + - `aChild` を挿入すると循環参照になる場合。すなわち `aChild` がこのノードの祖先である場合。 + - `aChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。 + - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。 + - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。 + - このノードの親が {{domxref("Document")}} で `aChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。 + -`aChild` を挿入すると {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。 + +## 例 + +```js +// 新しい段落要素を作成し、文書の body の末尾に追加します。 +let p = document.createElement("p"); +document.body.appendChild(p); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.insertBefore()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("Element.append()")}} diff --git a/files/ja/web/api/node/baseuri/index.md b/files/ja/web/api/node/baseuri/index.md new file mode 100644 index 0000000000..053fadb866 --- /dev/null +++ b/files/ja/web/api/node/baseuri/index.md @@ -0,0 +1,67 @@ +--- +title: Node.baseURI +slug: Web/API/Node/baseURI +tags: + - Node + - プロパティ + - 読み取り専用 +browser-compat: api.Node.baseURI +translation_of: Web/API/Node/baseURI +--- +{{APIRef("DOM")}} + +**`baseURI`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードを含む文書の絶対的なベース URL を返します。 + +ベース URL はブラウザーが絶対 URL を必要とするときに、相対 URL を解決するために使用されます。例えば、 HTML の {{HTMLElement("img")}} 要素の `src` 属性や、 SVG の `xlink:href` や `href` 属性を処理する場合などです。 + +このプロパティは読み取り専用ですが、値はプロパティがアクセスされるたびにアルゴリズムで決まりますので、状況が変化すると変化することがあります。 + +ベース URL は次のように決まります。 + +1. 既定で、ベース URL は文書の位置（{{domxref("window.location")}} で指定された通り）となります。 +2. これが HTML 文書であり、文書に {{HTMLElement("Base")}} 要素があった場合、*最初の* `Base` 要素の `href` の値があれば、代わりに使用されます。 + +## 値 + +{{domxref("Node")}} のベース URL を表す文字列です。 + +## 例 + +### \<base> なし + +```html +<output>Not calculated</output> +``` + +```js +const output = document.getElementsByTagName("output")[0]; +output.value = output.baseURI; +``` + +{{EmbedLiveSample("Without <base>", "100%", 40)}} + +### \<base> あり + +```html +<base href="https://developer.mozilla.org/modified_base_uri/"> +<output>Not calculated</output> +``` + +```js +const output = document.getElementsByTagName("output")[0]; +output.value = output.baseURI; +``` + +{{EmbedLiveSample("With <base>", "100%", 40)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("base")}} 要素 diff --git a/files/ja/web/api/node/childnodes/index.html b/files/ja/web/api/node/childnodes/index.html deleted file mode 100644 index 82a90460c6..0000000000 --- a/files/ja/web/api/node/childnodes/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Node.childNodes -slug: Web/API/Node/childNodes -tags: - - API - - DOM - - DOMリファレンス - - プロパティ - - リファレンス -translation_of: Web/API/Node/childNodes ---- -<p>{{ ApiRef() }}</p> - -<p><code><strong>Node.childNodes</strong></code>読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">let <var>nodeList</var> = <var>elementNodeReference</var>.childNodes; -</pre> - -<h2 id=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4" name=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4">例</h2> - -<h3 id="簡単な使用方法">簡単な使用方法</h3> - -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// 変数pargは<p>要素へのオブジェクト参照です</span> - -<span class="comment token">// まず、pargが子ノードを持っているかをチェックします</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span> - - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// for文を使って各ノードにchildren[i]としてアクセスします - // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<h3 id="ノードから全ての子を削除する">ノードから全ての子を削除する</h3> - -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// これは一例ですが、この方法でノードからすべての子ノードを削除することができます</span> -<span class="comment token">// let box = document.getElementById(/**/)</span>; - -<span class="keyword token">while</span> <span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{ - // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します</span> - box<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h2 id="注記">注記</h2> - -<p>ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえば<code>elementNodeReference.childNodes[1].nodeName</code> で名前を取得) を使用します。<br> - <br> - <code>document</code>オブジェクト自体には Doctype 宣言と root 要素 の2つの子があり、通常は<code>documentElement</code>と呼ばれます。 （(X)HTML文書ではこれが<code>HTML</code>要素です）<br> - <br> - <code>childNodes</code>にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。</p> - -<h2 id="仕様">仕様</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-node-childnodes', 'Node.childNodes')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - -<p>{{Compat("api.Node.childNodes")}}</p> - -<h2 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">関連情報</h2> - -<ul> - <li>{{ domxref("Node.firstChild") }}</li> - <li>{{ domxref("Node.lastChild") }}</li> - <li>{{ domxref("Node.nextSibling") }}</li> - <li>{{ domxref("Node.previousSibling") }}</li> - <li>{{ domxref("Element.children") }}</li> -</ul> diff --git a/files/ja/web/api/node/childnodes/index.md b/files/ja/web/api/node/childnodes/index.md new file mode 100644 index 0000000000..0e07d3ecb3 --- /dev/null +++ b/files/ja/web/api/node/childnodes/index.md @@ -0,0 +1,74 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.childNodes +translation_of: Web/API/Node/childNodes +--- +{{APIRef("DOM")}} + +**`childNodes`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、{{domxref("NodeList")}} で指定された要素の子{{domxref("Node", "ノード", "", 1)}}の生きたリストを返し、最初の子ノードは位置 `0` に割り当てられます。子ノードには要素、テキスト、コメントが含まれます。 + +> **Note:** {{domxref("NodeList")}} が生きたリストであるというのは、新しい子が追加されたり取り除かれたりするたびに、内容が変化するという意味です。 + +ノードのコレクションの項目はオブジェクトであり、文字列ではありません。ノードオブジェクトからデータを取得するには、そのプロパティを使用してください。例えば、最初の子ノードの名前を取得するには、 `elementNodeReference.childNodes[0].nodeName` を使うことで実現できます。 + +{{domxref("document")}} オブジェクト自体には 2 つの子があります。文書型宣言と、ルート要素、ふつうは `documentElement` として参照されます。 HTML 文書の場合、後者は {{HTMLElement("html")}} 要素です。 + +覚えておくべき重要なこととして、 `childNodes` には*すべての*子ノードが含まれ、テキストやコメントなどの要素以外のノードが含まれることです。 +要素のみが含まれるコレクションを取得するのであれば、 {{domxref("Element.children")}} を代わりに使用してください。 + +## 値 + +このノードの子を含む生きた {{domxref("NodeList")}} です。 + +> **Note:** `childNodes` を複数回呼び出しても、*同じ* {{domxref("NodeList")}} が返されます。 + +## 例 + +### 単純な使用方法 + +```js +// parg は <p> 要素へのオブジェクト参照です + +// まず、要素に子ノードがあるかどうかをチェックします +if (parg.hasChildNodes()) { + let children = parg.childNodes; + + for (let i = 0; i < children.length; i++) { + // それぞれの子を children[i] として処理します + // 注: リストは生きています。子を追加したり取り除いたりすると、リストの `length` が変わります + } +} +``` + +### ノードからすべてての子を削除 + +```js +// これはあるノードからすべての子を取り除くための一つの方法です +// box はある要素へのオブジェクト参照です + +while (box.firstChild) { + // リストは生きているので、呼び出されるたびにインデックスが変わります + box.removeChild(box.firstChild); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.firstChild")}} +- {{domxref("Node.lastChild")}} +- {{domxref("Node.nextSibling")}} +- {{domxref("Node.previousSibling")}} +- {{domxref("Element.children")}} diff --git a/files/ja/web/api/node/clonenode/index.html b/files/ja/web/api/node/clonenode/index.html deleted file mode 100644 index db00fc7a61..0000000000 --- a/files/ja/web/api/node/clonenode/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Node.cloneNode() -slug: Web/API/Node/cloneNode -translation_of: Web/API/Node/cloneNode ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>現在のノードの複製を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>); -</pre> - -<dl> - <dt><code>node</code></dt> - <dd>複製するノード</dd> - <dt><code>dupNode</code></dt> - <dd>新しく生成される <code>node</code> の複製</dd> - <dt><code>deep</code> {{optional_inline}}</dt> - <dd><code>node</code> の子孫ノードも複製する場合は <code>true</code> 、 <code>node</code> のみを複製する場合は <code>false</code> - <div class="note"> - <p><strong>注記:</strong> DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 <code>deep</code> は省略可能な引数です。省略された場合、 <code>deep</code> には <code>true</code> が渡され、深い複製を生成します。浅い複製を生成するには、 <code>deep</code> を <code>false</code> にする必要があります。</p> - - <p>以前のDOMの仕様を実装しているブラウザでは、 <code>deep</code> は必須の引数です。</p> - </div> - </dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">var p = document.getElementById("para1"); -var p_prime = p.cloneNode(true); -</pre> - -<h2 id="Notes" name="Notes">注記</h2> - -<p id="not-event-listeners">ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。<a href="/ja/docs/DOM/element.addEventListener" title="DOM/element.addEventListener"><code>addEventListener()</code></a> を使用したものや、要素のプロパティに代入されたもの (例: <code>node.onclick = fn;</code>) は複製されません。</p> - -<p><code><strong>cloneNode</strong></code> によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。</p> - -<p><code><strong>deep</strong></code> が <code>false</code> に設定されていると、どの子ノードも複製されません。 そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。</p> - -<p><code><strong>deep</strong></code> が <code>true</code> に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には <code>deep</code> を true と false のどちらに設定してもかまいません。</p> - -<div class="warning"><strong>注意:</strong> <code>cloneNode()</code> を使用すると、ドキュメント内で要素の id が重複する可能性があります。</div> - -<p>別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.cloneNode")}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li> - <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li> - <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (草案)</li> -</ul> diff --git a/files/ja/web/api/node/clonenode/index.md b/files/ja/web/api/node/clonenode/index.md new file mode 100644 index 0000000000..ff734aa6c0 --- /dev/null +++ b/files/ja/web/api/node/clonenode/index.md @@ -0,0 +1,61 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +tags: + - メソッド + - リファレンス +browser-compat: api.Node.cloneNode +translation_of: Web/API/Node/cloneNode +--- +{{APIRef("DOM")}} + +**`cloneNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、このメソッドが呼び出されたノードの複製を返します。 +引数でノードに含まれるサブツリーを一緒に複製するかどうかを制御できます。 + +ノードを複製すると、固有（インライン）のリスナーを含む、ノードのすべての属性とその値が複製されます。 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使って追加されたイベントリスナーや、要素のプロパティに代入されたイベントリスナー（例: `node.onclick = someFunction`）は複製されません。さらに、 {{HTMLElement("canvas")}} 要素では、描画された画像は複製されません。 + +> **Warning:** `cloneNode()` を使用すると、文書内で要素の ID が重複する可能性があります。 +> +> 元のノードに `id` 属性があり、複製を同じ文書に配置する場合は、複製の ID が重複しないように変更してください。 +> +> また、 `name` 属性も重複した名前を使わない場面では、変更する必要があるかもしれません。 + +**異なる**文書にノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。 + +## 構文 + +```js +cloneNode(); +cloneNode(deep); +``` + +### 引数 + +- `deep` {{optional_inline}} + + - : `true` の場合、ノードとそのサブツリーは、子ノードの {{domxref("Text")}} にあるテキストも含め複製されます。 + + `false` の場合、このノードのみが複製されます。 + サブツリーは、そのノードに含まれているテキストも含め、複製されません。 + + なお、 `deep` は {{HTMLElement("img")}} や {{HTMLElement("input")}} のような空要素には効果がありません。 + +### 返値 + +複製された {{domxref("Node")}} を返します。 +複製されたノードには、文書に所属する他のノードに {{domxref("Node.appendChild()")}} などを使用して追加されるまで、親ノードがなく、文書にも所属していません。 + +## 例 + +```js +let p = document.getElementById("para1") +let p_prime = p.cloneNode(true) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/comparedocumentposition/index.html b/files/ja/web/api/node/comparedocumentposition/index.html deleted file mode 100644 index 5865081c84..0000000000 --- a/files/ja/web/api/node/comparedocumentposition/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Node.compareDocumentPosition -slug: Web/API/Node/compareDocumentPosition -tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/compareDocumentPosition ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>node</var>.compareDocumentPosition( <var>otherNode</var> ) -</pre> - -<h3 id="パラメーター">パラメーター</h3> - -<dl> - <dt><code>node</code></dt> - <dd>比較元ノード</dd> - <dt><code>otherNode</code></dt> - <dd><em>node</em> と比較する別ノード</dd> -</dl> - -<h3 id="返り値">返り値</h3> - -<p>呼び出し元の <code>node</code> と {{domxref("Document")}} 内の <code>otherNode</code> の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。<code>compareDocumentPosition()</code> を呼び出した <code>node</code> と比較して、<code>otherNode</code> が 文書のより前にあり、かつ <code>node</code> を含んでいるならば、<code>DOCUMENT_POSITION_CONTAINS</code> と <code>DOCUMENT_POSITION_PRECEDING</code> のビットがセットされ、結果は0x0Aもしくは10進数の10になります。</p> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>戻り値は以下の値を持つビットマスクの何れかとなります。</p> - -<table> - <thead> - <tr> - <th scope="col">名称</th> - <th scope="col">値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td> - <td>1</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_PRECEDING</code></td> - <td>2</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_FOLLOWING</code></td> - <td>4</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_CONTAINS</code></td> - <td>8</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td> - <td>16</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td> - <td>32</td> - </tr> - </tbody> -</table> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js;highlight:[3]">var head = document.getElementsByTagName('head').item(0); - -if ( head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING ) { - console.log("head 要素は body 要素より前に記述されています。"); -} else { - console.log("head 要素は body 要素の前に配置しなくてはなりません。"); -} -</pre> - -<div class="note"> -<p><strong>注記:</strong> <code>compareDocumentPosition</code> の戻り値はビットマスクです。よって、有意な結果を得るには <a href="/ja/docs/JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a>の "<code>&</code>" を用いなくてはならない点に注意して下さい。</p> -</div> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table> - <thead> - <tr> - <th>仕様書</th> - <th>策定状況</th> - <th>コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition">DOM Level 3</a></td> - <td>Recommendation</td> - <td></td> - </tr> - <tr> - <td><a href="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition">DOM Standard</a></td> - <td>Living standard</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.contains")}}</li> - <li><a href="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li> -</ul> diff --git a/files/ja/web/api/node/comparedocumentposition/index.md b/files/ja/web/api/node/comparedocumentposition/index.md new file mode 100644 index 0000000000..346dc65e73 --- /dev/null +++ b/files/ja/web/api/node/comparedocumentposition/index.md @@ -0,0 +1,69 @@ +--- +title: Node.compareDocumentPosition() +slug: Web/API/Node/compareDocumentPosition +tags: + - メソッド + - リファレンス +browser-compat: api.Node.compareDocumentPosition +translation_of: Web/API/Node/compareDocumentPosition +--- +{{APIRef("DOM")}} + +**`compareDocumentPosition()`** は {{domxref("Node")}} インターフェイスのメソッドで、引数のノードの位置を、呼び出されたノードからの相対位置で報告します。 + +## 構文 + +```js +compareDocumentPosition(otherNode); +``` + +### 引数 + +- `otherNode` + - : {{domxref("Node")}} で、このノードとの相対位置を報告するノードを指定します。 + +### 返値 + +整数値で、 `otherNode` の `node` から見た相対位置を、以下の {{domxref("Node")}} の定数プロパティを組み合わせた[ビットマスク](<https://ja.wikipedia.org/wiki/マスク_(情報工学)>)で表します。 + +- `Node.DOCUMENT_POSITION_DISCONNECTED` (`1`) + - : 両方のノードが、異なる文書、または同じ文書の異なるツリーにあります。 +- `Node.DOCUMENT_POSITION_PRECEDING` (`2`) + - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で前にある（祖先ノード、前にある兄弟ノード、前にある兄弟ノードの子孫ノード、祖先ノードの前にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも前に位置します。 +- `Node.DOCUMENT_POSITION_FOLLOWING` (`4`) + - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で後にある（子孫ノード、後にある兄弟ノード、後にある兄弟ノードの子孫ノード、祖先ノードの後にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも後に位置します。 +- `Node.DOCUMENT_POSITION_CONTAINS` (`8`) + - : `otherNode` はこのノードの祖先ノードです。 +- `Node.DOCUMENT_POSITION_CONTAINED_BY` (`16`) + - : `otherNode` はこのノードの子孫ノードです。 +- `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` (`32`) + - : その結果は、任意や実装固有の動作に依存し、移植性は保証されません。 + +複数の条件に適合する場合、複数のビットが設定されることがあります。例えば、 `otherNode` が文書中でより先にあり、**_かつ_** `compareDocumentPosition()` が呼び出されたノードを含んでいれば、 `DOCUMENT_POSITION_CONTAINS` と `DOCUMENT_POSITION_PRECEDING` の両ビットが設定され、 `10` (`0x0A`) という値になります。 + +## 例 + +```js +const head = document.head; +const body = document.body; + +if (head.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING) { + console.log('正しい形式の文書です'); +} else { + console.error('<head> が <body> の前にありません'); +} +``` + +> **Note:** `compareDocumentPosition()` の返値はビットマスクですので、意味のある結果を得るには[ビット AND 演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND)を使用する必要があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef("Node.contains()")}} diff --git a/files/ja/web/api/node/contains/index.html b/files/ja/web/api/node/contains/index.html deleted file mode 100644 index 2947ce92d1..0000000000 --- a/files/ja/web/api/node/contains/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Node.contains -slug: Web/API/Node/contains -tags: - - API - - DOM - - Method - - Node -translation_of: Web/API/Node/contains ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Node.contains</code></strong> メソッドは指定ノードの子孫ノードに特定の子ノード（※自身も含む）が含まれるかどうかを示す真偽値を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">node.contains( otherNode ) -</pre> - -<h2 id="Example" name="Example">例</h2> - -<p>この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。<code>contains</code> は包括的かつ決定的であるため、body がそれ自身を含むかどうかは <code>isInPage</code> の意図ではないため明示的に <code>false</code> を返します。</p> - -<pre class="brush:js">function isInPage(node) { - return (node === document.body) ? false : document.body.contains(node); -}</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-node-contains", "Node.contains()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.contains")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.compareDocumentPosition")}}</li> - <li>{{domxref("Node.hasChildNodes")}}</li> -</ul> diff --git a/files/ja/web/api/node/contains/index.md b/files/ja/web/api/node/contains/index.md new file mode 100644 index 0000000000..6bcb67f897 --- /dev/null +++ b/files/ja/web/api/node/contains/index.md @@ -0,0 +1,56 @@ +--- +title: Node.contains() +slug: Web/API/Node/contains +tags: + - メソッド + - リファレンス +browser-compat: api.Node.contains +translation_of: Web/API/Node/contains +--- +{{APIRef("DOM")}} + +**`contains()`** は {{domxref("Node")}} インターフェイスのメソッドで、あるノードが指定されたノードの子孫であるか、すなわち、このノード自体であるか、直接の子ノード ({{domxref("Node.childNodes", "childNodes")}}) の何れかであるか、直接の子ノードの子ノードの何れかであるか（以下同様）を示す論理値を返します。 + +> **Note:** ノードは自分自身に**含まれます**。 + +## 構文 + +```js +contains(otherNode); +``` + +### 引数 + +- `otherNode` + - : 検査する {{domxref("Node")}} です。 + > **Note:** `otherNode` は省略できませんが、 `null` に設定することはできます。 + +### 返値 + +論理値で、 `true` は `otherNode` がそのノードに含まれていることを表します。 +そうでなければ `false` になります。 + +`otherNode` 引数が `null` であれば、 `contains()` は常に `false` になります。 + +## 例 + +この関数は、ある要素がそのページの body 要素に含まれるかどうかを検査するものです。 `contains` は包括的かつ決定的であるため、 body がそれ自身を含むかどうかは `isInPage` の意図するところではないため、明示的に `false` を返します。 + +```js +function isInPage(node) { + return (node === document.body) ? false : document.body.contains(node); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.compareDocumentPosition")}} +- {{domxref("Node.hasChildNodes")}} diff --git a/files/ja/web/api/node/firstchild/index.html b/files/ja/web/api/node/firstchild/index.html deleted file mode 100644 index 5a57be3ae9..0000000000 --- a/files/ja/web/api/node/firstchild/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Node.firstChild -slug: Web/API/Node/firstChild -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/firstChild ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ <code>null</code> を返します。ノードが <code>Document</code> の場合は、その直接の子のリスト内の最初のノードを返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild; -</pre> -<ul> - <li><code>childNode</code> : node の最初の子ノードがあればその参照、無い場合は <code>null</code></li> -</ul> -<h2 id="Example" name="Example">例</h2> -<p>次の例では <code>firstChild</code> の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。</p> -<pre class="brush:html"><p id="para-01"> - <span>First span</span> -</p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.firstChild.nodeName) -</script></pre> -<p>上記の例では alert は'#text'を表示します。なぜなら開始タグ <p> の末端と <span> の間にある空白を調整するためにテキストノードが挿入されているからです。<b>どんな</b> 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。</p> -<p>その他の #text ノードは閉じタグ </span> と </p> の間に挿入されていみます。</p> -<p>もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。</p> -<pre class="brush:html"><p id="para-01"><span>First span</span></p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.firstChild.nodeName) -</script> -</pre> -<p>今度は alert は 'SPAN' を表示するでしょう。</p> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li> -</ul> diff --git a/files/ja/web/api/node/firstchild/index.md b/files/ja/web/api/node/firstchild/index.md new file mode 100644 index 0000000000..504cd98284 --- /dev/null +++ b/files/ja/web/api/node/firstchild/index.md @@ -0,0 +1,69 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +tags: + - プロパティ + - リファレンス +browser-compat: api.Node.firstChild +translation_of: Web/API/Node/firstChild +--- +{{APIRef("DOM")}} + +**`firstChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は `null` を返します。 + +このノードが {{domxref("Document")}} であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。 + +> **Note:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。 +> {{domxref("Text")}} または {{domxref("Comment")}} ノードになることがあります。 +> 他の要素の子である最初の {{domxref("Element")}} を取得したい場合は、 {{domxref("Element.firstElementChild")}} を使用することを検討してください。 + +## 値 + +{{domxref("Node")}}、または存在しなければ `null`。 + +## 例 + +次の例では `firstChild` の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。 + +```html +<p id="para-01"> + <span>最初の span</span> +</p> + +<script> + const p01 = document.getElementById('para-01'); + console.log(p01.firstChild.nodeName); +</script> +``` + +上記の例では[コンソール](/ja/docs/Web/API/console)に '#text' と表示されます。開始タグ `<p>` の末尾と `<span>` タグとの間にある空白を調整するためにテキストノードが挿入されているためです。**あらゆる**[ホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)は、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの `#text` ノードを生成します。 + +`#text` ノードはもう 1 つ、閉じタグ `</span>` と `</p>` の間に挿入されます。 + +ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。 + +```html +<p id="para-01"><span>最初の span</span></p> + +<script> + const p01 = document.getElementById('para-01'); + console.log(p01.firstChild.nodeName); +</script> +``` + +コンソールには 'SPAN' と表示されるようになります。 + +`node.firstChild` が `#text` や `#comment` ノードを返す問題を回避するには、 {{domxref("Element.firstElementChild")}} を使用すると最初の要素ノードのみを返すことができます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.firstElementChild")}} +- {{domxref("Node.lastChild")}} diff --git a/files/ja/web/api/node/haschildnodes/index.html b/files/ja/web/api/node/haschildnodes/index.html deleted file mode 100644 index b4ed1654d3..0000000000 --- a/files/ja/web/api/node/haschildnodes/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Node.hasChildNodes -slug: Web/API/Node/hasChildNodes -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/hasChildNodes ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong>hasChildNodes</strong> は指定した<a href="/ja/docs/Web/API/Node">ノード</a>が<a href="/ja/docs/Web/API/Node.childNodes">子ノード</a>を持つか否かを示す<a href="/ja/docs/JavaScript/Reference/Global_Objects/Boolean">真偽値</a>を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre> -<h2 id="Example" name="Example">例</h2> -<p><code>"foo"</code> を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。</p> -<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo"); - -if ( foo.hasChildNodes() ) { - foo.removeChild( foo.childNodes[0] ); -}</pre> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{domxref("Node.childNodes")}}</li> - <li>{{domxref("Node.hasAttributes")}}</li> -</ul> diff --git a/files/ja/web/api/node/haschildnodes/index.md b/files/ja/web/api/node/haschildnodes/index.md new file mode 100644 index 0000000000..85717cb827 --- /dev/null +++ b/files/ja/web/api/node/haschildnodes/index.md @@ -0,0 +1,49 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - メソッド + + - リファレンス +browser-compat: api.Node.hasChildNodes +translation_of: Web/API/Node/hasChildNodes +--- +{{APIRef("DOM")}} + +**`hasChildNodes()`** は {{domxref("Node")}} インターフェイスのメソッドで、この {{domxref("Node")}} に[子ノード](/ja/docs/Web/API/Node/childNodes)があるかどうかを示す論理値を返します。 + +## 構文 + +```js +hasChildNodes(); +``` + +### 引数 + +なし。 + +### 返値 + +論理値で、このノードに子ノードがあれば `true` を、そうでなければ `false` を返します。 + +## 例 + +```js +let foo = document.getElementById('foo'); + +if (foo.hasChildNodes()) { + // 'foo.childNodes' で何かを行う +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.childNodes")}} diff --git a/files/ja/web/api/node/insertbefore/index.html b/files/ja/web/api/node/insertbefore/index.html deleted file mode 100644 index 2bfea72cdf..0000000000 --- a/files/ja/web/api/node/insertbefore/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Node.insertBefore() -slug: Web/API/Node/insertBefore -tags: - - API - - DOM - - Element - - Method - - Node - - Reference - - メソッド -translation_of: Web/API/Node/insertBefore ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"> <code><strong>Node.insertBefore()</strong></code> メソッドは、ノードを<em>参照ノード</em>の前に、指定された<em>親ノード</em>の子として挿入します。</span></p> - -<p>指定されたノードが既に文書中に存在した場合、 <code>insertBefore()</code> はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)</p> - -<p>これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。</p> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 <code>cloneNode()</code> で作成された複製は自動的には同期されません。</p> -</div> - -<p>指定された子が {{domxref("DocumentFragment")}} である場合、 <code>DocumentFragment</code> の内容全体が指定された親ノードの子リストに移動されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">let <var>insertedNode</var> = <var>parentNode</var>.insertBefore(<var>newNode</var>, <var>referenceNode</var>) -</pre> - -<dl> - <dt><code><var>insertedNode</var></code></dt> - <dd>挿入されたノード (<code><var>newNode</var></code> と同じ) です。</dd> - <dt><code><var>parentNode</var></code></dt> - <dd>新しく挿入されるノードの親です。</dd> - <dt><code><var>newNode</var></code></dt> - <dd>挿入されるノードです。</dd> - <dt><code><var>referenceNode</var></code></dt> - <dd> <code><var>newNode</var></code> がこのノードの直前に挿入されます。このノードが <code>null</code> である場合は、 <code><var>newNode</var></code> は <code><var>parentNode</var></code> の子ノードの末尾に挿入されます。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> <code><var>referenceNode</var></code> は省略可能な引数では<strong>ありません</strong>。明示的に {{domxref("Node")}} または <code>null</code> を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって<a href="https://code.google.com/p/chromium/issues/detail?id=419780">異なる</a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">動作</a>をすることがあります。</p> -</div> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>追加された子ノードを返します (ただし <code><var>newNode</var></code> が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="Example_1" name="Example_1">例 1</h3> - -<pre class="brush: html"><div id="parentElement"> - <span id="childElement">foo bar</span> -</div> - -<script> -// 挿入する新しいノードを作成する -let newNode = document.createElement("span") - -// 親ノードの参照を取得する -let parentDiv = document.getElementById("childElement").parentNode - -// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作) -let sp2 = document.getElementById("childElement") -parentDiv.insertBefore(newNode, sp2) -// テストケース [ 1 ] 終了 - -// テストケース [ 2 ] 開始: childElement が undefined 型の場合 -let sp2 = undefined // "childElement" の ID を持つノードが存在しない -parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換 -// テストケース [ 2 ] 終了 - -// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合 -let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない -parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument" -// テストケース [ 3 ] 終了 -</script> -</pre> - -<h3 id="Example_2" name="Example_2">例 2</h3> - -<pre class="brush:html"><div id="parentElement"> - <span id="childElement">foo bar</span> -</div> - -<script> -// 新しい只の <span> 要素を作成 -let sp1 = document.createElement("span") - -// 参照要素を取得 -let sp2 = document.getElementById("childElement") -// 親要素を取得 -let parentDiv = sp2.parentNode - -// 新しい要素を sp2 の手前に挿入 -parentDiv.insertBefore(sp1, sp2) -</script> -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> <code>insertAfter()</code> メソッドはありません。これは <code>insertBefore</code> メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。</p> -</div> - -<p>前の例では、 <code>sp1</code> は以下のようにして <code>sp2</code> の後に挿入することができます。</p> - -<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling)</code></pre> - -<p><code>sp2</code> に次の兄弟がない場合、これは最後の子ノードです。 — <code>sp2.nextSibling</code> は <code>null</code> を返し、 <code>sp1</code> は子ノードリストの末尾 (<code>sp2</code> の直後) に挿入されます。</p> - -<h3 id="Example_3" name="Example_3">例 3</h3> - -<p>要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。</p> - -<pre class="brush:js">// 親ノードを取得 -let parentElement = document.getElementById('parentElement') -// 親の最初の子を取得 -let theFirstChild = parentElement.firstChild - -// 新しい要素を取得 -let newElement = document.createElement("div") - -// 最初の子の前に新しい要素を挿入 -parentElement.insertBefore(newElement, theFirstChild) -</pre> - -<p>要素に最初の子がない場合、 <code>firstChild</code> は <code>null</code> になります。その場合も、要素は親の最後の子の後に追加されます。</p> - -<p>親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は<em>唯一の</em>要素になります。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="spectable 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-node-insertbefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>挿入アルゴリズムのエラーを修正</td> - </tr> - <tr> - <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td>より詳細にアルゴリズムを記述</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>目立った変更はなし</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>目立った変更はなし</td> - </tr> - <tr> - <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>導入</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Node.insertBefore")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.removeChild()")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.hasChildNodes()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> -</ul> diff --git a/files/ja/web/api/node/insertbefore/index.md b/files/ja/web/api/node/insertbefore/index.md new file mode 100644 index 0000000000..36ae9e86ba --- /dev/null +++ b/files/ja/web/api/node/insertbefore/index.md @@ -0,0 +1,149 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - メソッド + - リファレンス +browser-compat: api.Node.insertBefore +translation_of: Web/API/Node/insertBefore +--- +{{APIRef("DOM")}} + +**`insertBefore()`** は {{domxref("Node")}} インターフェイスのメソッドで、*参照先ノード*の前にこの*親ノード*の子としてノードを挿入します。 + +指定されたノードが既に文書中に存在した場合、 `insertBefore()` はこれを現在の位置から新しい位置に移動します。（つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。） + +これは、 1 つのノードが文書中に同時に 2 か所に存在できないことを意味します。 + +> **Note:** {{domxref("Node.cloneNode()")}} を使用すると、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 `cloneNode()` で作成された複製は自動的には同期されません。 + +指定された子が {{domxref("DocumentFragment")}} である場合、 `DocumentFragment` の内容全体が指定された親ノードの子リストに移動されます。 + +## 構文 + +```js +insertBefore(newNode, referenceNode); +``` + +### 引数 + +- `newNode` + - : 挿入するノードです。 +- `referenceNode` + - : `newNode` が挿入される位置の前にあるノードです。このノードが `null` である場合は、 `newNode` はこのノードの子ノードの末尾に挿入されます。 + > **Note:** `referenceNode` は省略可能な引数では**ありません**。 + > 明示的に {{domxref("Node")}} または `null` を渡す必要があります。 + > 渡さなかった場合や無効な値を渡した場合の[動作](https://code.google.com/p/chromium/issues/detail?id=419780)は、ブラウザーのバージョンによって[異なる](https://bugzilla.mozilla.org/show_bug.cgi?id=119489)可能性があります。 + +## 返値 + +追加された子ノードを返します（ただし `newNode` が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} を返します）。 + +### 例外 + +挿入前の検証 + +## 例 + +### 例 1 + +```html +<div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// 挿入する新しいノードを作成する +let newNode = document.createElement("span") + +// 親ノードの参照を取得する +let parentDiv = document.getElementById("childElement").parentNode + +// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作) +let sp2 = document.getElementById("childElement") +parentDiv.insertBefore(newNode, sp2) +// テストケース [ 1 ] 終了 + +// テストケース [ 2 ] 開始: childElement が undefined 型の場合 +let sp2 = undefined // "childElement" の ID を持つノードが存在しない +parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換 +// テストケース [ 2 ] 終了 + +// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合 +let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない +parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument" +// テストケース [ 3 ] 終了 +</script> +``` + +### 例 2 + +```html +<div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// 新しい只の <span> 要素を作成 +let sp1 = document.createElement("span") + +// 参照要素を取得 +let sp2 = document.getElementById("childElement") +// 親要素を取得 +let parentDiv = sp2.parentNode + +// 新しい要素を sp2 の手前に挿入 +parentDiv.insertBefore(sp1, sp2) +</script> +``` + +> **Note:** `insertAfter()` メソッドはありません。 +> これは `insertBefore` メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。 +> +> 前の例では、 `sp1` は以下のようにして `sp2` の後に挿入することができます。 +> +> ```js +> parentDiv.insertBefore(sp1, sp2.nextSibling) +> ``` +> +> `sp2` に次の兄弟ノードがない場合、これが最後の子ノードです。 — `sp2.nextSibling` は `null` を返し、 `sp1` は子ノードリストの末尾（`sp2` の直後）に挿入されます。 + +### 例 3 + +要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。 + +```js +// 親ノードを取得 +let parentElement = document.getElementById('parentElement') +// 親ノードの最初の子ノードを取得 +let theFirstChild = parentElement.firstChild + +// 新しい要素を取得 +let newElement = document.createElement("div") + +// 最初の子ノードの前に新しい要素を挿入 +parentElement.insertBefore(newElement, theFirstChild) +``` + +要素に最初の子ノードがない場合、 `firstChild` は `null` になります。その場合も、要素は親ノードの最後の子ノードの後に追加されます。 + +親要素に最初の子ノードがない場合は、最後の子ノードもありません。結果的に、新しく挿入された要素は**唯一の**要素になります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("Element.prepend()")}} +- {{domxref("Element.before()")}} +- {{domxref("Element.after()")}} diff --git a/files/ja/web/api/node/isdefaultnamespace/index.html b/files/ja/web/api/node/isdefaultnamespace/index.html deleted file mode 100644 index 018e6562cc..0000000000 --- a/files/ja/web/api/node/isdefaultnamespace/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Node.isDefaultNamespace -slug: Web/API/Node/isDefaultNamespace -tags: - - DOM - - Gecko DOM Reference - - Namespaces - - Node -translation_of: Web/API/Node/isDefaultNamespace ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><code>isDefaultNamespace</code> は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>result</var> = <var>node</var>.isDefaultNamespace(<var>namespaceURI</var>) -</pre> -<ul> - <li><var>result</var> : 戻り値は真偽値 (<code>true</code> / <code>false</code>) となる</li> - <li><var>namespaceURI</var> : 要素に対してチェックする、名前空間を表す文字列</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; -var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0]; - -alert(el.isDefaultNamespace(XULNS)); // true</pre> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li> - <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> -</ul> diff --git a/files/ja/web/api/node/isdefaultnamespace/index.md b/files/ja/web/api/node/isdefaultnamespace/index.md new file mode 100644 index 0000000000..44f1b3acec --- /dev/null +++ b/files/ja/web/api/node/isdefaultnamespace/index.md @@ -0,0 +1,71 @@ +--- +title: Node.isDefaultNamespace() +slug: Web/API/Node/isDefaultNamespace +tags: + - メソッド + - リファレンス +browser-compat: api.Node.isDefaultNamespace +translation_of: Web/API/Node/isDefaultNamespace +--- +{{APIRef("DOM")}} + +**`isDefaultNamespace()`** は {{domxref("Node")}} インターフェイスのメソッドで、名前空間 URI を引数として受け取ります。 +その名前空間がこのノードの既定の名前空間である場合は `true` を返し、そうでない場合は `false` を返します。 + +> **Note:** 既定の名前空間は、 HTML 要素では常に `""` です。 SVG 要素では、 `xmlns` 属性で設定されます。 + +## 構文 + +```js +isDefaultNamespace(namespaceURI); +``` + +### 引数 + +- `namespaceURI` + - : 要素の検査対象となる名前空間を表す文字列です。 + > **Note:** `namespaceURI` は省略可能ではありませんが、 `null` に設定することはできます。 + +### 返値 + +`true` または `false` の値を持つ論理値で、引数が既定の名前空間であるかどうかを示します。 + +## 例 + +```html +"" が <output> の既定の名前空間であるか: <output>未検査</output><br/> +"http://www.w3.org/2000/svg" が <output> の既定の名前空間であるか: <output>未検査</output><br/> +"" が <svg> の既定の名前空間であるか: <output>未検査</output><br/> +"http://www.w3.org/2000/svg" が <svg> の既定の名前空間であるか: <output>未検査</output><br/> +<svg xmlns="http://www.w3.org/2000/svg" height="1"></svg> +<button>結果を見るにはクリック</button> +``` + +```js +const button = document.getElementsByTagName('button')[0]; +button.addEventListener("click", function () { + const aHtmlElt = document.getElementsByTagName('output')[0]; + const aSvgElt = document.getElementsByTagName('svg')[0]; + + const result = document.getElementsByTagName('output'); + result[0].value = aHtmlElt.isDefaultNamespace(""); // true + result[1].value = aHtmlElt.isDefaultNamespace("http://www.w3.org/2000/svg"); // false + result[2].value = aSvgElt.isDefaultNamespace(""); // true + result[3].value = aSvgElt.isDefaultNamespace("http://www.w3.org/2000/svg"); // false +}); +``` + +{{ EmbedLiveSample('Example','100%',130) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.lookupNamespaceURI")}} +- {{domxref("Node.lookupPrefix")}} diff --git a/files/ja/web/api/node/isequalnode/index.html b/files/ja/web/api/node/isequalnode/index.html deleted file mode 100644 index 3eced87fe0..0000000000 --- a/files/ja/web/api/node/isequalnode/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Node.isEqualNode -slug: Web/API/Node/isEqualNode -translation_of: Web/API/Node/isEqualNode ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p><code>Node.isEqualNode()</code>は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(otherNode); -</pre> - -<ul> - <li><code>otherNode</code> : 同値性を比較する対象の {{domxref("Node")}}</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<p>3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、<code>isEqualNode()</code> を使ってJavaScriptでノードを比較した結果は以下のようになります。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div>最初の要素です。</div> -<div>2番目の要素です。</div> -<div>最初の要素です。</div> - -<p id="output"></p></pre> - -<div class="hidden"> -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#output { - width: 440px; - border: 2px solid black; - border-radius: 5px; - padding: 10px; - margin-top: 20px; - display: block; -}</pre> -</div> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">let output = document.getElementById("output"); -let divList = document.getElementsByTagName("div"); - -output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>"; -output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>"; -output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>";</pre> - -<h3 id="Results">Results</h3> - -<p>{{ EmbedLiveSample('Example', 480) }}</p> - -<p> - </p><h2 id="仕様">仕様</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-node-isequalnode', 'Node.isEqualNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー互換性">ブラウザー互換性</h2> - - - -<p>{{Compat("api.Node.isEqualNode")}}</p> - -<h2 id="参考">参考</h2> - -<ul> - <li>{{domxref("Node.isSameNode()")}}</li> -</ul> diff --git a/files/ja/web/api/node/isequalnode/index.md b/files/ja/web/api/node/isequalnode/index.md new file mode 100644 index 0000000000..b4c71cc44a --- /dev/null +++ b/files/ja/web/api/node/isequalnode/index.md @@ -0,0 +1,82 @@ +--- +title: Node.isEqualNode() +slug: Web/API/Node/isEqualNode +tags: + - メソッド + - リファレンス +browser-compat: api.Node.isEqualNode +translation_of: Web/API/Node/isEqualNode +--- +{{APIRef("DOM")}} + +**`isEqualNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 2 つのノードが等しいかどうかを検査します。 +2 つのノードは、同じ型、定義特性（要素の場合、 ID や子ノードの数など）、その属性が一致している場合、等しいといえます。データで一致が求められる具体的な点は、ノードの型によって異なります。 + +## 構文 + +```js +isEqualNode(otherNode); +``` + +### 引数 + +- `otherNode` + - : 比較対象となる {{domxref("Node")}} です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 + +### 返値 + +論理値で、 2 つのノードが等しければ `true`、そうでなければ `false` です。 +`otherNode` が `null` であった場合、 `isEqualNode()` は常に false を返します。 + +## 例 + +この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isEqualNode()` を使って JavaScript でノードを比較した結果は以下のようになります。 + +### HTML + +```html +<div>最初の要素です。</div> +<div>2 番目の要素です。</div> +<div>最初の要素です。</div> + +<p id="output"></p> +``` + +```css hidden +#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +} +``` + +### JavaScript + +```js +let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); + +output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>"; +output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>"; +output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>"; +``` + +### 結果 + +{{ EmbedLiveSample('Example', "100%", "210") }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isSameNode()")}} diff --git a/files/ja/web/api/node/issamenode/index.html b/files/ja/web/api/node/issamenode/index.html deleted file mode 100644 index f94668cfd5..0000000000 --- a/files/ja/web/api/node/issamenode/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Node.isSameNode -slug: Web/API/Node/isSameNode -tags: - - DOM - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/isSameNode ---- -<div> - {{ApiRef}}{{Obsolete_header}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ふたつのノードが同一ノードの場合は <code>true</code> を、異なる場合は <code>false</code> を返します。</p> -<div class="warning"> - <strong>注記</strong>: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。<br> - <pre class="brush:js">// 当メソッド -node1.isSameNode(node2) - -// 代替策 -node1 === node2 -node1 == node2 - -</pre> -</div> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>isSameNode</var> = <var>node</var>.isSameNode(<var>org</var>); -</pre> -<ul> - <li><var>arg</var> : 比較ノード</li> -</ul> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}</li> - <li>{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています</li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{domxref("Node.isEqualNode")}}</li> -</ul> diff --git a/files/ja/web/api/node/issamenode/index.md b/files/ja/web/api/node/issamenode/index.md new file mode 100644 index 0000000000..ffd47f8bf3 --- /dev/null +++ b/files/ja/web/api/node/issamenode/index.md @@ -0,0 +1,83 @@ +--- +title: Node.isSameNode() +slug: Web/API/Node/isSameNode +tags: + - メソッド + - リファレンス +browser-compat: api.Node.isSameNode +translation_of: Web/API/Node/isSameNode +--- +{{APIRef("DOM")}} + +**`isSameNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 [`===` 厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)の古い別名です。 +すなわち、 2 つのノードが全く同じであるかどうか（言い換えれば、同じオブジェクトを指しているかどうか）を検査します。 + +> **Note:** `isSameNode()` を使用する必要はありません。 `===` 厳密等価演算子を使用してください。 + +## 構文 + +```js +isSameNode(otherNode); +``` + +### 引数 + +- `otherNode` + - : 検査対象となる {{domxref("Node")}} です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 + +### 返値 + +論理値で、両ノードが厳密に等しい場合は `true`、そうでなければ `false` です。 + +## 例 + +この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isSameNode()` を使って JavaScript でノードを比較した結果は以下のようになります。 + +### HTML + +```html +<div>最初の要素です。</div> +<div>2 番目の要素です。</div> +<div>最初の要素です。</div> + +<p id="output"></p> +``` + +```css hidden +#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +} +``` + +### JavaScript + +```js +let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); + +output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isSameNode(divList[0]) + "<br/>"; +output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isSameNode(divList[1]) + "<br/>"; +output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isSameNode(divList[2]) + "<br/>"; +``` + +### 結果 + +{{ EmbedLiveSample('Example', "100%", "205") }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isEqualNode()")}} diff --git a/files/ja/web/api/node/issupported/index.html b/files/ja/web/api/node/issupported/index.html deleted file mode 100644 index 3b25dc254b..0000000000 --- a/files/ja/web/api/node/issupported/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Node.isSupported -slug: Web/API/Node/isSupported -tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/isSupported ---- -<div> - {{ApiRef}}{{obsolete_header("22")}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">element.isSupported(feature, version)</pre> -<dl> - <dt> - <code>feature</code></dt> - <dd> - テストする機能の名前。<a href="/ja/docs/DOM/document.implementation" title="DOM/document.implementation">DOMImplementation</a> の <code>hasFeature</code> メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance セクション</a> にリストがあります。</dd> - <dt> - <code>version</code></dt> - <dd> - テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は <code>2.0</code> になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は <code>true</code> を返します。</dd> -</dl> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js"><div id="doc"> -</div> - -<script> - // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します - var main = document.getElementById('doc'); - var output = main.isSupported('HTML', '2.0'); -</script> -</pre> -<h2 id="Specification" name="Specification">仕様</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-Node-supports">DOM Level 2 Core: isSupported</a></li> -</ul> -<h2 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko に関する注記</h2> -<ul> - <li>Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に <code>true</code> を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。</li> -</ul> diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md new file mode 100644 index 0000000000..db0b3935ee --- /dev/null +++ b/files/ja/web/api/node/issupported/index.md @@ -0,0 +1,53 @@ +--- +title: Node.isSupported() +slug: Web/API/Node/isSupported +tags: + - メソッド + - 非推奨 + - リファレンス +browser-compat: api.Node.isSupported +translation_of: Web/API/Node/isSupported +--- +{{APIRef("DOM")}}{{deprecated_header}} + +**`isSupported()`** は {{domxref("Node")}} インターフェイスのメソッドで、この DOM の実装が指定された機能を実装しており、このノードがこの機能に対応しているかどうかを検査した結果を論理値で返します。 + +## 構文 + +```js +isSupported(feature, version); +``` + +### 引数 + +- `feature` + - : 文字列で、検査する機能の名前を指定します。 + これは [DOMImplementation](/ja/docs/Web/API/Document/implementation) の `hasFeature` メソッドに渡すものと同じ名前です。有効な値については、 [Conformance の章](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance)にあります。 +- `version` + - : 文字列で、検査する機能のバージョン番号を指定します。 + DOM Level 2 第 1 版では、これは `2.0` という文字列です。このバージョンが指定されなかった場合、何れかの版のメソッドが対応していれば、このメソッドは true を返します。 + +## 例 + +```html +<div id="doc"> +</div> + +<script> + // 要素を取得して DOM2 HTML Module に対応しているかどうかを検査します。 + const main = document.getElementById('doc'); + const output = main.isSupported('HTML', '2.0'); +</script> +``` + +## 仕様書 + +この機能は仕様書に含まれていません。標準化路線から外れました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isEqualNode()")}} diff --git a/files/ja/web/api/node/lastchild/index.html b/files/ja/web/api/node/lastchild/index.html deleted file mode 100644 index e7f5626f3c..0000000000 --- a/files/ja/web/api/node/lastchild/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Node.lastChild -slug: Web/API/Node/lastChild -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/lastChild ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong>lastChild</strong> はノードの子要素の内、最後のものを返します。</p> -<h2 id="Syntax_and_Values" name="Syntax_and_Values">構文</h2> -<pre class="syntaxbox">var last_child = element.lastChild -</pre> -<h2 id="Description" name="Description">説明</h2> -<p><code>lastChild</code> として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノード となります。子要素を持たない場合は <code>null</code> が返されます。</p> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">var tr = document.getElementById("row1"); // table 要素の特定の行を取得 -var corner_td = tr.lastChild; // 特定の行の内、最後のセルを取得 -</pre> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li> - <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li> -</ul> diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md new file mode 100644 index 0000000000..9e9d386274 --- /dev/null +++ b/files/ja/web/api/node/lastchild/index.md @@ -0,0 +1,39 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.lastChild +translation_of: Web/API/Node/lastChild +--- +{{APIRef("DOM")}} + +**`lastChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最後の子ノードを返します。 +親ノードが要素であった場合、子ノードはふつう、要素ノード、テキストノード、コメントノードの何れかです。 +子要素がない場合は `null` を返します。 + +## Value + +このノードの最後の子である {{domxref("Node")}}、または子ノードがなければ `null` です。 + +## 例 + +```js +const tr = document.getElementById("row1"); +const corner_td = tr.lastChild; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.firstChild")}} +- {{domxref("Element.lastElementChild")}} diff --git a/files/ja/web/api/node/lookupprefix/index.md b/files/ja/web/api/node/lookupprefix/index.md new file mode 100644 index 0000000000..30dcc549ac --- /dev/null +++ b/files/ja/web/api/node/lookupprefix/index.md @@ -0,0 +1,77 @@ +--- +title: Node.lookupPrefix() +slug: Web/API/Node/lookupPrefix +tags: + - メソッド + - リファレンス +browser-compat: api.Node.lookupPrefix +translation_of: Web/API/Node/lookupPrefix +--- +{{APIRef("DOM")}} + +**`lookupPrefix()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された名前空間 URI に対応する接頭辞があれば、それを含む文字列を返します。ない場合は `null` を返します。 +複数の接頭辞の可能性があれば、最初の接頭辞を返します。 + +## 構文 + +```js +lookupPrefix(namespace); +``` + +### 引数 + +- `namespace` + - : 接頭辞を検索するための名前空間の入った文字列です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 + +### 返値 + +対応する接頭辞の入った文字列です。見つからなかった場合は `null` になります。 +`namespace` が null または空文字列であった場合、 `lookupPrefix()` は `null` を返します。 + +このノードが {{domxref("DocumentType")}} または {{domxref("DocumentFragment")}} であった場合は、 `lookupPrefix()` は常に `null` を返します。 + +## 例 + +```html +Prefix for <code>http://www.w3.org/2000/svg</code> on <output>: <output>未検査</output><br/> +Prefix for <code>http://www.w3.org/XML/1998/namespace</code> on <output>: <output>未検査</output><br/> +Prefix for <code>http://www.w3.org/TR/html4/</code> on <output>: <output>未検査</output><br/> +Prefix for <code>https://www.w3.org/1999/xlink</code> on <output>: <output>未検査</output><br/> +Prefix for <code>http://www.w3.org/2000/svg</code> on <svg>: <output>未検査</output><br/> +Prefix for <code>https://www.w3.org/1999/xlink</code> on <svg>: <output>未検査</output><br/> +Prefix for <code>http://www.w3.org/XML/1998/namespace</code> on <svg>: <output>未検査</output><br/> +<svg xmlns:t="http://www.w3.org/2000/svg" height="1"></svg> +<button>結果を確認するにはクリック</button> +``` + +```js +const button = document.getElementsByTagName('button')[0]; +button.addEventListener("click", function () { + const aHtmlElt = document.getElementsByTagName('output')[0]; + const aSvgElt = document.getElementsByTagName('svg')[0]; + + const result = document.getElementsByTagName('output'); + result[0].value = aHtmlElt.lookupPrefix("http://www.w3.org/2000/svg"); // true + result[1].value = aHtmlElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false + result[2].value = aHtmlElt.lookupPrefix("http://www.w3.org/TR/html4/"); // true + result[3].value = aHtmlElt.lookupPrefix("https://www.w3.org/1999/xlink"); // false + result[4].value = aSvgElt.lookupPrefix("http://www.w3.org/2000/svg"); // true + result[5].value = aSvgElt.lookupPrefix("https://www.w3.org/1999/xlink"); // true + result[6].value = aSvgElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false +}); +``` + +{{ EmbedLiveSample('Example','100%',190) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix](https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix) diff --git a/files/ja/web/api/node/nextsibling/index.html b/files/ja/web/api/node/nextsibling/index.html deleted file mode 100644 index 1ff4c13cef..0000000000 --- a/files/ja/web/api/node/nextsibling/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Node.nextSibling -slug: Web/API/Node/nextSibling -tags: - - DOM - - Gecko - - Node - - 要更新 -translation_of: Web/API/Node/nextSibling ---- -<div> -<div> -<div>{{APIRef("DOM")}}</div> -</div> - -<p><code><strong>Node.nextSibling</strong></code> という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は <code>null</code> を返します。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling -</pre> - -<h2 id="Notes" name="Notes">注記</h2> - -<div> - <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p> - <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p> - -<div> </div> - -<div>{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。</div> -</div> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span> - i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> - -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span> - el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span> - i<span class="operator token">++</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> - -/************************************************** - The following is written to the console as it loads: - - Siblings of div-01 - - 1. #text - 2. DIV - 3. #text - 4. SCRIPT - -**************************************************/</code></pre> - -<p>上の例で、<code>#text</code> ノードがタグ間のマークアップ内に (つまり、 要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 <code>document.write</code> 文で挿入された要素の間には空白が作成されません。</p> - -<p>DOM にテキストノードが入りうるのは DOM が <code>nextSibling</code> を使って横断される時に許可されます。注記のセクションのリソースを見てください。</p> - -<h2 id="Specification" name="Specification">仕様</h2> - -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li> -</ul> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - - - -<p>{{Compat("api.Node.nextSibling")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Element.nextElementSibling")}}</li> -</ul> diff --git a/files/ja/web/api/node/nextsibling/index.md b/files/ja/web/api/node/nextsibling/index.md new file mode 100644 index 0000000000..f310d8e456 --- /dev/null +++ b/files/ja/web/api/node/nextsibling/index.md @@ -0,0 +1,66 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.nextSibling +translation_of: Web/API/Node/nextSibling +--- +{{APIRef("DOM")}} + +**`nextSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親の {{domxref("Node.childNodes","childNodes")}} の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は `null` を返します。 + +> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に {{domxref("Text")}} ノードを挿入します。 +> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や [`Node.previousSibling`](/ja/docs/Web/API/Node/previousSibling) を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。 +> +> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。 +> +> {{domxref("Element.nextElementSibling")}} を使用すると、ホワイトスペースのノードや要素間のテキスト、コメントなどを飛ばして次の要素を取得することができます。 +> +> 子ノードのリストで反対方向に移動する場合は、 [Node.previousSibling](/ja/docs/Web/API/Node/previousSibling) を使用してください。 + +## 値 + +現在のノードの次の兄弟ノードを表す {{domxref("Node")}}、または存在しない場合は `null` です。 + +## 例 + +```html +<div id="div-1">こちらは div-1 です。</div> +<div id="div-2">こちらは div-2 です。</div> +<br/> +<output><em>計算結果がありません。</em></output> +``` + +```js +let el = document.getElementById('div-1').nextSibling, +i = 1; + +let result = "div-1 の兄弟要素:<br/>"; + +while (el) { + result += i + '. ' + el.nodeName+"<br/>"; + el = el.nextSibling; + i++; +} + +const output = document.getElementsByTagName("output")[0]; +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", 500)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.nextElementSibling")}} +- {{domxref("Node.previousSibling")}} diff --git a/files/ja/web/api/node/nodename/index.html b/files/ja/web/api/node/nodename/index.html deleted file mode 100644 index 65daeb1074..0000000000 --- a/files/ja/web/api/node/nodename/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Node.nodeName -slug: Web/API/Node/nodeName -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/nodeName ---- -<div> - {{APIRef}}</div> -<div> - </div> -<div> - <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概要</span></div> -<p>ノードの名前を文字列で返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>str</var> = <var>node</var>.nodeName; -</pre> -<ul> - <li><code>str</code> には指定した要素の名前が文字列の形式で入ります。</li> - <li><code>nodeName</code> は読み取り専用の属性です。</li> -</ul> -<h2 id="Notes" name="Notes">注記</h2> -<p>以下の異なる種類のノードの戻り値があります。</p> -<table> - <thead> - <tr> - <th>Interface</th> - <th>nodeName</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/ja/docs/DOM/Attr">Attr</a></td> - <td><a href="/ja/docs/DOM/Attr.name"><code>Attr.name</code></a> と同じ</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/CDATASection">CDATASection</a></td> - <td>"#cdata-section"</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/Comment">Comment</a></td> - <td>"#comment"</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/document">Document</a></td> - <td>"#document"</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/DocumentFragment">DocumentFragment</a></td> - <td>"#document-fragment"</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/DocumentType">DocumentType</a></td> - <td><a href="/ja/docs/DOM/DocumentType.name"><code>DocumentType.name</code></a> と同じ</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/element">Element</a></td> - <td><a href="/ja/docs/DOM/element.tagName"><code>Element.tagName</code></a> と同じ</td> - </tr> - <tr> - <td><a href="/ja/docs/Web/API/Entity">Entity</a></td> - <td>実体名</td> - </tr> - <tr> - <td><a href="/ja/docs/Web/API/EntityReference">EntityReference</a></td> - <td>実体参照名</td> - </tr> - <tr> - <td><a href="/ja/docs/Web/API/Notation">Notation</a></td> - <td>記法名</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/ProcessingInstruction">ProcessingInstruction</a></td> - <td><a href="/ja/docs/DOM/ProcessingInstruction.target"><code>ProcessingInstruction.target</code></a> と同じ</td> - </tr> - <tr> - <td>Text</td> - <td>"#text"</td> - </tr> - </tbody> -</table> -<h2 id="Example" name="Example">例</h2> -<p>次のマークアップ文書が与えられているとします。</p> -<pre class="brush:html"><div id="d1">hello world</div> -<input type="text" id="t"/> -</pre> -<p>そして、以下のスクリプトがあると考えてください。</p> -<pre class="brush:js">var div1 = document.getElementById("d1"); -var text_field = document.getElementById("t"); - -text_field.value = div1.nodeName; -</pre> -<p>XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。</p> -<p>注意: <a href="/ja/docs/DOM/element.tagName"><code>tagName</code></a> プロパティが使用された場合、<code>nodeName</code> は <code>tagName</code> と同じ値になります。<code>tagName</code> が未定義 (<code>undefined</code>) の時 <code>nodeName</code> はテキストノードである <code>#text</code> を返します。</p> -<h2 id="Specifications" name="Specifications">仕様</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> -</ul> diff --git a/files/ja/web/api/node/nodename/index.md b/files/ja/web/api/node/nodename/index.md new file mode 100644 index 0000000000..ea9679714d --- /dev/null +++ b/files/ja/web/api/node/nodename/index.md @@ -0,0 +1,84 @@ +--- +title: Node.nodeName +slug: Web/API/Node/nodeName +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.nodeName +translation_of: Web/API/Node/nodeName +--- +{{APIRef("DOM")}} + +**`nodeName`** は {{domxref("Node")}} の読み取り専用プロパティで、現在のノードの名前を文字列で返します。 + +## 値 + +文字列です。ノードの種類によって、次のような値になります。 + +- {{domxref("Attr")}} + - : {{domxref("Attr.name")}} の値で、この属性の*修飾名*です。 +- {{domxref("CDATASection")}} + - : `"#cdata-section"` という文字列です。 +- {{domxref("Comment")}} + - : `"#comment"` という文字列です。 +- {{domxref("Document")}} + - : `"#document"` という文字列です。 +- {{domxref("DocumentFragment")}} + - : `"#document-fragment"` という文字列です。 +- {{domxref("DocumentType")}} + - : {{domxref("DocumentType.name")}} の値です。 +- {{domxref("Element")}} + - : {{domxref("Element.tagName")}} の値です。これは HTML 要素であればその要素のタグの*大文字の*名前であり、 XML 要素（SVG や MathML の要素）であればその要素のタグの*小文字の*名前です。 +- {{domxref("ProcessingInstruction")}} + - : {{domxref("ProcessingInstruction.target")}} の値です。 +- {{domxref("Text")}} + - : `"#text"` という文字列です。 + +## 例 + +この例では、様々なノードのノード名を表示します。 + +```html +こちらは HTML です。 +<div id="d1">Hello world</div> +<!-- コメントの例 --> +テキスト<span>テキスト</span> +テキスト<br/> +<svg height="20" width="20"> + <circle cx="10" cy="10" r="5" stroke="black" stroke-width="1" fill="red" /> +</svg> +<hr> +<output id="result">まだ出力されていません。</output> +``` + +また、スクリプトは以下の通りです。 + +```js +let node = document.getElementsByTagName("body")[0].firstChild; +let result = "ノード名:<br/>"; +while (node) { + result += node.nodeName + "<br/>"; + node = node.nextSibling +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "450")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.tagName")}} +- {{domxref("Attr.name")}} +- {{domxref("DocumentType.name")}} +- {{domxref("ProcessingInstruction.target")}} diff --git a/files/ja/web/api/node/nodetype/index.html b/files/ja/web/api/node/nodetype/index.html deleted file mode 100644 index 135f0f95c7..0000000000 --- a/files/ja/web/api/node/nodetype/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Node.nodeType -slug: Web/API/Node/nodeType -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/nodeType ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ノードの種類を表す整数のコードを返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType; -</pre> -<p><code>type</code> は以下の内の何れかの unsigned short 型の値となります。</p> -<table> - <thead> - <tr> - <th scope="col">名称</th> - <th scope="col">値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>ELEMENT_NODE</code></td> - <td>1</td> - </tr> - <tr> - <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline}}</td> - <td>2</td> - </tr> - <tr> - <td><code>TEXT_NODE</code></td> - <td>3</td> - </tr> - <tr> - <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline}}</td> - <td>4</td> - </tr> - <tr> - <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline}}</td> - <td>5</td> - </tr> - <tr> - <td><code>ENTITY_NODE</code> {{deprecated_inline}}</td> - <td>6</td> - </tr> - <tr> - <td><code>PROCESSING_INSTRUCTION_NODE</code></td> - <td>7</td> - </tr> - <tr> - <td><code>COMMENT_NODE</code></td> - <td>8</td> - </tr> - <tr> - <td><code>DOCUMENT_NODE</code></td> - <td>9</td> - </tr> - <tr> - <td><code>DOCUMENT_TYPE_NODE</code></td> - <td>10</td> - </tr> - <tr> - <td><code>DOCUMENT_FRAGMENT_NODE</code></td> - <td>11</td> - </tr> - <tr> - <td><code>NOTATION_NODE</code> {{deprecated_inline}}</td> - <td>12</td> - </tr> - </tbody> -</table> -<h2 id="Example" name="Example">例</h2> -<p>次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。</p> -<pre class="brush:js">var node = document.documentElement.firstChild; - -if (node.nodeType != Node.COMMENT_NODE) - console.log("※社内コーディングルールに沿ったコメントを記述して下さい。"); -</pre> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li> - <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li> -</ul> diff --git a/files/ja/web/api/node/nodetype/index.md b/files/ja/web/api/node/nodetype/index.md new file mode 100644 index 0000000000..099e980805 --- /dev/null +++ b/files/ja/web/api/node/nodetype/index.md @@ -0,0 +1,74 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.nodeType +translation_of: Web/API/Node/nodeType +--- +{{APIRef("DOM")}} + +**`nodeType`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、整数値でこのノードがなんであるかを識別します。これは様々なノードの種類、例えば {{domxref("Element", "elements")}}, {{domxref("Text", "text")}}, {{domxref("Comment", "comments")}} を見分けます。 + +## 値 + +整数値で、このノードの種類を識別します。可能な値は次の通りです。 + +- `Node.ELEMENT_NODE` (`1`) + - : {{HTMLElement("p")}} や {{HTMLElement("div")}} などの {{domxref("Element")}} ノードです。 +- `Node.ATTRIBUTE_NODE` (`2`) + - : {{domxref("Element")}} の {{domxref("Attr", "Attribute")}} ノードです。 +- `Node.TEXT_NODE` (`3`) + - : {{domxref("Element")}} や {{domxref("Attr")}} の中に存在する {{domxref("Text")}} です。 +- `Node.CDATA_SECTION_NODE`(`4`) + - : `<!CDATA[[ … ]]>` のような {{domxref("CDATASection")}} です。 +- `Node.PROCESSING_INSTRUCTION_NODE` (`7`) + - : `<?xml-stylesheet … ?>` のような XML 文書の {{domxref("ProcessingInstruction")}} です。 +- `Node.COMMENT_NODE` (`8`) + - : `<!-- … -->` のような {{domxref("Comment")}} ノードです。 +- `Node.DOCUMENT_NODE` (`9`) + - : {{domxref("Document")}} ノードです。 +- `Node.DOCUMENT_TYPE_NODE` (`10`) + - : `<!DOCTYPE html>` のような {{domxref("DocumentType")}} ノードです。 +- `Node.DOCUMENT_FRAGMENT_NODE` (`11`) + - : A {{domxref("DocumentFragment")}} node. + +`Node.ENTITY_REFERENCE_NODE` (`5`), `Node.ENTITY_NODE` (`6`), `Node.NOTATION_NODE` (`12`) は非推奨になっており、使用されなくなっています。 + +## 例 + +## 様々な種類のノード + +```js +document.nodeType === Node.DOCUMENT_NODE; // true +document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true + +document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true + +const p = document.createElement("p"); +p.textContent = "昔々…"; + +p.nodeType === Node.ELEMENT_NODE; // true +p.firstChild.nodeType === Node.TEXT_NODE; // true +``` + +### コメント + +次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。 + +```js +const node = document.documentElement.firstChild; +if (node.nodeType !== Node.COMMENT_NODE) { + console.warn("コメントを入れてください。"); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/nodevalue/index.html b/files/ja/web/api/node/nodevalue/index.html deleted file mode 100644 index 2cfbbf795f..0000000000 --- a/files/ja/web/api/node/nodevalue/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Node.nodeValue -slug: Web/API/Node/nodeValue -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/nodeValue ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ノードの値を取得または設定します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue</pre> -<p><code><var>node</var>.nodeValue</code> が存在する場合、 <code>value</code> はノードの値を含む文字列です。</p> -<h2 id="Notes" name="Notes">注記</h2> -<p>document 自身は、 <code>nodeValue</code> は <code>nullを返します。</code>text</p> -<p>ノード、 <code>comment</code> ノード、<code>CDATA</code> ノードでは、 <code>nodeValue</code> はノードの中身を返します。 <code>attribute</code> ノードは属性値を返します。</p> -<p> </p> -<p>以下の表は、 様々なノードの戻り値を表しています。</p> -<table> - <thead> - <tr> - <th>Attr</th> - <th>attribute の値</th> - </tr> - </thead> - <tbody> - <tr> - <td>CDATASection</td> - <td>CDATA Sectionの中身</td> - </tr> - <tr> - <td>コメント</td> - <td>commentの中身</td> - </tr> - <tr> - <td>Document</td> - <td>null</td> - </tr> - <tr> - <td>DocumentFragment</td> - <td>null</td> - </tr> - <tr> - <td>DocumentType</td> - <td>null</td> - </tr> - <tr> - <td>Element</td> - <td>null</td> - </tr> - <tr> - <td>NamedNodeMap</td> - <td>null</td> - </tr> - <tr> - <td>EntityReference</td> - <td>null</td> - </tr> - <tr> - <td>Notation</td> - <td>null</td> - </tr> - <tr> - <td>ProcessingInstruction</td> - <td>ターゲットを除く全体の内容</td> - </tr> - <tr> - <td>Text</td> - <td>the text nodeの中身</td> - </tr> - </tbody> -</table> -<p><code>nodeValue</code> が <code>null</code> と定義されている場合、値を設定しても効果はありません。</p> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li> -</ul> diff --git a/files/ja/web/api/node/nodevalue/index.md b/files/ja/web/api/node/nodevalue/index.md new file mode 100644 index 0000000000..2d254b0a33 --- /dev/null +++ b/files/ja/web/api/node/nodevalue/index.md @@ -0,0 +1,67 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - プロパティ + - リファレンス +browser-compat: api.Node.nodeValue +translation_of: Web/API/Node/nodeValue +--- +{{APIRef("DOM")}} + +**`nodeValue`** は {{domxref("Node")}} インターフェイスのプロパティで、現在のノードの値を返したり設定したりします。 + +## Value + +もしあれば、現在のノードの値を含む文字列です。 +文書自身においては、 `nodeValue` は `null` を返します。 +テキスト、コメント、 CDATA ノードでは、 `nodeValue` はノードの内容を返します。 +属性ノードにおいては、属性の値が返します。 + +以下の表はノードの種類別の返値を表しています。 + +| ノード | nodeValue の値 | +| ------------------------------------ | ----------------------------------- | +| {{domxref("CDATASection")}} | CDATA セクションの中身 | +| {{domxref("Comment")}} | コメントの中身 | +| {{domxref("Document")}} | `null` | +| {{domxref("DocumentFragment")}} | `null` | +| {{domxref("DocumentType")}} | `null` | +| {{domxref("Element")}} | `null` | +| {{domxref("NamedNodeMap")}} | `null` | +| {{domxref("ProcessingInstruction")}} | 対象を除く内容物全体 | +| {{domxref("Text")}} | テキストノードの中身 | + +> **Note:** `nodeValue` が `null` になると定義されている場合は、設定しても効果がありません。 + +## 例 + +```html +<div id="d1">Hello world</div> +<!-- コメントの例 --> +<output id="result">結果が出ていません。</output> +``` + +また、以下のスクリプトを参照してください。 + +```js +let node = document.getElementsByTagName("body")[0].firstChild; +let result = "<br/>ノード名:<br/>"; +while (node) { + result += node.nodeName + "の値: " + node.nodeValue + "<br/>"; + node = node.nextSibling +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "250")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/normalize/index.html b/files/ja/web/api/node/normalize/index.html deleted file mode 100644 index 83026ac378..0000000000 --- a/files/ja/web/api/node/normalize/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Node.normalize -slug: Web/API/Node/normalize -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/normalize ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>element</em>.normalize(); -</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js;highlight:10;">var wrapper = document.createElement("div"); - -wrapper.appendChild( document.createTextNode("Part 1 ") ); -wrapper.appendChild( document.createTextNode("Part 2 ") ); - -// wrapper.childNodes[0].textContent === "Part 1 " -// wrapper.childNodes[1].textContent === "Part 2 " -// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2 - -wrapper.normalize(); // 正規化 - -// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1 -// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2" -</pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Text.splitText"><code>Text.splitText</code></a></li> -</ul> diff --git a/files/ja/web/api/node/normalize/index.md b/files/ja/web/api/node/normalize/index.md new file mode 100644 index 0000000000..7432a8f979 --- /dev/null +++ b/files/ja/web/api/node/normalize/index.md @@ -0,0 +1,73 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +tags: + - メソッド + - リファレンス +browser-compat: api.Node.normalize +translation_of: Web/API/Node/normalize +--- +{{APIRef("DOM")}} + +**`normalize()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定されたノードとその下のツリーを*正規化された*形にします。 +正規化されたサブツリーでは、サブツリー内に空のテキストノードがなくなり、隣り合うテキストノードがなくなります。 + +## 構文 + +```js +normalize(); +``` + +### 引数 + +なし。 + +### 返値 + +なし。 + +## 例 + +```html +<output id="result"></output> +``` + +```js +let wrapper = document.createElement("div"); + +wrapper.appendChild( document.createTextNode("Part 1 ") ); +wrapper.appendChild( document.createTextNode("Part 2 ") ); + +let node = wrapper.firstChild; +let result = "正規化前:<br/>"; +while (node) { + result += " " + node.nodeName + ": " + node.nodeValue + "<br/>"; + node = node.nextSibling; +} + +wrapper.normalize(); + +node = wrapper.firstChild; +result += "<br/><br/>正規化後:<br/>"; +while (node) { + result += " " + node.nodeName + ": " + node.nodeValue + "<br/>"; + node = node.nextSibling; +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "170")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 逆の操作である {{domxref("Text.splitText()")}} diff --git a/files/ja/web/api/node/ownerdocument/index.html b/files/ja/web/api/node/ownerdocument/index.html deleted file mode 100644 index f6eef4f570..0000000000 --- a/files/ja/web/api/node/ownerdocument/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Node.ownerDocument -slug: Web/API/Node/ownerDocument -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/ownerDocument ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p><code>ownerDocument</code> プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>document</var> = element.ownerDocument -</pre> - -<ul> - <li><code>document</code> : 指定要素の祖先である {{domxref("document")}} オブジェクト</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得 -var html = doc.documentElement; // owner のドキュメント要素を取得 - -alert(html); // [object HTMLHtmlElement] -</pre> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>このプロパティによって返される <code>document</code> オブジェクトは、実際の HTML 文書中ですべての子ノードの属するメインオブジェクトです。<code>document</code> ノード自身に対しこのプロパティを用いた場合、戻り値は <code>null</code> となります。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.ownerDocument")}}</p> diff --git a/files/ja/web/api/node/ownerdocument/index.md b/files/ja/web/api/node/ownerdocument/index.md new file mode 100644 index 0000000000..75cf471b02 --- /dev/null +++ b/files/ja/web/api/node/ownerdocument/index.md @@ -0,0 +1,36 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.ownerDocument +translation_of: Web/API/Node/ownerDocument +--- +{{APIRef("DOM")}} + +**`ownerDocument`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最上位の文書オブジェクトを返します。 + +## 値 + +すべての子ノードが作成された最上位の {{domxref("Document")}} オブジェクトです。 + +このプロパティが文書自身のノードで使用された場合、値は `null` になります。 + +## 例 + +```js +// 指定された "p" から、文書オブジェクトの子である最上位の HTML を取得します。 + +const d = p.ownerDocument; +const html = d.documentElement; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/parentelement/index.html b/files/ja/web/api/node/parentelement/index.html deleted file mode 100644 index e121601c07..0000000000 --- a/files/ja/web/api/node/parentelement/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Node.parentElement -slug: Web/API/Node/parentElement -tags: - - DOM - - Element - - Node - - Property - - parent -translation_of: Web/API/Node/parentElement ---- -<div> -<div>{{APIRef("DOM")}}</div> -</div> - -<p><strong>Node.parentElement</strong>のread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、<code>null</code> が返ります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>parentElement</var> = <em>node</em>.parentElement</pre> - -<p><code>parentElement</code>は現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトか<code>nullです</code>。</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">if (node.parentElement) { - node.parentElement.style.color = "red"; -}</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<ul> - <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li> -</ul> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.parentElement")}}</p> - -<p>一部のブラウザーでは、<code>parentElement</code>プロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.parentNode")}}</li> -</ul> diff --git a/files/ja/web/api/node/parentelement/index.md b/files/ja/web/api/node/parentelement/index.md new file mode 100644 index 0000000000..8aa85b65f5 --- /dev/null +++ b/files/ja/web/api/node/parentelement/index.md @@ -0,0 +1,37 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.parentElement +translation_of: Web/API/Node/parentElement +--- +{{APIRef("DOM")}} + +**`parentElement`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、この DOM ノードの親である要素 ({{DOMxRef("Element")}}) を返します。このノードに親ノードがないか、親が DOM の {{DOMxRef("Element")}} でない場合は `null` を返します。 + +## 値 + +現在のノードの親ノードである {{domxref("Element")}} を返します。そのようなものがない場合は `null` を返します。 + +## 例 + +```js +if (node.parentElement) { + node.parentElement.style.color = "red"; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.parentNode")}} diff --git a/files/ja/web/api/node/parentnode/index.html b/files/ja/web/api/node/parentnode/index.html deleted file mode 100644 index 33ea858b0c..0000000000 --- a/files/ja/web/api/node/parentnode/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Node.parentNode -slug: Web/API/Node/parentNode -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/parentNode ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>指定されたノードの DOM ツリー内の親ノードを返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>parentNode</var> = <var>node</var>.parentNode -</pre> -<ul> - <li><code>parentNode</code> : 指定ノードの親ノード。要素の親ノードは、<code>Element</code> ノード、<code>Document</code> ノード、または <code>DocumentFragment</code> になります。</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">if (node.parentNode) { - // ツリー上に既に存在しない場合を除き、 - // ツリーからノードを削除します。 - node.parentNode.removeChild(node); -}</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p><code>parentNode</code> は、以下の<a href="/ja/docs/Web/API/Node.nodeType">ノードタイプ</a>については <code>null</code> を返します : <code>Attr</code> 、<code>Document</code> 、<code>DocumentFragment</code> 、<code>Entity</code> 、<code>Notation</code></p> -<p>また、ノードが作成された直後でまだツリーに加えられていない場合も <code>null</code> を返します。</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.parentNode")}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{Domxref("element.firstChild")}}</li> - <li>{{Domxref("element.lastChild")}}</li> - <li>{{Domxref("element.childNodes")}}</li> - <li>{{Domxref("element.nextSibling")}}</li> - <li>{{Domxref("element.previousSibling")}}</li> - <li>{{Domxref("Node.removeChild")}}</li> -</ul> diff --git a/files/ja/web/api/node/parentnode/index.md b/files/ja/web/api/node/parentnode/index.md new file mode 100644 index 0000000000..d50c111b37 --- /dev/null +++ b/files/ja/web/api/node/parentnode/index.md @@ -0,0 +1,47 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.parentNode +translation_of: Web/API/Node/parentNode +--- +{{APIRef("DOM")}} + +**`parentNode`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、 DOM ツリー内の特定のノードの親ノードを返します。 + +`Document` および `DocumentFragment` [ノード](/ja/docs/Web/API/Node/nodeType)には親が付くことはないので、 `parentNode` は常に `null` になります。 +ノードが生成されてからツリーに割り当てられていない場合も `null` を返します。 + +## 値 + +現在のノードの親に当たる {{domxref("Node")}} です。要素の親になるのは `Element` ノード、 `Document` ノード、 `DocumentFragment` ノードの何れかです。 + +## 例 + +```js +if (node.parentNode) { + // ノードがツリーの中にある場合は、ツリーから取り除く + node.parentNode.removeChild(node); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Domxref("Node.firstChild")}} +- {{Domxref("Node.lastChild")}} +- {{Domxref("Node.childNodes")}} +- {{Domxref("Node.nextSibling")}} +- {{Domxref("Node.parentElement")}} +- {{Domxref("Node.previousSibling")}} +- {{Domxref("Node.removeChild")}} diff --git a/files/ja/web/api/node/previoussibling/index.html b/files/ja/web/api/node/previoussibling/index.html deleted file mode 100644 index 5506f5fd86..0000000000 --- a/files/ja/web/api/node/previoussibling/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Node.previousSibling -slug: Web/API/Node/previousSibling -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/previousSibling ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>指定のノードの親ノードの <a href="/ja/docs/Web/API/Node.childNodes"><code>childNodes</code></a> リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は <code>null</code> を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>previousNode</var> = <var>node</var>.previousSibling; -</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">// <a><b1 id="b1"/><b2 id="b2"/></a> - -alert( document.getElementById("b1").previousSibling ); // null -alert( document.getElementById("b2").previousSibling.id ); // "b1" -</pre> - -<h2 id="Notes" name="Notes">注記</h2> - - <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p> - <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p> - -<p><code>childNode</code> リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li> -</ul> diff --git a/files/ja/web/api/node/previoussibling/index.md b/files/ja/web/api/node/previoussibling/index.md new file mode 100644 index 0000000000..cec77e3af9 --- /dev/null +++ b/files/ja/web/api/node/previoussibling/index.md @@ -0,0 +1,75 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.previousSibling +translation_of: Web/API/Node/previousSibling +--- +{{APIRef("DOM")}} + +**`previousSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの {{domxref("Node.childNodes", "childNodes")}} リスト内で、直前にある ノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。 + +> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。 +> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。 +> +> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。 +> +> [`previousElementSibling`](/ja/docs/Web/API/Element/previousElementSibling) を使用すると、（テキストノードやその他の要素以外のノードを飛ばして）次の要素を取得することができます。 +> +> 子ノードのリストで反対方向に移動する場合は、 [Node.nextSibling](/ja/docs/Web/API/Node/nextSibling) を使用してください。 + +## 値 + +現在のノードの直前のノードを表す {{domxref("Node")}} です。 +存在しない場合は `null` です。 + +## 例 + +次の例では、要素にテキストノードがある場合とない場合の `previousSibling` の動作を示しています。 + +### 最初の例 + +この例では、一連の `img` 要素が互いに隣り合っており、その間にホワイトスペースがありません。 + +```html +<img id="b0"><img id="b1"><img id="b2"> +``` + +```js +document.getElementById("b1").previousSibling; // <img id="b0"> +document.getElementById("b2").previousSibling.id; // "b1" +``` + +### 2 番目の例 + +この例では、 `img` 要素の間にホワイトスペースのテキストノード（改行）があります。 + +```html +<img id="b0"> +<img id="b1"> +<img id="b2"> +``` + +```js +document.getElementById("b1").previousSibling; // #text +document.getElementById("b1").previousSibling.previousSibling; // <img id="b0"> +document.getElementById("b2").previousSibling.previousSibling; // <img id="b1"> +document.getElementById("b2").previousSibling; // #text +document.getElementById("b2").previousSibling.id; // undefined +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.nextSibling")}} +- {{domxref("Element.previousElementSibling")}} diff --git a/files/ja/web/api/node/removechild/index.html b/files/ja/web/api/node/removechild/index.html deleted file mode 100644 index ff64604414..0000000000 --- a/files/ja/web/api/node/removechild/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Node.removeChild -slug: Web/API/Node/removeChild -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/removeChild ---- -<p><code><strong>Node.removeChild()</strong></code> メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>); -<strong>または</strong> -<em>node</em>.removeChild(<em>child</em>); -</pre> - -<ul> - <li><code>child</code> は DOM から取り除く、子ノードです。</li> - <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">node</span></font> は <code>child</code> の親ノードです。</li> - <li><code>oldChild</code> は 取り除かれた子ノードへの参照を保持します。 <code>oldChild</code> === <code>child</code> です。</li> -</ul> - -<p>取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 <code>oldChild</code> オブジェクト参照を通じて、後でコード中で再利用することができます。</p> - -<p>しかし、第二の構文では <code>oldChild</code> の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから <a href="/ja/docs/Web/JavaScript/Memory_Management">自動的に削除</a>されます。</p> - -<p><code>child</code> が実際には <code>element</code> ノードの子ではない場合、このメソッドは例外を発生します。これは <code>child</code> が呼び出し時には実際に <code>element</code> の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。</p> - -<p>このメソッドでは、2つの異なる方法で例外が発生します。</p> - -<ol> - <li> - <p><code>child</code> が実際に <code>element</code> の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。</p> - - <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p> - </li> - <li> - <p><code>child</code> がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。<br> - <br> - <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p> - </li> -</ol> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: html"><!-- 対象とする HTML のコード --> -<div id="top" > </div> - -<script type="text/javascript"> - var top = document.getElementById("top"); - var nested = document.getElementById("nested"); - - var garbage = top.removeChild(nested); //Test Case 2: the method throws the exception (2) - -</script> - -<!--Sample HTML code--> -<div id="top"> - <div id="nested"></div> -</div> - -<script type="text/javascript"> - var top = document.getElementById("top"); - var nested = document.getElementById("nested"); - - var garbage = top.removeChild(nested); // This first call remove correctly the node - - // ...... - garbage = top.removeChild(nested); // Test Case 1: the method in the second call here, throws the exception (1) - -</script> - -</pre> - -<pre class="brush: html"><!--Sample HTML code--> - -<div id="top"> - <div id="nested"></div> -</div> -</pre> - -<pre class="brush:js">// 親ノードから指定した子要素を除去 -var d = document.getElementById("top"); -var d_nested = document.getElementById("nested"); -var throwawayNode = d.removeChild(d_nested); -</pre> - -<pre class="brush:js">// 親要素が不明、不定の場合の方法 -var node = document.getElementById("nested"); -if (node.parentNode) { - node.parentNode.removeChild(node); -} -</pre> - -<pre class="brush:js">// 要素の全ての子を除去 -var element = document.getElementById("top"); -while (element.firstChild) { - element.removeChild(element.firstChild); -} -</pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> -</ul> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.Node.removeChild")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.replaceChild")}}</li> - <li>{{domxref("Node.parentNode")}}</li> - <li>{{domxref("ChildNode.remove")}}</li> -</ul> - -<div>{{APIRef("DOM")}}</div> diff --git a/files/ja/web/api/node/removechild/index.md b/files/ja/web/api/node/removechild/index.md new file mode 100644 index 0000000000..335eea5b85 --- /dev/null +++ b/files/ja/web/api/node/removechild/index.md @@ -0,0 +1,125 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +tags: + - メソッド + - リファレンス +browser-compat: api.Node.removeChild +translation_of: Web/API/Node/removeChild +--- +{{APIRef("DOM")}} + +**`removeChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。 + +> **Note:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。 +> 後のコードで再利用することができます。 +> +> `removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから[自動的に削除](/en-US/docs/Web/JavaScript/Memory_Management)されます。 + +{{domxref("Node.cloneNode()")}} とは異なり、返値は関連付けられた {{domxref("EventListener")}} オブジェクトを保持します。 + +## 構文 + +```js +removeChild(child); +``` + +### 引数 + +- `child` + - : {{domxref("Node")}} で、 DOM から取り除きたい子ノードを指定します。 + +### 例外 + +- `NotFoundError` {{domxref("DOMException")}} + - : `child` がこのノードの子ではない場合に発生します。 +- {{jsxref("TypeError")}} + - : `child` が `null` であった場合に発生します。 + +## 例 + +### 単純な例 + +この HTML を使います。 + +```html +<div id="top"> + <div id="nested"></div> +</div> +``` + +親ノードが分かる場合に、指定された要素を取り除きます。 + +```js +let d = document.getElementById("top"); +let d_nested = document.getElementById("nested"); +let throwawayNode = d.removeChild(d_nested); +``` + +親ノードが分からないときに指定された要素を取り除きます。 + +```js +let node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +``` + +ある要素からすべての子を削除します。 + +```js +let element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +``` + +### TypeError が発生する例 + +```html +<!--HTML コードの例--> +<div id="top"> </div> +``` + +```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); + +// TypeError が発生 +let garbage = top.removeChild(nested); +``` + +### NotFoundError が発生する例 + +```html +<!--HTML コードの例--> +<div id="top"> + <div id="nested"></div> +</div> +``` + +```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); + +// 最初の呼び出しでは正しくノードを取り除く +let garbage = top.removeChild(nested); + +// NotFoundError が発生 +garbage = top.removeChild(nested); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.parentNode")}} +- {{domxref("Element.remove()")}} +- {{domxref("Node.cloneNode()")}} diff --git a/files/ja/web/api/node/replacechild/index.html b/files/ja/web/api/node/replacechild/index.html deleted file mode 100644 index 2c69ea2114..0000000000 --- a/files/ja/web/api/node/replacechild/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Node.replaceChild -slug: Web/API/Node/replaceChild -tags: - - API - - DOM - - Method - - Node - - Reference -translation_of: Web/API/Node/replaceChild ---- -<div>{{ApiRef("DOM")}}</div> - -<p><strong><code>Node.replaceChild()</code></strong> メソッドは指定ノードの子ノードを別のノードに置き換えます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>replacedNode</var> = <var>parentNode</var>.replaceChild(<var>newChild</var>, <var>oldChild</var>); -</pre> - -<ul> - <li><code>newChild</code> : <code>oldChild</code> を置き換える新しいノード（既存のノードは先に取り除かれます）</li> - <li><code>oldChild</code> : 置き換えられる既存ノード</li> - <li><code>replacedNode</code> : 置き換えられたノード（<code>oldChild</code> と同じノード）</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">// <div> -// <span id="childSpan">foo bar</span> -// </div> - -// ID も属性も内容も持たない空要素を生成 -var sp1 = document.createElement("span"); - -// 生成したノードに id 属性 'newSpan' を付与 -sp1.setAttribute("id", "newSpan"); - -// テキストノードを生成 -var sp1_content = document.createTextNode("新しい span 要素"); - -// 生成したテキストノードを先の空要素の子ノードとして配置 -sp1.appendChild(sp1_content); - -// 置換に先んじ、参照を代入 -var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード -var parentDiv = sp2.parentNode; // 置換対象ノードの親要素 - -// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換 -parentDiv.replaceChild(sp1, sp2); - - -// 上記コード実行後のノードは以下の様になります: -// <div> -// <span id="newSpan">新しい span 要素</span> -// </div> -</pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li> -</ul> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.replaceChild")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.removeChild")}}</li> -</ul> diff --git a/files/ja/web/api/node/replacechild/index.md b/files/ja/web/api/node/replacechild/index.md new file mode 100644 index 0000000000..da96d01cf6 --- /dev/null +++ b/files/ja/web/api/node/replacechild/index.md @@ -0,0 +1,96 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +tags: + - メソッド + - リファレンス +browser-compat: api.Node.replaceChild +translation_of: Web/API/Node/replaceChild +--- +{{APIRef("DOM")}} + +**`replaceChild()`** は {{domxref("Node")}} 要素のメソッドで、この（親）ノードの中の子ノードを置き換えます。 + +**`Node.replaceChild()`** メソッドは指定ノードの子ノードを別のノードに置き換えます。 + +## 構文 + +```js +replaceChild(newChild, oldChild); +``` + +### 引数 + +- `newChild` + - : `oldChild` を置き換える新しいノードです。 + > **Warning:** 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。 +- `oldChild` + - : 置き換えられる子ノードです。 + +> **Note:** 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。 +[`Element.replaceWith()`](/ja/docs/Web/API/Element/replaceWith) は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。 + +### 返値 + +置き換えられた {{domxref("Node")}} です。これは `oldChild` と同じノードです。 + +### 例外 + +- `HierarchyRequestError` {{domxref("DOMException")}} + - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。 + - `oldChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。 + - `oldChild` を `newChild` で置き換えると循環参照になる場合。すなわち `newChild` がこのノードの祖先である場合。 + - `newChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。 + - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。 + - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。 + - このノードの親が {{domxref("Document")}} で `newChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。 + - `oldChild` を `newChild` で置き換えると、 {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。 + - `oldChild` を `newChild` で置き換えると、 {{domxref("Element")}} ノードが {{domxref("DocumentType")}} の前になる場合。 +- `NotFoundError` {{domxref("DOMException")}} + - : `oldChild` の親ノードが現在のノードではない場合に発生します。 + +## 例 + +```js +// 前提: +// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// ID も属性も内容も持たない空要素を生成 +const sp1 = document.createElement("span"); + +// 生成したノードに id 属性 'newSpan' を付与 +sp1.id = "newSpan"; + +// 新しい要素にいくらかの内容を作成 +const sp1_content = document.createTextNode("新しい置換 span 要素"); + +// その内容を新しい要素に適用 +sp1.appendChild(sp1_content); + +// 置き換えられる既存のノードの参照を作る +const sp2 = document.getElementById("childSpan"); +const parentDiv = sp2.parentNode; + +// 既存のノード sp2 を新しい span 要素 sp1 で置換 +parentDiv.replaceChild(sp1, sp2); + +// 結果: +// <div> +// <span id="newSpan">新しい置換 span 要素</span> +// </div> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.removeChild")}} +- {{domxref("Element.replaceWith")}} diff --git a/files/ja/web/api/node/textcontent/index.html b/files/ja/web/api/node/textcontent/index.html deleted file mode 100644 index 3f90221d9f..0000000000 --- a/files/ja/web/api/node/textcontent/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Node.textContent -slug: Web/API/Node/textContent -tags: - - API - - DOM - - Node - - Property - - Reference - - プロパティ -translation_of: Web/API/Node/textContent ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>textContent</strong></code> は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。</p> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> <code>textContent</code> と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは<a href="#Differences_from_innerText">重要な点が異なります</a>。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">let <var>text</var> = <var>someNode</var>.textContent -<var>someOtherNode</var>.textContent = <var>string</var> -</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>文字列または {{jsxref("null")}}</p> - -<h2 id="Description" name="Description">説明</h2> - -<p><code>textContent</code> の値は状況によります。</p> - -<ul> - <li>ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 <code>textContent</code> は {{jsxref("null")}} を返します。 - - <div class="note"><strong>メモ:</strong> 文書全体の<em>すべての</em>テキストと <a href="/ja/docs/Web/API/CDATASection">CDATA データ</a>を取得するには、 <code><a href="/ja/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> を使用する方法があります。</div> - </li> - <li>ノードが <a href="/ja/docs/Web/API/CDATASection">CDATA セクション</a>、コメント、<a href="/ja/docs/Web/API/ProcessingInstruction">処理命令ノード</a>、 <a href="/ja/docs/Web/API/Text">テキストノード</a>の場合、 <code>textContent</code> はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。</li> - <li>他のノードタイプの場合、<code>textContent</code> は、コメントと処理命令ノードを除く、すべての子ノードの <code>textContent</code> 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)</li> -</ul> - -<p>ノードの <code>textContent</code> を設定すると、そのノードの<em>すべて</em>の子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。</p> - -<h3 id="Differences_from_innerText" name="Differences_from_innerText">innerText との違い</h3> - -<p><code>Node.textContent</code> と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。</p> - -<ul> - <li><code>textContent</code> は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、<em>すべて</em>の要素の内容を取得します。一方、 <code>innerText</code> は「人間が読める」要素のみを示します。</li> - <li><code>textContent</code> はノード内のすべての要素を返します。一方、 <code>innerText</code> はスタイルを反映し、「非表示」の要素のテキストを返しません。 - <ul> - <li>もっと言えば、 <code>innerText</code> は CSS のスタイルを考慮するので、 <code>innerText</code> の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)</li> - </ul> - </li> - <li><code>textContent</code> とは異なり、 <code>innerText</code> を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを<em>完全に破棄します</em>。他の要素または同じ要素にノードをもう一度挿入することは不可能です。</li> -</ul> - -<h3 id="Differences_from_innerHTML" name="Differences_from_innerHTML">innerHTML との違い</h3> - -<p>{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 <code>innerHTML</code> を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 <code>textContent</code> は値が HTML として解析されないので性能が良くなります。</p> - -<p>さらに、<code>textContent</code> を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>以下のような HTML の断片があります。</p> - -<pre class="brush: html"><div id="divA">This is <span>some</span> text!</div></pre> - -<p>... <code>textContent</code> を使用して、要素のテキストの内容を取得することができます。</p> - -<pre class="brush: js">let text = document.getElementById('divA').textContent; -// 変数 text の値は 'This is some text!' となります。</pre> - -<p>... また、要素のテキストを設定します。</p> - -<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!'; -// divA の HTML は次のようになります。 -// <div id="divA">This text is different!</div> -</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-node-textcontent','Node.textContent')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Node.textContent")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("HTMLElement.innerText")}}</li> - <li>{{domxref("Element.innerHTML")}}</li> - <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (ブログ投稿)</li> -</ul> diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md new file mode 100644 index 0000000000..1777a5cd21 --- /dev/null +++ b/files/ja/web/api/node/textcontent/index.md @@ -0,0 +1,81 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - プロパティ + - リファレンス +browser-compat: api.Node.textContent +translation_of: Web/API/Node/textContent +--- +{{APIRef("DOM")}} + +**`textContent`** は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。 + +> **Note:** `textContent` と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、 2 つのプロパティは[重要な点が異なります](#innertext_との違い)。 + +## 値 + +文字列または {{jsxref("null")}} です。値は場面によります。 + +- ノードが {{domxref("document")}} または {{glossary("doctype")}} である場合、 `textContent` は {{jsxref("null")}} を返します。 + + > **Note:** 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、 `document.documentElement.textContent` を使用する方法があります。 + +- ノードが [CDATA セクション](/ja/docs/Web/API/CDATASection)、コメント、[処理命令ノード](/ja/docs/Web/API/ProcessingInstruction)、 [テキストノード](/ja/docs/Web/API/Text)の場合、 `textContent` はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。 +- 他のノード型の場合、`textContent` は、コメントと処理命令ノードを除く、すべての子ノードの `textContent` 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。） + +> **Warning:** ノードの `textContent` を設定すると、そのノードの*すべて*の子が取り除かれて、指定された値を持つ単一のテキストノードに置き換わります。 + +### innerText との違い + +`Node.textContent` と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。 + +- `textContent` は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、*すべて*の要素の中身を取得します。一方、 `innerText` は「人間が読める」要素のみを示します。 +- `textContent` はノード内のすべての要素を返します。一方、 `innerText` はスタイルを反映し、「非表示」の要素のテキストは返しません。 + + - もっと言えば、 `innerText` は CSS のスタイルを考慮するので、 `innerText` の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。) + +- `textContent` とは異なり、 `innerText` を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを*完全に破棄します*。他の要素または同じ要素にノードをもう一度挿入することは不可能です。 + +### innerHTML との違い + +{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 `innerHTML` を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 `textContent` は値が HTML として解析されないので性能が良くなります。 + +さらに、`textContent` を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。 + +## 例 + +以下のような HTML の断片があります。 + +```html +<div id="divA">This is <span>some</span> text!</div> +``` + +... `textContent` を使用して、要素のテキストの内容を取得することができます。 + +```js +let text = document.getElementById('divA').textContent; +// 変数 text の値は 'This is some text!' となります。 +``` + +... また、要素のテキストを設定します。 + +```js +document.getElementById('divA').textContent = 'This text is different!'; +// divA の HTML は次のようになります。 +// <div id="divA">This text is different!</div> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLElement.innerText")}} +- {{domxref("Element.innerHTML")}} +- [More on differences between `innerText` and `textContent`](http://perfectionkills.com/the-poor-misunderstood-innerText/) (ブログ投稿) diff --git a/files/ja/web/api/performance/onresourcetimingbufferfull/index.md b/files/ja/web/api/performance/onresourcetimingbufferfull/index.md deleted file mode 100644 index 7c13934198..0000000000 --- a/files/ja/web/api/performance/onresourcetimingbufferfull/index.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Performance.onresourcetimingbufferfull -slug: Web/API/Performance/onresourcetimingbufferfull -tags: - - API - - プロパティ - - リファレンス - - ウェブパフォーマンス -browser-compat: api.Performance.onresourcetimingbufferfull -translation_of: Web/API/Performance/onresourcetimingbufferfull ---- -{{APIRef("Resource Timing API")}} - -**`onresourcetimingbufferfull`** プロパティは、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるイベントハンドラーです。このイベントは、ブラウザーのリソースタイミングパフォーマンスバッファーがいっぱいになったときに発生します。 - -{{AvailableInWorkers}} - -## 構文 - -```js -callback = performance.onresourcetimingbufferfull = buffer_full_cb; -``` - -### 返値 - -- callback - - : [イベントハンドラー](/ja/docs/Web/Events/Event_handlers)で、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるものです。 -</dl> - -## 例 - -次の例では、 `onresourcetimingbufferfull` プロパティにコールバック関数を設定します。 - -```js -function buffer_full(event) { - console.log("WARNING: Resource Timing Buffer is FULL!"); - performance.setResourceTimingBufferSize(200); -} -function init() { - // リソースバッファーが一杯になったときのコールバックを設定 - performance.onresourcetimingbufferfull = buffer_full; -} -<body onload="init()"> -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベント -- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}} -- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}} diff --git a/files/ja/web/api/screen/onorientationchange/index.html b/files/ja/web/api/screen/orientationchange_event/index.html index 975b5ede0e..67b8f8a6b2 100644 --- a/files/ja/web/api/screen/onorientationchange/index.html +++ b/files/ja/web/api/screen/orientationchange_event/index.html @@ -1,6 +1,6 @@ --- title: Screen.onorientationchange -slug: Web/API/Screen/onorientationchange +slug: Web/API/Screen/orientationchange_event tags: - API - CSSOM View @@ -9,6 +9,7 @@ tags: - Property - Screen Orientation translation_of: Web/API/Screen/onorientationchange +original_slug: Web/API/Screen/onorientationchange --- <p>{{APIRef("Screen Orientation API")}}{{Deprecated_Header}}</p> diff --git a/files/ja/web/api/screen_wake_lock_api/index.md b/files/ja/web/api/screen_wake_lock_api/index.md new file mode 100644 index 0000000000..306f50dc72 --- /dev/null +++ b/files/ja/web/api/screen_wake_lock_api/index.md @@ -0,0 +1,137 @@ +--- +title: 画面起動ロック API +slug: Web/API/Screen_Wake_Lock_API +tags: + - API + - 概要 + - リファレンス + - 画面起動ロック API + - Wake Lock + - WakeLock + - screen +--- +{{DefaultAPISidebar("Screen Wake Lock API")}} + +画面起動ロック API は、アプリケーションの実行を継続する必要がある場合に、端末が画面を暗くしたり、ロックしたりするのを防ぐ方法を提供します。 + +## 概念と用途 + +ほとんどの端末は、ハードウェアの寿命を延ばすために、一定時間が経過すると画面をオフにすることが既定になっています。最近の端末は、バッテリーの消費電力を節約するためにこれを行っています。これは有益な機能ですが、アプリケーションによっては、使いやすくするために画面が起動したままの状態にする必要があるものもあります。 + +画面起動ロック API は、画面の消灯、暗転、ロックを防止します。以前は電力を浪費する可能性がある方法でしか実現できないものでしたが、シンプルなプラットフォームベースの解決策を取ることができるようになりました。画面起動ロックを取得できるのは、表示されている（アクティブな）文書のみです。 + +画面を表示したままにする用途はたくさんあります。電子書籍の閲覧、地図ナビゲーション、レシピの確認、聴衆へのプレゼンテーション、 QR/バーコードのスキャン、（画面を表示し続けるためのよく使う）触覚入力ではなく音声やジェスチャーコントロールを使用するアプリケーションなどです。 + +{{DOMxRef("WakeLockSentinel")}} オブジェクトを取得するには、 {{domxref('WakeLock.request','navigator.wakeLock.request()')}} を呼び出します。これはプラットフォームが許可していれば解決する {{jsxref('Promise')}} ベースのメソッドです。リクエストが拒否される理由はいくつかあります。例えば、システム設定（省電力モードやバッテリー残量が少ない場合など）、文書がアクティブでない、または表示されていないなどです。 + +基礎となるシステムの起動ロックには、見張り (sentinel) が割り当てられます。これは、バッテリーの残量が少なくなったり、文書がアクティブでなくなったり、または表示されなくなったりした場合などに、システムによって解放されます。また、 {{domxref('WakeLockSentinel.release()')}} メソッドを使用して手動で解除することもできます。見張りオブジェクトへの参照を保存しておくと、後で解放を制御したり、必要に応じてロックを再取得することができます。 + +画面起動ロック API を使用して画面を表示したままにするのは、ユーザビリティを向上させる目的で行うべきです。インターフェイス上で画面ロックが有効になっているかどうかを表示したり、またはユーザーが望むならそれを無効にする方法を表示したりするのはいい考えです。 + +## 画面起動ロック API のインターフェイス + +- {{domxref("WakeLock")}} + - : **`WakeLock`** インターフェイスは、アプリケーションが実行し続ける必要があるときに画面が暗くなるのを防いだり、ロックされたりするのを防止します。 +- {{domxref("WakeLockSentinel")}} + - : 基礎となるプラットフォームの起動ロックへのハンドルを提供し、参照されている場合は、手動で解放および再取得することができます。このオブジェクトのインスタンスを取得するには、 {{domxref('WakeLock.request')}} を呼び出してください。 +- {{domxref("Navigator.wakelock")}} + - : {{domxref("WakeLock")}} オブジェクトのインスタンスを返します。ここから他のすべての機能にアクセスできます。 + +## 例 + +### 機能検出 + +このコードは、起動ロックに対応しているかどうかをチェックし、それに応じて UI を更新します。 + +```js +if ('wakeLock' in navigator) { + isSupported = true; + statusElem.textContent = '起動ロック API に対応しています。'; +} else { + wakeButton.disabled = true; + statusElem.textContent = 'このブラウザーは起動ロックに対応していません。'; +} +``` + +### 起動ロックの要求 + +次の例は、 {{domxref('WakeLockSentinel')}} オブジェクトを要求する方法を示しています。{{domxref('WakeLock.request')}} メソッドは {{jsxref('Promise')}} ベースなので、非同期関数を作成し、 UI を更新して起動ロックが有効であることを反映させることができます。 + +```js +// 起動ロックの参照を作成 +let wakeLock = null; + +// 非同期関数を作成して起動ロックをリクエスト +try { + wakeLock = await navigator.wakeLock.request('screen'); + statusElem.textContent = '起動ロックが有効です。'; +} catch (err) { + // 起動ロックのリクエストに失敗。ふつうはバッテリーなどのシステム関連 + statusElem.textContent = `${err.name}, ${err.message}`; +} +``` + +### 起動ロックの解放 + +以下の例は、以前取得した起動ロックを開放する方法を示しています。 + +```js +wakeLock.release() + .then(() => { + wakeLock = null; + }); +``` + +### 起動ロック解放の表示 + +この例では、何らかの方法で起動ロックが解放された場合（アクティブウィンドウやタブから移動した場合など）に UI を更新します。 + +```js +wakeLock.addEventListener('release', () => { + // 起動ロックが解放 + statusElem.textContent = '起動ロックが解放されました'; +}); +``` + +### 起動ロックの再取得 + +以下のコードは、文書の可視性が変化し、起動ロックが解除された場合に、起動ロックを再取得するものです。 + +```js +document.addEventListener('visibilitychange', async () => { + if (wakeLock !== null && document.visibilityState === 'visible') { + wakeLock = await navigator.wakeLock.request('screen'); + } +}); +``` + +### すべてをまとめる + +[GitHub にある完全なコードはこちら](https://github.com/mdn/dom-examples/tree/master/screen-wake-lock-api)にあります。[デモ](https://mdn.github.io/dom-examples/screen-wake-lock-api/)では、ボタンで起動ロックの取得と解除を行い、 UI を更新しています。また、何らかの理由で起動ロックが自動的に解除された場合も UI が更新されます。チェックボックスがあり、これをオンにすると、文書の表示状態が変化して再び表示されるようになった場合に、起動ロックを自動的に再取得することができます。 + +### パフォーマンスの考慮事項 + +- 常時画面を表示する必要があったアクティビティが終了した時点で、画面起動ロックを解除してください。例えば、 QR コードを使ってチケット情報を送信するチケット販売アプリでは、 QR コードを表示している間は（コードの読み取りを成功させるために）画面起動ロックを取得しても良いのですが、終わったら解除してください。プレゼンテーションアプリでは、プレゼンテーションがアクティブな間のみロックを保持し、プレゼンテーションの編集中はロックを保持しないようにしてください。 +- アプリが長時間ダウンロードを行う場合は、バックグラウンドフェッチの使用を検討してください。 +- アプリがリモートサーバーからデータを同期している場合は、バックグラウンド同期を使用することを検討してください。 +- アクティブな文書のみがスクリーン起動ロックを取得でき、文書が非アクティブになると、以前に取得したロックは自動的に解放されます。したがって、文書がアクティブになったら、必要に応じてスクリーン起動ロックを再取得するようにしてください（[visibilitychange](/ja/docs/Web/API/Document/visibilitychange_event) イベントを待ち受けます）。 + +## 機能ポリシーの統合 + +画面起動ロック API へのアクセスは、[機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)の {{HTTPHeader("Feature-Policy/screen-wake-lock","screen-wake-lock")}} ディレクティブによって制御されています。使用方法のリファレンスは[機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)を参照してください。 + +## 仕様書 + +| 仕様書 | +| --------------------------------------------------------------- | +| [Screen Wake Lock API](https://w3c.github.io/screen-wake-lock/) | + +## ブラウザーの互換性 + +{{Compat("api.WakeLock")}} + +## 関連情報 + +- [An introductory article on the Screen Wake Lock API](https://web.dev/wakelock/) +- [A Screen Wake Lock API demo on glitch](https://wake-lock-demo.glitch.me/) +- [機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)の {{HTTPHeader("Feature-Policy/screen-wake-lock","screen-wake-lock")}} ディレクティブ diff --git a/files/ja/web/api/stylepropertymapreadonly/entries/index.md b/files/ja/web/api/stylepropertymapreadonly/entries/index.md new file mode 100644 index 0000000000..2a6aaeb799 --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/entries/index.md @@ -0,0 +1,58 @@ +--- +title: StylePropertyMapReadOnly.entries() +slug: Web/API/StylePropertyMapReadOnly/entries +tags: + - API + - CSS 型付きオブジェクトモデル API + - 実験的 + - Houdini + - メソッド + - リファレンス + - StylePropertyMapReadOnly + - entries() +browser-compat: api.StylePropertyMapReadOnly.entries +translation_of: Web/API/StylePropertyMapReadOnly/entries +--- +{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}} + +**`StylePropertyMapReadOnly.entries()`** メソッドは、このオブジェクトが持つ列挙可能なプロパティの `[key, value]` の組の配列を、 {{jsxref("Statements/for...in", "for...in")}} ループで提供されるのと同じ順序で返します（違いは for-in ループではプロトタイプチェーン内のプロパティも列挙する点です）。 + +## 構文 + +```js +StylePropertyMapReadOnly.entries() +``` + +### 引数 + +なし。 + +### 返値 + +この `StylePropertyMapReadOnly` オブジェクトが持つ列挙可能な `[key, value]` の組の配列です。 + +## 例 + +こちらは、 `StylePropertyMapReadOnly.entries()` メソッドを使用して要素の計算済みスタイルを取得する例です。 + +```js +// DOM 要素を取得 +const buttonEl = document.querySelector('button'); + +// `computedStyleMap` ですべての計算済みスタイルが取得できます +const allComputedStyles = buttonEl.computedStyleMap(); + +// entries は項目の反復可能オブジェクトを返します +const iterableStyles = allComputedStyles.entries(); + +// align-content を最初の項目、 CSSStyleValue を 2 番目の項目とする 2 項目の配列を返します。 +console.log(iterableStyles.next().value); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/stylepropertymapreadonly/foreach/index.md b/files/ja/web/api/stylepropertymapreadonly/foreach/index.md new file mode 100644 index 0000000000..24ea2289e0 --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/foreach/index.md @@ -0,0 +1,71 @@ +--- +title: StylePropertyMapReadOnly.forEach() +slug: Web/API/StylePropertyMapReadOnly/forEach +tags: + - API + - CSS Typed Object Model API + - 実験的 + - Houdini + - メソッド + - リファレンス + - StylePropertyMapReadOnly + - forEach() +browser-compat: api.StylePropertyMapReadOnly.forEach +translation_of: Web/API/StylePropertyMapReadOnly/forEach +--- +{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}} + +**`StylePropertyMapReadOnly.forEach()`** メソッドは、指定された関数を {{domxref('StylePropertyMapReadOnly')}} のそれぞれの要素に対して 1 回ずつ呼び出します。 + +## 構文 + +```js +StylePropertyMapReadOnly.forEach(function callback(currentValue[, index[, array]]) { + //コード +}[, thisArg]); +``` + +### 引数 + +- `callback` + + - : それぞれの要素に対して呼び出す関数であり、 3 つの引数を取ります。 + + - `currentValue` + - : 処理しようとしている現在の要素の値です。 + - `index`{{optional_inline}} + - : 処理しようとしている現在の要素の位置です。 + - `array`{{optional_inline}} + - : `forEach()` が呼び出された StylePropertyMapReadOnly です。 + +- `thisArg` {{Optional_inline}} + - : `callback` を実行するときに **`this`** として使用する値（すなわち、 `Object` への参照）です。 + +### 返値 + +{{jsxref("undefined")}} です。 + +## 例 + +こちらは、 `forEach()` を {{domxref('Element.computedStyleMap()')}} の結果に対して使用する例です。 + +```js +// button 要素を取得 +const buttonEl = document.querySelector('.example'); + +// `computedStyleMap` ですべての計算済みスタイルが取得できます +const allComputedStyles = buttonEl.computedStyleMap(); + +// forEach ですべてのプロパティ/値の組に対してコードを実行することができます +allComputedStyles.forEach((elem, index, arr) => { + // code to run for each pair +}) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/stylepropertymapreadonly/get/index.md b/files/ja/web/api/stylepropertymapreadonly/get/index.md new file mode 100644 index 0000000000..c3c45925c1 --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/get/index.md @@ -0,0 +1,101 @@ +--- +title: StylePropertyMapReadOnly.get() +slug: Web/API/StylePropertyMapReadOnly/get +tags: + - API + - CSS Typed Object Model API + - 実験的 + - Houdini + - メソッド + - リファレンス + - get() +browser-compat: api.StylePropertyMapReadOnly.get +translation_of: Web/API/StylePropertyMapReadOnly/get +--- +{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}} + +**`get()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティの最初の値を {{domxref("CSSStyleValue")}} で返します。 + +## 構文 + +```js +var declarationBlock = StylePropertyMapReadOnly.get(property) +``` + +### 引数 + +- property + - : 値を取得するプロパティの名前です。 + +### 返値 + +{{domxref("CSSStyleValue")}} オブジェクトです。 + +## 例 + +少しだけ、プロパティと値を取得してみましょう。まず、 HTML の段落の中にリンクを作成し、 JavaScript で入力する定義リストを追加しましょう。 + +```html +<p> + <a href="https://example.com">リンク</a> +</p> +<dl id="results"></dl> +``` + +カスタムプロパティや継承可能なプロパティなど、ちょっとした CSS を追加しています。 + +```css +p { + font-weight: bold; +} +a { + --color: red; + color: var(--color); +} +``` + +Element インターフェイスの [`computedStyleMap()`](/ja/docs/Web/API/Element/computedStyleMap) を使用して、 _StylePropertyMapReadOnly_ オブジェクトを返します。興味のあるプロパティの配列を作成し、 StylePropertyMapReadOnly の `get()` メソッドを使用してそれらの値のみを取得します。 + +```js +// 要素を取得 +const myElement = document.querySelector('a'); + +// すべての計算済みスタイルを `computedStyleMap` で受け取る +const styleMap = myElement.computedStyleMap(); + +// 入力する <dl> を取得 +const stylesList = document.querySelector('#results'); + +// 関心のあるプロパティのリスト +const ofInterest = ['font-weight', 'border-left-color', 'color', '--color']; + +// 関心のあるプロパティを反復処理 +for ( let i = 0; i < ofInterest.length; i++ ) { + + // プロパティ + const cssProperty = document.createElement('dt'); + cssProperty.innerText = ofInterest[i]; + stylesList.appendChild(cssProperty); + + // 値 + const cssValue = document.createElement('dd'); + // use get() to find the value + cssValue.innerText = styleMap.get(ofInterest[i]); + stylesList.appendChild(cssValue); +} +``` + +{{EmbedLiveSample("Examples", 120, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 型付きオブジェクトモデル API](/ja/docs/Web/Houdini/CSS_Typed_OM) +- [Houdini の学習: CSS 型付きオブジェクトモデル](/ja/docs/Web/Houdini/learn/CSS_Typed_OM) diff --git a/files/ja/web/api/stylepropertymapreadonly/getall/index.md b/files/ja/web/api/stylepropertymapreadonly/getall/index.md new file mode 100644 index 0000000000..216e826ea2 --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/getall/index.md @@ -0,0 +1,57 @@ +--- +title: StylePropertyMapReadOnly.getAll() +slug: Web/API/StylePropertyMapReadOnly/getAll +tags: + - API + - CSS Typed Object Model API + - 実験的 + - Houdini + - メソッド + - リファレンス + - StylePropertyMapReadOnly + - getAll() +browser-compat: api.StylePropertyMapReadOnly.getAll +translation_of: Web/API/StylePropertyMapReadOnly/getAll +--- +{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}} + +**`getAll()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティの値を含む {{domxref("CSSStyleValue")}} オブジェクトの配列を返します。 + +## 構文 + +```js +var cssStyleValues[] = StylePropertyMapReadOnly.getAll(property) +``` + +### 引数 + +- property + - : すべての値を取得するプロパティの名前です。 + +### 返値 + +{{domxref("CSSStyleValue")}} オブジェクトの配列です。 + +## 例 + +以下の例では、 `getAll()` を使用して {{cssxref('background-image')}} プロパティに対して使用しています。宣言されているそれぞれの背景画像の項目が入った {{jsxref('Array')}} を返します。 + +```js +// button 要素を取得 +const buttonEl = document.querySelector('button'); + +// `computedStyleMap` ですべての計算済みスタイルが取得できます +const allComputedStyles = buttonEl.computedStyleMap(); + +// getAll() を background-image プロパティに対して使用 +const allBkImages = allComputedStyles.getAll('background-image'); +console.log(allBkImages); // それぞれの背景画像を項目とした配列を出力 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/stylepropertymapreadonly/has/index.md b/files/ja/web/api/stylepropertymapreadonly/has/index.md new file mode 100644 index 0000000000..1014a7671a --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/has/index.md @@ -0,0 +1,55 @@ +--- +title: StylePropertyMapReadOnly.has() +slug: Web/API/StylePropertyMapReadOnly/has +tags: + - API + - CSS Typed Object Model API + - 実験的 + - Houdini + - メソッド + - リファレンス + - StylePropertyMapReadOnly + - has() +browser-compat: api.StylePropertyMapReadOnly.has +translation_of: Web/API/StylePropertyMapReadOnly/has +--- +{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}} + +**`has()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。 + +## 構文 + +```js +var boolean = StylePropertyMapReadOnly.has(property) +``` + +### 引数 + +- property + - : プロパティの名前です。 + +### 返値 + +論理値です。 + +## 例 + +ここでは、 `has()` メソッドを使用して、 padding-top プロパティが button 要素の style 属性に存在するかどうかを確認します。 + +```js +// button 要素を取得 +const buttonEl = document.querySelector('.example'); + +// style 属性内のものを attributeStyleMap および has() で検索 +const hasPadTop = buttonEl.attributeStyleMap.has('padding-top); + +console.log(hasPadTop); // padding-top が style 属性にあれば true を記録 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/stylepropertymapreadonly/index.md b/files/ja/web/api/stylepropertymapreadonly/index.md new file mode 100644 index 0000000000..c7849699c3 --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/index.md @@ -0,0 +1,97 @@ +--- +title: StylePropertyMapReadOnly +slug: Web/API/StylePropertyMapReadOnly +tags: + - API + - CSS 型付きオブジェクトモデル API + - 実験的 + - Houdini + - インターフェイス + - リファレンス + - StylePropertyMapReadOnly +browser-compat: api.StylePropertyMapReadOnly +translation_of: Web/API/StylePropertyMapReadOnly +--- +{{SeeCompatTable}}{{APIRef("CSS Typed Object Model API")}} + +**`StylePropertyMapReadOnly`** は [CSS 型付きオブジェクトモデル API](/ja/docs/Web/API/CSS_Typed_Object_Model_API) のインターフェイスで、 {{domxref("CSSStyleDeclaration")}} の代替となる読み取り専用の CSS 宣言ブロックの表現を提供します。このインターフェイスのインスタンスを取得するには、 {{domxref('Element.computedStyleMap','Element.computedStyleMap()')}} を使用してください。 + +## プロパティ + +- {{domxref('StylePropertyMapReadOnly.size')}} + - : `StylePropertyMapReadOnly` オブジェクトの大きさを、符号なし長整数値で返します。 + +## メソッド + +- {{domxref('StylePropertyMapReadOnly.entries()')}} + - : このオブジェクト自身の列挙可能なプロパティ `[key, value]` の組を、 {{jsxref("Statements/for...in", "for...in")}} ループが提供するものと同じ順序で配列として返します（違いは、 for-in ループがプロトタイプチェーン内のプロパティも列挙することです）。 +- {{domxref('StylePropertyMapReadOnly.forEach()')}} + - : 指定された関数を `StylePropertyMapReadOnly` のそれぞれの要素について 1 回ずつ実行します。 +- {{domxref('StylePropertyMapReadOnly.get()')}} + - : 指定されたプロパティの値を返します。 +- {{domxref('StylePropertyMapReadOnly.getAll()')}} + - : 指定されたプロパティの値を含む {{domxref("CSSStyleValue")}} オブジェクトの配列を返します。 +- {{domxref('StylePropertyMapReadOnly.has()')}} + - : 指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。 +- {{domxref('StylePropertyMapReadOnly.keys()')}} + - : `StylePropertyMapReadOnly` 内のそれぞれの項目のキーを含む新しい*配列反復子*を返します。 +- {{domxref('StylePropertyMapReadOnly.values()')}} + - : `StylePropertyMapReadOnly` 内のそれぞれの項目の値を含む新しい*配列反復子*を返します。 + +## 例 + +観察するための要素を用意します。 + +```html +<p> + これは、いくつかのテキストを含む段落です。 CSS を追加することもできますし、しないこともできます。スタイルマップには、既定のものと継承されたすべての CSS プロパティ値が含まれます。 +</p> +<dl id="output"></dl> +``` + +出力をよりよくするに、カスタムプロパティで CSS を少々追加します。 + +```css +p { + --someVariable: 1.6em; + --someOtherVariable: translateX(33vw); + --anotherVariable: 42; + line-height: var(--someVariable); +} +``` + +JavaScript を追加して段落を取得し、 {{domxref('Element.computedStyleMap()')}} を使って、すべての既定の CSS プロパティ値の定義リストを返します。 + +```js +// 要素を取得 +const myElement = document.querySelector('p'); + +// 入力する <dl> を取得 +const stylesList = document.querySelector('#output'); + +// computedStyleMap() ですべての計算済みスタイルを取得 +const stylePropertyMap = myElement.computedStyleMap(); + +// すべてのプロパティと値のマップを反復処理して、それぞれ <dt> と <dd> を追加 +for (const [prop, val] of stylePropertyMap) { + // プロパティ + const cssProperty = document.createElement('dt'); + cssProperty.innerText = prop; + stylesList.appendChild(cssProperty); + + // 値 + const cssValue = document.createElement('dd'); + cssValue.innerText = val; + stylesList.appendChild(cssValue); +} +``` + +{{EmbedLiveSample("Examples", 120, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/stylepropertymapreadonly/keys/index.md b/files/ja/web/api/stylepropertymapreadonly/keys/index.md new file mode 100644 index 0000000000..d771251f8d --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/keys/index.md @@ -0,0 +1,56 @@ +--- +title: StylePropertyMapReadOnly.keys() +slug: Web/API/StylePropertyMapReadOnly/keys +tags: + - API + - CSS Typed Object Model API + - 実験的 + - Houdini + - メソッド + - リファレンス + - StylePropertyMapReadOnly + - keys() +browser-compat: api.StylePropertyMapReadOnly.keys +translation_of: Web/API/StylePropertyMapReadOnly/keys +--- +{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}} + +**`StylePropertyMapReadOnly.keys()`** メソッドは、 `StylePropertyMapReadOnly` の各項目のキーを含む新しい*配列反復子*を返します。 + +## 構文 + +```js +StylePropertyMapReadOnly.keys() +``` + +### 引数 + +なし。 + +### 返値 + +新しい {{jsxref("Array")}} です。 + +## 例 + +この例では、 `keys()` メソッドを使用して {{domxref('Element.computedStyleMap()')}} の中にあるプロパティにアクセスすることができます。 + +```js +// button 要素を取得 +const buttonEl = document.querySelector('button'); + +// すべての計算済みスタイルを `computedStyleMap` で受け取る +const allComputedStyles = buttonEl.computedStyleMap(); + +// keys はプロパティの反復可能なリストを返す +const props = allComputedStyles.keys(); +console.log(props.next().value); // align-content を返す +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/stylepropertymapreadonly/size/index.md b/files/ja/web/api/stylepropertymapreadonly/size/index.md new file mode 100644 index 0000000000..e4d02780e3 --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/size/index.md @@ -0,0 +1,52 @@ +--- +title: StylePropertyMapReadOnly.size +slug: Web/API/StylePropertyMapReadOnly/size +tags: + - API + - CSS 型付きオブジェクトモデル API + - 実験的 + - Houdini + - Property + - リファレンス + - StylePropertyMapReadOnly + - size +browser-compat: api.StylePropertyMapReadOnly.size +translation_of: Web/API/StylePropertyMapReadOnly/size +--- +{{SeeCompatTable}}{{APIRef("CSS Typed Object Model API")}} + +**`size`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスの読み取り専用プロパティで、 `StylePropertyMapReadOnly` オブジェクトの大きさを符号なし長整数で返します。 + +## 構文 + +```js +var size = StylePropertyMapReadOnly.size +``` + +### 値 + +符号なし長整数です。 + +## 例 + +ここでは size プロパティを使用して、この button 要素の {{domxref('Element.computedStyleMap()','computedStyleMap')}} に含まれる項目の数を返します。 + +```js +// 要素を取得 +const buttonEl = document.querySelector('button'); + +// `computedStyleMap` ですべての計算済みスタイルが取得できます +const allComputedStyles = buttonEl.computedStyleMap(); + +// size を使用してマップ内にあるスタイルの数を取得します +const amountStyles = allComputedStyles.size; +console.log(amountStyles); // 338 と表示 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/stylepropertymapreadonly/values/index.md b/files/ja/web/api/stylepropertymapreadonly/values/index.md new file mode 100644 index 0000000000..a794db9dd5 --- /dev/null +++ b/files/ja/web/api/stylepropertymapreadonly/values/index.md @@ -0,0 +1,56 @@ +--- +title: StylePropertyMapReadOnly.values() +slug: Web/API/StylePropertyMapReadOnly/values +tags: + - API + - CSS Typed Object Model API + - 実験的 + - Houdini + - メソッド + - リファレンス + - StylePropertyMapReadOnly + - values() +browser-compat: api.StylePropertyMapReadOnly.values +translation_of: Web/API/StylePropertyMapReadOnly/values +--- +{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}} + +**`StylePropertyMapReadOnly.values()`** メソッドは、 `StylePropertyMapReadOnly` オブジェクトのそれぞれのインデックスに対応する値を含む新しい*配列反復子*を返します。 + +## 構文 + +```js +StylePropertyMapReadOnly.values() +``` + +### 引数 + +なし。 + +### 返値 + +新しい {{jsxref("Array")}} です。 + +## 例 + +この例では、 `values()` メソッドを使用して [`Element.computedStyleMap()`](/ja/docs/Web/API/Element/computedStyleMap) の中にある値にアクセスすることができます。 + +```js +// button 要素を取得 +const buttonEl = document.querySelector('button'); + +// すべての計算済みスタイルを `computedStyleMap` で受け取る +const allComputedStyles = buttonEl.computedStyleMap(); + +// values は CSS 値の反復可能なリストを返す +const vals = allComputedStyles.values(); +console.log(vals.next().value); // CSSStyleValue を返す +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/wakelock/index.md b/files/ja/web/api/wakelock/index.md new file mode 100644 index 0000000000..6a7929ce07 --- /dev/null +++ b/files/ja/web/api/wakelock/index.md @@ -0,0 +1,43 @@ +--- +title: WakeLock +slug: Web/API/WakeLock +tags: + - インターフェイス + - リファレンス + - 画面起動ロック API + - 起動ロック + - 画面 +browser-compat: api.WakeLock +translation_of: Web/API/WakeLock +--- +{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}} + +**`WakeLock`** は[画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) のインターフェイスで、アプリケーションが動作し続ける必要があるときに、端末の画面が暗くなったりロックされたりすることを防ぐためのものです。 + +システムの起動ロックはグローバルの {{domxref('Navigator.wakeLock')}} プロパティで公開されています。 + +## メソッド + +- `{{domxref("WakeLock.request", "request")}}` + - : {{domxref("WakeLockSentinel")}} オブジェクトを要求し、 {{domxref("WakeLockSentinel")}} オブジェクトで解決する {{jsxref("Promise")}} を返します。 + +## 例 + +以下の非同期関数は、 {{domxref("WakeLockSentinel")}} オブジェクトを要求します。{{domxref("WakeLock.request")}} メソッドはブラウザーが何らかの理由でリクエストを拒否した場合を想定して、 `try...catch` 文で囲まれています。 + +```js +try { + const wakeLock = await navigator.wakeLock.request('screen'); +} catch (err) { + // 起動ロックの要求に失敗 - 通常は、バッテリー低下などシステムに起因する。 + console.log(`${err.name}, ${err.message}`); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/wakelock/request/index.md b/files/ja/web/api/wakelock/request/index.md new file mode 100644 index 0000000000..c5fb43d0a2 --- /dev/null +++ b/files/ja/web/api/wakelock/request/index.md @@ -0,0 +1,78 @@ +--- +title: WakeLock.request() +slug: Web/API/WakeLock/request +tags: + - API + - Method + - リファレンス + - 画面起動ロック API + - WakeLock +browser-compat: api.WakeLock.request +translation_of: Web/API/WakeLock/request +--- +{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}} + +**`request()`** は {{domxref("WakeLock")}} インターフェイスのメソッドで、画面を暗くしたりロックしたりすることを制御することができる {{domxref("WakeLockSentinel")}} で解決するプロミス ({{jsxref("Promise")}}) を返します。 + +## 構文 + +```js +var wakeLock = navigator.wakeLock.request(type); +``` + +### 引数 + +- _type_ + + - : オプションは次の通りです。 + + - `'screen'`: 画面の起動ロックを要求します。端末の画面が暗くなったりロックされたりすることを防ぎます。 + +### 返値 + +{{domxref("WakeLockSentinel")}} オブジェクトで解決する {{jsxref("Promise")}} を返します。 + +### 例外 + +- `NotAllowedError` + + - : 起動ロックが利用できないときに発生します。原因は以下のようなものです。 + + - 文書が screen-wake-lock ポリシーにより、画面起動ロックを使用することができない。 + - 文書が完全にアクティブではない。 + - 文書が非表示になっている。 + - {{Glossary("User Agent", "ユーザーエージェント")}}がプラットフォームの起動ロックを取得できない。 + +## 例 + +以下の非同期関数は、 {{domxref("WakeLockSentinel")}} オブジェクトを要求します。 +`request()` メソッドはブラウザーが何らかの理由でリクエストを拒否した場合を想定して、 `try...catch` 文で囲まれています。 + +```js +const requestWakeLock = async () => { + try { + + const wakeLock = await navigator.wakeLock.request('screen'); + + } catch (err) { + // 起動ロックの要求に失敗 - 通常は、バッテリー低下などシステムに起因する。 + + console.log(`${err.name}, ${err.message}`); + } +} + +requestWakeLock(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef("WakeLock")}} +- {{DOMxRef("Navigator.wakeLock")}} diff --git a/files/ja/web/api/wakelocksentinel/index.md b/files/ja/web/api/wakelocksentinel/index.md new file mode 100644 index 0000000000..84641484eb --- /dev/null +++ b/files/ja/web/api/wakelocksentinel/index.md @@ -0,0 +1,89 @@ +--- +title: WakeLockSentinel +slug: Web/API/WakeLockSentinel +tags: + - API + - インターフェイス + - リファレンス + - 画面起動ロック API + - 起動ロック + - 画面 +browser-compat: api.WakeLockSentinel +translation_of: Web/API/WakeLockSentinel +--- +{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}} + +**`WakeLockSentinel`** は[画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) のインターフェイスで、基礎となるプラットフォームの起動ロックへのハンドルを提供し、手動で解放および再取得することができます。起動ロックを表す {{jsxref('Object')}} は {{domxref('WakeLock.request()','navigator.wakelock.request()')}} メソッドを介して返されます。 + +取得した `WakeLockSentinel` は {{domxref('WakeLockSentinel.release','release()')}} メソッドによって手動で解放するか、プラットフォームの起動ロックによって自動的に解放することが可能です。これは、文書が非アクティブになったり、見えなくなったりした場合、端末の電力が低下した場合、ユーザーが省電力モードをオンにした場合に発生する可能性があります。与えられた起動ロック種別のすべての `WakeLockSentinel` インスタンスを解放すると、基盤となるプラットフォームの起動ロックが解放されます。 + +{{InheritanceDiagram}} + +## プロパティ + +_このインターフェイスは以下のプロパティを提供しています。_ + +- {{domxref("WakeLockSentinel.released", "released")}} {{ReadOnlyInline}} + - : 論理値で、 `WakeLockSentinel` が解放されたかどうかを示します。 +- {{domxref("WakeLockSentinel.type", "type")}} {{ReadOnlyInline}} + + - : 文字列で、取得した現在の `WakeLockSentinel` の種別を示します。 + 返値は次の通りです。 + + - `'screen'`: 画面の起動ロックです。端末の画面が暗くなったりロックされたりすることを防ぎます。 + +## イベント + +- {{domxref("WakeLockSentinel.release_event", "release")}} + - : {{domxref('WakeLockSentinel.release','release()')}} メソッドが呼び出されるか、起動ロックがユーザーエージェントによって解放されると発行されます。 + +## メソッド + +- {{domxref('WakeLockSentinel.release()', 'release()')}} + - : `WakeLockSentinel` の解放を行い、解放に成功したら解決する {{jsxref("Promise")}} を返します。 + +## 例 + +この例では、 `WakeLockSentinel` を要求する非同期関数を作成します。取得した後は、適切な UI への反映を行うために使用することができる `release` イベントを待ちます。見張り (sentinel) は適切な操作で取得したり解放したりすることができます。 + +```js +// 起動ロックの参照を作成 +let wakeLock = null; + +// 起動ロックを要求するための非同期関数を作成 +const requestWakeLock = async () => { + try { + wakeLock = await navigator.wakeLock.request('screen'); + + // release イベントを待ち受け + wakeLock.addEventListener('release', () => { + // 起動ロックが解放されたら、それに合わせて UI を変更する + }); + + } catch (err) { + // 起動ロックに失敗した場合 - ふつうはバッテリーなどシステム関連 + + } +} + +wakeLockOnButton.addEventListener('click', () => { + requestWakeLock(); +}) + +wakeLockOffButton.addEventListener('click', () => { + if (wakeLock !== null) { + wakeLock.release() + .then(() => { + wakeLock = null; + }) + } +}) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/wakelocksentinel/release/index.md b/files/ja/web/api/wakelocksentinel/release/index.md new file mode 100644 index 0000000000..4f7024cd5f --- /dev/null +++ b/files/ja/web/api/wakelocksentinel/release/index.md @@ -0,0 +1,58 @@ +--- +title: WakeLockSentinel.release() +slug: Web/API/WakeLockSentinel/release +tags: + - API + - Method + - リファレンス + - 画面起動ロック API + - 起動ロック + - WakeLockSentinel + - 画面 +browser-compat: api.WakeLockSentinel.release +translation_of: Web/API/WakeLockSentinel/release +--- +{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}} + +**`release()`** は {{domxref("WakeLockSentinel")}} インターフェイスのメソッドで、 {{domxref("WakeLockSentinel")}} を返し、この見張り (sentinel) の解放に成功したら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js +WakeLockSentinel.release().then(...); +``` + +### 引数 + +なし。 + +### 返値 + +`undefined` で解決する {{jsxref("Promise")}} を返します。 + +### 例外 + +例外は発生しません。起動ロックが解放されたかどうかを確認するには {{domxref("WakeLockSentinel/release_event", "release")}} イベントを待ち受けしてください。 + +## 例 + +この例では、ユーザーがボタンをクリックすると {{domxref("WakeLockSentinel")}} が解放されます。 + +```js +wakeLockOffButton.addEventListener('click', () => { + WakeLockSentinel.release(); +}) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef("WakeLockSentinel")}} +- {{DOMxRef("WakeLock.request", "navigator.wakeLock.request()")}} diff --git a/files/ja/web/api/wakelocksentinel/release_event/index.md b/files/ja/web/api/wakelocksentinel/release_event/index.md new file mode 100644 index 0000000000..7d6be9eccb --- /dev/null +++ b/files/ja/web/api/wakelocksentinel/release_event/index.md @@ -0,0 +1,53 @@ +--- +title: 'WakeLockSentinel: release イベント' +slug: Web/API/WakeLockSentinel/release_event +tags: + - Event Handler + - プロパティ + - 画面 Wake Lock API + - 起動ロック + - WakeLockSentinel + - 画面 + - 画面 wake lock +browser-compat: api.WakeLockSentinel.release_event +translation_of: Web/API/WakeLockSentinel/release_event +--- +{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}} + +**`release`** は {{domxref("WakeLockSentinel")}} インターフェイスのイベントで、この見張りオブジェクトのハンドルが解放されたときに発行されます。 + +{{domxref("WakeLockSentinel")}} は `release()` メソッドにより手動で解放したり、プラットフォームの起動ロックにより自動的に解放されたりします。これは、文書がアクティブでなくなった場合や、見えなくなった場合、端末の電力が低下した場合、ユーザーが省電力モードをオンにした場合に発生する可能性があります。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などで用いるか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener('release', event => { }) + +onrelease = event => { } +``` + +## イベント型 + +一般的な {{domxref("Event")}} です。 + +## 例 + +この例では、起動ロックが解放されたときに UI を更新します。 + +```js +wakeLock.addEventListener('release', () => { + + // if wake lock is released alter the UI accordingly + statusElement.textContent = 'Wake Lock has been released'; +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/ja/web/api/wakelocksentinel/released/index.md b/files/ja/web/api/wakelocksentinel/released/index.md new file mode 100644 index 0000000000..82542fc9f1 --- /dev/null +++ b/files/ja/web/api/wakelocksentinel/released/index.md @@ -0,0 +1,47 @@ +--- +title: WakeLockSentinel.released +slug: Web/API/WakeLockSentinel/released +tags: + - プロパティ + - 読み取り専用 + - 画面起動ロック API + - WakeLockSentinel +browser-compat: api.WakeLockSentinel.released +translation_of: Web/API/WakeLockSentinel/released +--- +{{DefaultAPISidebar("Screen Wake Lock API")}} + +**`released`** は {{domxref("WakeLockSentinel")}} インターフェイスのプロパティで、 {{domxref("WakeLockSentinel")}} がまだ解放されていないかどうかを示す論理値を返します。 + +## 構文 + +```js +var released = sentinel.released; +``` + +### 値 + +論理値で、最初は `false` であり、 {{domxref("WakeLockSentinel")}} が解放され（{{domxref("WakeLockSentinel.release()")}} が呼び出されるか、または自動的にロックが解除され） {{domxref("WakeLockSentinel/release_event", "release")}} イベントが発行された後は `true` となって変化しない値です。 + +## 例 + +この例は、 **`released`** の値が {{domxref("WakeLockSentinel")}} のライフライクルの中でどのように変化するかを示します。 + +```js +const sentinel = await navigator.wakeLock.request('screen'); +console.log(sentinel.released); // "false" と出力 + +sentinel.onrelease = () => { + console.log(sentinel.released); // "true" と出力 +}; + +await sentinel.release(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/window/onappinstalled/index.html b/files/ja/web/api/window/onappinstalled/index.html deleted file mode 100644 index f59a7a86fb..0000000000 --- a/files/ja/web/api/window/onappinstalled/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Window.onappinstalled -slug: Web/API/Window/onappinstalled -tags: - - API - - Event Handler - - Property - - Reference - - Window - - web manifest -translation_of: Web/API/Window/onappinstalled -original_slug: Web/API/Window/oninstall ---- -<div>{{APIRef}}</div> - -<p>{{domxref("Window")}} オブジェクトの <code><strong>onappinstalled</strong></code> プロパティは、<code><a href="/ja/docs/Web/API/Window/appinstalled_event">appinstalled</a></code> イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが <a href="/ja/Apps/Progressive">プログレッシブウェブアプリ (PWA)</a> としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">window.onappinstalled = function(event) { ... }; -</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: js">window.onappinstalled = function(ev) { - console.log('アプリケーションがインストールされました。'); -};</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('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td> - <td>{{Spec2('Manifest')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.Window.onappinstalled")}}</p> - -<h2 id="See_also" name="See_also">関連項目</h2> - -<ul> - <li>{{ event("install") }}</li> -</ul> diff --git a/files/ja/web/css/--_star_/index.html b/files/ja/web/css/--_star_/index.html index 1b8bcff3d6..35e6f15e2b 100644 --- a/files/ja/web/css/--_star_/index.html +++ b/files/ja/web/css/--_star_/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/--* --- {{CSSRef}} -`--` の接頭辞が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。 +接頭辞 `--` が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。 カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。 @@ -36,7 +36,7 @@ translation_of: Web/CSS/--* ## 例 -### HTM +### HTML ```html <p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p> diff --git a/files/ja/web/css/-webkit-mask-attachment/index.md b/files/ja/web/css/-webkit-mask-attachment/index.md new file mode 100644 index 0000000000..edc1430043 --- /dev/null +++ b/files/ja/web/css/-webkit-mask-attachment/index.md @@ -0,0 +1,79 @@ +--- +title: '-webkit-mask-attachment' +slug: Web/CSS/-webkit-mask-attachment +tags: + - CSS + - CSS プロパティ + - レイアウト + - 標準外 + - リファレンス + - ウェブ + - recipe:css-property +browser-compat: css.properties.-webkit-mask-attachment +translation_of: Web/CSS/-webkit-mask-attachment +--- +{{CSSRef}}{{Non-standard_Header}} + +{{CSSxRef("mask-image")}} が指定されている場合、 `-webkit-mask-attachment` はそのマスク画像の位置をビューポート内で固定するか、それとも包含ブロックと共にスクロールするかを指定します。 + +```css +/* キーワード値 */ +-webkit-mask-attachment: scroll; +-webkit-mask-attachment: fixed; +-webkit-mask-attachment: local; + +/* 複数の値 */ +-webkit-mask-attachment: scroll, local; +-webkit-mask-attachment: fixed, local, scroll; + +/* グローバル値 */ +-webkit-mask-attachment: inherit; +-webkit-mask-attachment: initial; +-webkit-mask-attachment: unset; +``` + +## 構文 + +### 値 + +- scroll + - : `scroll` が指定された場合、マスク画像はマスク画像を含むブロックと共にビューポート内でスクロールします。 +- fixed + - : `fixed` が指定された場合、マスク画像は包含する要素と共にスクロールせず、ビューポート内の一定の場所に残ります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### ビューポートにマスク画像を固定 + +```css +body { + -webkit-mask-image: url('images/mask.png'); + -webkit-mask-attachment: fixed; +} +``` + +## 仕様書 + +Not part of any standard. + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("mask")}} +- {{CSSxRef("mask-clip")}} +- {{CSSxRef("-webkit-mask-box-image")}} +- {{CSSxRef("mask-origin")}} +- {{CSSxRef("mask-image")}} +- {{CSSxRef("-webkit-mask-composite")}} +- {{CSSxRef("mask-repeat")}} diff --git a/files/ja/web/css/-webkit-mask-box-image/index.md b/files/ja/web/css/-webkit-mask-box-image/index.md new file mode 100644 index 0000000000..f222e7438e --- /dev/null +++ b/files/ja/web/css/-webkit-mask-box-image/index.md @@ -0,0 +1,96 @@ +--- +title: '-webkit-mask-box-image' +slug: Web/CSS/-webkit-mask-box-image +tags: + - CSS + - レイアウト + - 標準外 + - リファレンス + - ウェブ + - recipe:css-property +browser-compat: css.properties.-webkit-mask-box-image +translation_of: Web/CSS/-webkit-mask-box-image +--- +{{ CSSRef() }} {{ Non-standard_header() }} + +`-webkit-mask-box-image` はマスク画像を要素の境界ボックスに設定します。 + +- {{ Xref_cssinitial() }}: なし +- 適用先: すべての要素 +- {{ Xref_cssinherited() }}: なし +- メディア: {{ Xref_cssvisual() }} +- {{ Xref_csscomputed() }}: 指定通り + +## 構文 + +``` +-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] +``` + +ここで、 + +- \<mask-box-image> + - : `{{cssxref("url()", "<uri>")}} | <gradient> | none` +- \<top> \<right> \<bottom> \<left> + - : `<length> | <percentage>` +- \<x-repeat> \<y-repeat> + - : `repeat | stretch | round | space` + +### 値 + +- \<uri> + - : マスク画像として使用する画像リソースの位置です。 +- \<gradient> + - : マスク画像として使用する `-webkit-gradient` 関数です。 +- none + - : 境界ボックスにマスク画像がないことを示すために使用します。 +- \<length> + - : マスク画像のオフセットの大きさです。利用可能な単位は {{cssxref("<length>")}} を参照してください。 +- \<percentage> + - : マスク画像のオフセットで、境界ボックスの対応する長さ（幅または高さ）に対するパーセント値です。 +- repeat + - : マスク画像は、境界ボックスの範囲に必要な回数だけ繰り返されます。マスク画像が境界ボックスに均等に配置できない場合は、部分画像を含むことがあります。 +- stretch + - : マスク画像は、境界ボックスを正確に含むように引き伸ばされます。 +- round + - : マスク画像は多少引き伸ばされ、教秋ボックスの端にマスク画像の一部が残らないように繰り返されます。 +- space + - : マスク画像は引き伸ばされることなく何度でも繰り返されます。境界ボックスの端に、部分的なマスク画像は置かれません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### 画像の設定 + +```css +.exampleone { + -webkit-mask-box-image: url('mask.png'); +} +``` + +### 画僧のオフセットと塗りつぶし + +```css +.exampletwo { + -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round; +} +``` + +## 仕様書 + +Not part of any standard. + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +{{ cssxref("mask") }}, {{ cssxref("mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("mask-clip") }},{{ cssxref("mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("mask-repeat") }} diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.html b/files/ja/web/css/-webkit-text-stroke-color/index.html deleted file mode 100644 index b327da4d76..0000000000 --- a/files/ja/web/css/-webkit-text-stroke-color/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '-webkit-text-stroke-color' -slug: Web/CSS/-webkit-text-stroke-color -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - WebKit 拡張 - - 標準外 -translation_of: Web/CSS/-webkit-text-stroke-color ---- -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p><strong><code>-webkit-text-stroke-color</code></strong> は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の<a href="/ja/docs/Web/CSS/color_value">色</a>を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。</p> - -<pre class="brush:css no-line-numbers notranslate">/* <color> 値 */ --webkit-text-stroke-color: red; --webkit-text-stroke-color: #e08ab4; --webkit-text-stroke-color: rgb(200, 100, 0); - -/* グローバル値 */ --webkit-text-stroke-color: inherit; --webkit-text-stroke-color: initial; --webkit-text-stroke-color: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><color></code></dt> - <dd>角の色。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> - -<pre class="brush: html notranslate"><p>Text with stroke</p> -<input type="color" value="#ff0000"></pre> - -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> - -<pre class="brush: css notranslate">p { - margin: 0; - font-size: 4em; - -webkit-text-stroke-width: 3px; - -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */ -} -</pre> - -<div class="hidden"> -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> - -<pre class="brush: js notranslate">var colorPicker = document.querySelector("input"); -colorPicker.addEventListener("change", function(evt) { - document.querySelector("p").style.webkitTextStrokeColor = evt.target.value; -});</pre> -</div> - -<p>{{EmbedLiveSample("Example", "500px", "100px")}}</p> - -<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('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>初回標準化</td> - </tr> - <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Safari CSS Reference<br> - <small>文書内の '-webkit-text-stroke-color'</small></a></td> - <td>標準外で非公式の文書化</td> - <td>初回文書化</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.-webkit-text-stroke-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li> - <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li> - <li>{{cssxref("-webkit-text-fill-color")}}</li> - <li>{{cssxref("-webkit-text-stroke-width")}}</li> - <li>{{cssxref("-webkit-text-stroke")}}</li> -</ul> diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.md b/files/ja/web/css/-webkit-text-stroke-color/index.md new file mode 100644 index 0000000000..fcbd845d11 --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke-color/index.md @@ -0,0 +1,92 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - CSS プロパティ + - 標準外 + - リファレンス + - WebKit + - recipe:css-property +browser-compat: css.properties.-webkit-text-stroke-color +translation_of: Web/CSS/-webkit-text-stroke-color +--- +{{CSSRef}}{{Non-standard_header}} + +**`-webkit-text-stroke-color`** は CSS のプロパティで、テキストの文字の線の[色](/ja/docs/Web/CSS/color_value)を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。 + +```css +/* <color> 値 */ +-webkit-text-stroke-color: red; +-webkit-text-stroke-color: #e08ab4; +-webkit-text-stroke-color: rgb(200, 100, 0); + +/* グローバル値 */ +-webkit-text-stroke-color: inherit; +-webkit-text-stroke-color: initial; +-webkit-text-stroke-color: unset; +``` + +## 構文 + +### 値 + + `<color>` + - : 線の色。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 角の色を変化させる + +#### HTML + +```html +<p>Text with stroke</p> +<input type="color" value="#ff0000"> +``` + +#### CSS + +```css +p { + margin: 0; + font-size: 4em; + -webkit-text-stroke-width: 3px; + -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */ +} +``` + +```js hidden +var colorPicker = document.querySelector("input"); +colorPicker.addEventListener("change", function(evt) { + document.querySelector("p").style.webkitTextStrokeColor = evt.target.value; +}); +``` + +#### 結果 + +{{EmbedLiveSample("Varying_the_stroke_color", "500px", "100px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-fill-color")}} +- {{cssxref("-webkit-text-stroke-width")}} +- {{cssxref("-webkit-text-stroke")}} diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.html b/files/ja/web/css/-webkit-text-stroke-width/index.html deleted file mode 100644 index e8e39b12a0..0000000000 --- a/files/ja/web/css/-webkit-text-stroke-width/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: '-webkit-text-stroke-width' -slug: Web/CSS/-webkit-text-stroke-width -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - WebKit - - WebKit 拡張 - - 標準外 -translation_of: Web/CSS/-webkit-text-stroke-width ---- -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p><strong><code>-webkit-text-stroke-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの角の太さを指定します。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css notranslate">/* キーワード値 */ --webkit-text-stroke-width: thin; --webkit-text-stroke-width: medium; --webkit-text-stroke-width: thick; - -/* <length> 値 */ --webkit-text-stroke-width: 2px; --webkit-text-stroke-width: 0.1em; --webkit-text-stroke-width: 1mm; --webkit-text-stroke-width: 5pt; - -/* グローバル値 */ --webkit-text-stroke-width: inherit; --webkit-text-stroke-width: initial; --webkit-text-stroke-width: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><line-width></code></dt> - <dd>角の太さ。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> - -<pre class="brush: css notranslate">p { - margin: 0; - font-size: 4em; - -webkit-text-stroke-color: red; -} - -#thin { - -webkit-text-stroke-width: thin; -} - -#medium { - -webkit-text-stroke-width: 3px; -} - -#thick { - -webkit-text-stroke-width: 1.5mm; -} -</pre> - -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> - -<pre class="brush: html notranslate"><p id="thin">Thin stroke</p> -<p id="medium">Medium stroke</p> -<p id="thick">Thick stroke</p> -</pre> - -<p>{{EmbedLiveSample("Example", "450px", "230px")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>初回標準化</td> - </tr> - <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Safari CSS Reference<br> - <small>文書内の '-webkit-text-stroke-width'</small></a></td> - <td>標準外で非公式の文書化</td> - <td>初回文書化</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p> - -<h2 id="See_Also" name="See_Also">関連情報</h2> - -<ul> - <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li> - <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li> - <li>{{cssxref("-webkit-text-stroke-color")}}</li> - <li>{{cssxref("-webkit-text-stroke")}}</li> - <li>{{cssxref("-webkit-text-fill-color")}}</li> -</ul> diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.md b/files/ja/web/css/-webkit-text-stroke-width/index.md new file mode 100644 index 0000000000..799ff056b6 --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke-width/index.md @@ -0,0 +1,103 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - CSS プロパティ + - 標準外 + - リファレンス + - WebKit + - recipe:css-property +browser-compat: css.properties.-webkit-text-stroke-width +translation_of: Web/CSS/-webkit-text-stroke-width +--- +{{CSSRef}}{{Non-standard_header}} + +**`-webkit-text-stroke-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの線の太さを指定します。 + +## 構文 + +```css +/* キーワード値 */ +-webkit-text-stroke-width: thin; +-webkit-text-stroke-width: medium; +-webkit-text-stroke-width: thick; + +/* <length> 値 */ +-webkit-text-stroke-width: 2px; +-webkit-text-stroke-width: 0.1em; +-webkit-text-stroke-width: 1mm; +-webkit-text-stroke-width: 5pt; + +/* グローバル値 */ +-webkit-text-stroke-width: inherit; +-webkit-text-stroke-width: initial; +-webkit-text-stroke-width: unset; +``` + +### 値 + +- `<line-width>` + - : 線の太さ。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 線の幅を変更 + +#### CSS + +```css +p { + margin: 0; + font-size: 4em; + -webkit-text-stroke-color: red; +} + +#thin { + -webkit-text-stroke-width: thin; +} + +#medium { + -webkit-text-stroke-width: 3px; +} + +#thick { + -webkit-text-stroke-width: 1.5mm; +} +``` + +#### HTML + +```html +<p id="thin">Thin stroke</p> +<p id="medium">Medium stroke</p> +<p id="thick">Thick stroke</p> +``` + +#### 結果 + +{{EmbedLiveSample("Varying_stroke_widths", "450px", "230px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-stroke-color")}} +- {{cssxref("-webkit-text-stroke")}} +- {{cssxref("-webkit-text-fill-color")}} diff --git a/files/ja/web/css/-webkit-text-stroke/index.md b/files/ja/web/css/-webkit-text-stroke/index.md new file mode 100644 index 0000000000..1d4d700b96 --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke/index.md @@ -0,0 +1,94 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - CSS プロパティ + - 標準外 + - リファレンス + - WebKit + - recipe:css-shorthand-property +browser-compat: css.properties.-webkit-text-stroke +translation_of: Web/CSS/-webkit-text-stroke +--- +{{CSSRef}}{{Non-standard_header}} + +**`-webkit-text-stroke`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキスト文字の輪郭線の[幅](/ja/docs/Web/CSS/length)と[色](/ja/docs/Web/CSS/color_value)を指定します。これは個別指定プロパティ {{cssxref("-webkit-text-stroke-width")}} および {{cssxref("-webkit-text-stroke-color")}} の一括指定プロパティです。 + +```css +/* 幅と色の値 */ +-webkit-text-stroke: 4px navy; +text-stroke: 4px navy; + +/* グローバル値 */ +-webkit-text-stroke: inherit; +-webkit-text-stroke: initial; +-webkit-text-stroke: unset; +text-stroke: inherit; +text-stroke: initial; +text-stroke: unset; +``` + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`-webkit-text-stroke-color`](/ja/docs/Web/CSS/-webkit-text-stroke-color) +- [`-webkit-text-stroke-width`](/ja/docs/Web/CSS/-webkit-text-stroke-width) + +## 構文 + +### 値 + +- {{cssxref("<length>")}} + - : 輪郭線の幅です。 +- {{cssxref("<color>")}} + - : 輪郭線の色です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### テキストに赤い輪郭線を追加 + +#### HTML + +```html +<p id="example">このテキストの輪郭線は赤です。</p> +``` + +#### CSS + +```css +#example { + font-size: 3em; + margin: 0; + -webkit-text-stroke: 2px red; +} +``` + +#### 結果 + +{{EmbedLiveSample("Adding_a_red_text_stroke", 600, 60)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-stroke-width")}} +- {{cssxref("-webkit-text-stroke-color")}} +- {{cssxref("-webkit-text-fill-color")}} diff --git a/files/ja/web/css/-webkit-touch-callout/index.html b/files/ja/web/css/-webkit-touch-callout/index.html deleted file mode 100644 index dbfa2c699b..0000000000 --- a/files/ja/web/css/-webkit-touch-callout/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: '-webkit-touch-callout' -slug: Web/CSS/-webkit-touch-callout -tags: - - CSS - - CSS プロパティ - - Non-standard - - Reference - - WebKit 拡張 - - 'recipe:css-property' - - リファレンス - - レイアウト - - 標準外 -translation_of: Web/CSS/-webkit-touch-callout ---- -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>-webkit-touch-callout</code> プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。</p> - -<p>iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。</p> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ --webkit-touch-callout: default; --webkit-touch-callout: none; - -/* グローバル値 */ --webkit-touch-callout: initial; --webkit-touch-callout: inherit; --webkit-touch-callout: unset;</pre> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>default</code></dt> - <dd>既定のコールアウトが表示されます。</dd> - <dt><code>none</code></dt> - <dd>コールアウト表示が無効になります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css notranslate">.example { - -webkit-touch-callout: none; -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p>どの仕様書でも定義されていません。</p> - -<p>Apple は <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">Safari CSS リファレンス</a> に説明を載せています。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.-webkit-touch-callout")}}</p> diff --git a/files/ja/web/css/-webkit-touch-callout/index.md b/files/ja/web/css/-webkit-touch-callout/index.md new file mode 100644 index 0000000000..897bc197f8 --- /dev/null +++ b/files/ja/web/css/-webkit-touch-callout/index.md @@ -0,0 +1,71 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - CSS プロパティ + - レイアウト + - NeedsLiveSample + - 標準外 + - リファレンス + - WebKit + - recipe:css-property +browser-compat: css.properties.-webkit-touch-callout +translation_of: Web/CSS/-webkit-touch-callout +--- +{{CSSRef}}{{Non-standard_header}} + +`-webkit-touch-callout` は [CSS](/ja/docs/Web/CSS) のプロパティで、対象を長押しすることで現れるコールアウト表示を制御します。 + +iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティではそういった挙動を無効にすることができます。 + +```css +/* キーワード値 */ +-webkit-touch-callout: default; +-webkit-touch-callout: none; + +/* グローバル値 */ +-webkit-touch-callout: initial; +-webkit-touch-callout: inherit; +-webkit-touch-callout: unset; +``` + +## 構文 + +### 値 + +- `default` + - : 既定のコールアウトが表示されます。 +- `none` + - : コールアウト表示が無効になります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### タッチ時のコールアウトをオフにする + +```css +.example { + -webkit-touch-callout: none; +} +``` + +## 仕様書 + +どの仕様書でも定義されていません。 Apple は [Safari CSS リファレンス](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout) に説明を載せています。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebKit CSS 拡張](/en-US/docs/Web/CSS/WebKit_Extensions) +- [Apple の開発者ドキュメントにおける -webkit-touch-callout](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout) diff --git a/files/ja/web/css/@property/syntax/index.md b/files/ja/web/css/@property/syntax/index.md new file mode 100644 index 0000000000..7e19e59df1 --- /dev/null +++ b/files/ja/web/css/@property/syntax/index.md @@ -0,0 +1,110 @@ +--- +title: syntax +slug: Web/CSS/@property/syntax +tags: + - CSS + - リファレンス + - ウェブ + - プロパティ + - Houdini +browser-compat: css.at-rules.property.syntax +translation_of: Web/CSS/@property/syntax +--- +{{CSSRef}}{{SeeCompatTable}} + +**`syntax`** は [CSS](/ja/docs/Web/CSS) の記述子で、 {{cssxref("@property")}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用する上で必要であり、そのプロパティで許可される構文を記述します。 + +## 構文 + +以下のものはすべて、有効な構文の文字列です。 + +```css +syntax: '<color>'; /* 色を受け入れる */ + +syntax: '<length> | <percentage>'; /* 長さまたはパーセント値を受け入れるが、両者を組み合わせた calc 式は受け入れない */ + +syntax: 'small | medium | large'; /* カスタム識別子で設定されたこれらの値の何れかを受け入れる */ + +syntax: '*'; /* 常に有効なトークン */ +``` + +## 値 + +仕様で定義されている対応する構文を持つ文字列。対応する構文は [CSS 型](/ja/docs/Web/CSS/CSS_Types)のサブセットです。これらは一緒に使うこともできますし、いくつかの型を組み合わせて使うこともできます。 + +- `"<length>"` + - : あらゆる有効な {{cssxref("<length>")}} の値です。 +- `"<number>"` + - : あらゆる有効な {{cssxref("<number>")}} の値です。 +- `"<percentage>"` + - : あらゆる有効な {{cssxref("<percentage>")}} の値です。 +- `"<length-percentage>"` + - : あらゆる有効な {{cssxref("<length-percentage>")}} の値です。 +- `"<color>"` + - : あらゆる有効な {{cssxref("<color>")}} の値です。 +- `"<image>"` + - : あらゆる有効な {{cssxref("<image>")}} の値です。 +- `"<url>"` + - : あらゆる有効な {{cssxref("url()","url()")}} の値です。 +- `"<integer>"` + - : あらゆる有効な {{cssxref("<integer>")}} の値です。 +- `"<angle>"` + - : あらゆる有効な {{cssxref("<angle>")}} の値です。 +- `"<time>"` + - : あらゆる有効な {{cssxref("<time>")}} の値です。 +- `"<resolution>"` + - : あらゆる有効な {{cssxref("<resolution>")}} の値です。 +- `"<transform-function>"` + - : あらゆる有効な {{cssxref("<transform-function>")}} の値です。 +- `"<custom-ident>"` + - : あらゆる有効な {{cssxref("<custom-ident>")}} の値です。 +- `"<transform-list>"` + - : 有効な {{cssxref("<transform-function>")}} の値のリストです。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +`--my-color` {{cssxref('--*', 'カスタムプロパティ')}}に、 `<color>` の構文を使用して型チェックを追加します。 + +[CSS](/ja/docs/Web/CSS) の {{cssxref('@property')}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用すると次のようになります。 + +```css +@property --my-color { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +} +``` + +[JavaScript](/ja/docs/Web/JavaScript) の {{domxref('CSS.registerProperty')}} を使用すると次のようになります。 + +```js +window.CSS.registerProperty({ + name: '--my-color', + syntax: '<color>', + inherits: false, + initialValue: '#c0ffee', +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS プロパティと値 API](/ja/docs/Web/API/CSS_Properties_and_Values_API) +- [CSS 描画 API](/ja/docs/Web/API/CSS_Painting_API) +- [CSS 型付きオブジェクトモデル](/ja/docs/Web/API/CSS_Typed_OM_API) +- [CSS Houdini](/ja/docs/Web/Guide/Houdini) diff --git a/files/ja/web/css/@scroll-timeline/index.md b/files/ja/web/css/@scroll-timeline/index.md new file mode 100644 index 0000000000..15d3aadc9e --- /dev/null +++ b/files/ja/web/css/@scroll-timeline/index.md @@ -0,0 +1,177 @@ +--- +title: "@scroll-timeline" +slug: Web/CSS/@scroll-timeline +tags: + - アニメーション + - スクロール + - アットルール + - CSS + - リファレンス +browser-compat: css.at-rules.scroll-timeline +--- + +{{CSSRef}} + +**`@scroll-timeline`** は CSS の[アットルール](/ja/docs/Web/CSS/At-rule)で、分や秒ではなく、スクロールコンテナー内のスクロールの進行状況によって時間値を決定する [`AnimationTimeline`](/ja/docs/Web/API/AnimationTimeline) を定義するものです。アニメーションタイムラインは [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations) と `animation-timeline` プロパティによってと関連付けられます。 + +## 構文 + +```css +@scroll-timeline moveTimeline { + source: auto; + orientation: vertical; + scroll-offsets: 0px, 500px; +} +``` + +### 値 + +- {{cssxref("custom-ident")}} + + - : スクロールタイムラインを識別する名前です。この名前はスクロールタイムラインを [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) プロパティで指定する際に使用されます。 + +- `source` + + - : スクロール可能な要素で、そのスクロール位置がタイムラインの進捗を駆動します。以下のいずれかになります。 + + - `auto` + + - : 現在のグローバル [Window オブジェクト](/ja/docs/Web/API/Window) に関連付けられた `Document` です。 + + - `selector("id-selector")` + + - : 要素の id で識別されるスクロールコンテナーです。 + + - `none` + - : スクロールコンテナーが指定されていません。 + +- `orientation` + + - : スクロールタイムラインの向きです。 + + - `auto` + + - : 既定の `vertical` となります。 + + - `block` + + - : 書字方向に応じて、ブロック軸に沿ったスクロール位置を使用します。 + + - `inline` + + - : 書字方向に応じて、インライン軸に沿ったスクロール位置を使用します。 + + - `horizontal` + + - : 書字方向に関係なく、水平スクロール位置を使用します。 + + - `vertical` + - : 書字方向に関係なく、垂直スクロール位置を使用します。 + +- `scroll-offsets` + + - : スクロールタイムラインのスクロールオフセットを指定します。 + + - `none` + - : スクロールオフセットを指定しません。 + - `<length-percentage>` + - : カンマで区切った [`<length-percentage>`](/ja/docs/Web/CSS/length-percentage) 値のリストです。 + - `<element-offset>` + - : スクロールオフセットを定める要素の位置です。offset. + +## 解説 + +スクロールタイムラインを使用するには、 `@scroll-timeline` ルールを作成します。これは {{cssxref("animation-timeline")}} プロパティによって、アニメーションのタイムラインをそのタイムライン宣言と照合するために使われます。 + +それぞれの `@scroll-timeline` ルールには、スクロールタイムラインのソース、方向、スクロールオフセットを決定するためのプロパティが含まれています。 + +### スクロールオフセット + +`scroll-offset` プロパティは、スクロールの中でアニメーションが発生する場所を決定します。これは、 3 つの方法のうちの 1 つで設定することができます。 + +1. CSS のキーワード `none` を使用します。これは `scroll-offset` が指定されないことを意味します。 + +2. [`<length-percentage>`](/ja/docs/Web/CSS/length-percentage) の値のカンマ区切りのリストで決定します。それぞれの値は {{cssxref('animation-duration')}} に対して対応付けされます。例えば、 `animation-duration` が `2s` で、スクロールオフセットが `0px, 30px, 100px` に設定されている場合、 1s ではスクロールオフセットは 30px となります。通常、スムーズなスクロールアニメーションのためには、ここで `0px, 100px` のような 2 つの値を使用します。 + +3. スクロールオフセットを決定する 3 つ目の方法は、要素のオフセットを使用することです。これは、ページ内の要素を指定し、その位置によってスクロールタイムラインを決定し、その要素のどの端を使用するかを決定することを意味します。要素の指定は `selector()` 関数で行い、関数は要素の id を受け取ります。エッジはキーワード `start` または `end` によって決定されます。オプションで `0–1` の間の閾値を指定することができます。これは、 `source` に表示される要素のうち、どの程度の割合で表示されるかを表します。 + +```css +@scroll-timeline element-move { + source: auto; + orientation: vertical; + scroll-offsets: selector(#myElement) start 0, selector(#myElement) end 0; +} +``` + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 単純な例 + +この例では、コンテナーが垂直方向にスクロールされると回転する正方形を表示します。スクロールできるように、高さが固定された要素 (`#container`) を作成します。これが `source` 要素です。 + +このコンテナーの中に、別の要素 (`#square`) を作成します。この要素は正方形のように見えるように適切なスタイルが設定されています。この要素には、 {{cssxref('@keyframes')}} ルールと `animation-name` プロパティを使用して、回転アニメーションを適用しています。 + +`@scroll-timeline` を `squareTimeline` という名前で作成し、`source` をコンテナー、`orientation` を `vertical` 、`scroll-offset` を `0px` から `300px` （コンテナーの高さ）までに設定しています。そして、`scroll-timeline` プロパティを使用して、これを正方形に適用します。 + +#### HTML + +```html +<div id="container"> + <div id="square"></div> +</div> +``` + +#### CSS + +```css +#container { + height: 300px; +} + +#square { + background-color: deeppink; + width: 100px; + height: 100px; + margin-top: 100px; + animation-name: rotateAnimation; + animation-duration: 3s; + animation-direction: alternate; + animation-timeline: squareTimeline; +} + +@scroll-timeline squareTimeline { + source: selector("#container"); + orientation: "vertical"; + scroll-offsets: 0px, 300px; +} + +@keyframes rotateAnimation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +``` + +#### 結果 + +{{EmbedLiveSample("Simple_example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations) +- [Practical use cases for scroll-linked animations in CSS with scroll timelines](https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/) diff --git a/files/ja/web/css/animation-timeline/index.md b/files/ja/web/css/animation-timeline/index.md new file mode 100644 index 0000000000..1058e73a91 --- /dev/null +++ b/files/ja/web/css/animation-timeline/index.md @@ -0,0 +1,120 @@ +--- +title: animation-timeline +slug: Web/CSS/animation-timeline +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.animation-timeline +translation_of: Web/CSS/animation-timeline +--- +{{CSSRef}} + +**`animation-timeline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、この要素に適用されるスクロールアニメーションを記述する 1 つ以上の {{cssxref("@scroll-timeline")}} アットルールの名前を指定します。 + +<!-- {{EmbedInteractiveExample("pages/css/animation-name.html")}} --> + +ふつうはすべてのアニメーションプロパティを一度に設定する一括指定プロパティの {{cssxref("animation")}} を使用したほうが便利です。 + +## 構文 + +```css +/* 単一のアニメーション */ +animation-timeline: none; +animation-timeline: test_05; +animation-timeline: -specific; +animation-timeline: sliding-vertically; + +/* 複数のアニメーション */ +animation-timeline: test1, animation4; +animation-timeline: none, -moz-specific, sliding; + +/* グローバル値 */ +animation-timeline: initial; +animation-timeline: inherit; +animation-timeline: revert; +animation-timeline: unset; +``` + +### 値 + +- `auto` + - : アニメーションのタイムラインはこの文書の既定の [DocumentTimeline](/ja/docs/Web/API/DocumentTimeline) です。 +- `none` + - : アニメーションはタイムラインに関連付けられません。 +- `<timeline-name>` + - : スクロールタイムラインを識別する {{cssxref('custom-ident')}} または文字列で、 {{cssxref('@scroll-timeline')}} ルールで宣言されているものです。 2 つ以上のスクロールタイムラインが同じ名前であった場合、カスケード中で最後に宣言されたものが使用されます。一致するスクロールタイムラインがなければ、アニメーションはタイムラインに関連付けられません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 単純な例 + +`squareTimeline` という名前のスクロールタイムラインが宣言されており、 `#square` 要素に `animation-timeline: squareTimeline` を用いて適用されています。 + +#### HTML + +```html +<div id="container"> + <div id="square"></div> +</div> +``` + +#### CSS + +```css +#container { + height: 300px; +} + +#square { + background-color: deeppink; + width: 100px; height: 100px; + margin-top: 100px; + animation-name: rotateAnimation; + animation-duration: 3s; + animation-direction: alternate; + animation-timeline: squareTimeline; +} + +@scroll-timeline squareTimeline { + source: selector('#container'); + orientation: "vertical"; + scroll-offsets: 0px, 300px; +} + +@keyframes rotateAnimation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +``` + +#### 結果 + +{{EmbedLiveSample("Simple example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [@scroll-timeline アットルール](/ja/docs/Web/CSS/@scroll-timeline) diff --git a/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md b/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md new file mode 100644 index 0000000000..c164fb5ca5 --- /dev/null +++ b/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md @@ -0,0 +1,118 @@ +--- +title: 機能クエリーの使用 +slug: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries +tags: + - CSS + - 条件付き CSS + - ガイド + - 機能クエリー + - プログレッシブエンハンスメント +--- +{{CSSRef}} + +**機能クエリー**は、 CSS の [@supports](/ja/docs/Web/CSS/@supports) アットルールを使って作成され、ウェブ開発者がある機能に対応しているかどうかを検査し、その検査結果に基づいて実行する CSS を提供する方法として有益です。このガイドでは、機能クエリを使用してプログレッシブエンハンスメントを実装する方法を学びます。 + +## 構文 + +CSS の機能クエリーは [CSS 条件付きルールモジュール](https://drafts.csswg.org/css-conditional-3/)の一部で、ここにはメディアクエリーの [@media](/ja/docs/Web/CSS/@media) ルールも含まれてます。機能クエリーを使用すると、メディアクエリーと同様の動作をすることが分かると思います。違いは、メディアクエリーではウェブページが動作している環境について何かを検査するのに対し、機能クエリーでは CSS 機能に対するブラウザーの対応状況を検査する点です。 + +機能クエリは `@supports` ルールと、それに続く検査したいプロパティ名と値から構成されます。 `display` のようなプロパティ名だけでは検査できません。ルールにはプロパティ名と値が必要です。 + +```css +@supports (property: value) { + 適用する CSS ルール +} +``` + +例えば、あるブラウザーが `row-gap` プロパティに対応しているかどうかを確認したい場合、次のような機能クエリーを記述します。多くの場合は、どの値を使用しても問題ありません。ブラウザーがこのプロパティに対応しているかどうかを確認したいだけであれば、有効な値であればどのような値でもかまいません。 + +{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}} + +特定のプロパティの新しい値を検査する場合は、プロパティと値の組の値の部分がより重要になります。良い例は `display` プロパティでしょう。すべてのブラウザーは `display` に対応しており、`display: block` は CSS1 にまでさかのぼります。しかし、 `display: flex` と `display: grid` はもっと新しい値です。 CSS ではプロパティに追加の値を指定することがよくあるので、プロパティと値を検査するということは、これらの値に対応しているかどうかを検出することができることを意味します。 + +## 対応がないかどうかを検査 + +ブラウザーが機能に対応しているかどうかを尋ねる場合のほか、 `not` キーワードを追加することで逆の検査を行うことができます。 + +```css +@supports not (property: value) { + CSS rules to apply +} +``` + +以下の例の機能クエリー内の CSS は、ブラウザーが `row-gap` に対応していない場合に実行されます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}} + +## 複数の機能を検査 + +機能クエリーで、複数のプロパティに対応していることを検査必要がある場合があります。そのような場合は、`and` キーワードで区切って、検査する機能の一覧を記述します。 + +```css +@supports (property1: value) and (property2: value) { + CSS rules to apply +} +``` + +例えば、実行したい CSS が、ブラウザーが CSS シェイプと CSS グリッドに対応していることを必要とする場合、この 2 つを検査するルールを作成することができます。次のルールは、ブラウザーが `shape-outside: circle()` と `display: grid` の両方に対応している場合にのみ true を返します。 + +{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}} + +`or` を使用することもできます。これは選択したもののうち 1 つが一致した場合に CSS を有効にすることができます。 + +```css +@supports (property1: value) or (property2: value) { + CSS rules to apply +} +``` + +これは、ある機能がベンダー接頭辞付きである場合に特に有用で、標準のプロパティとベンダー接頭辞を加えたものを検査することができます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}} + +## 機能クエリーの制限 + +`@support` ルールは、ブラウザーが 1 つ以上のプロパティと値の組を解釈できるかどうか、つまり、その機能に対応していると主張するかどうかを確認するために使用します。もしブラウザーがそのプロパティと値のペアを理解できれば、肯定的な応答を返します。したがって、ブラウザーがある機能に正しく、バグなく対応しているかどうかを確認するために、機能クエリーを使用することはできないのです。 + +さらに、機能クエリーはは「部分的な実装」を検査することもできません。この良い例が `gap` プロパティです。CSS グリッドに対応しているすべてのブラウザーは、 CSS グリッドの `gap` に対応していますが、フレックスボックスの `gap` に対応しているのは Firefox だけです。フレックスボックスで使いたいからと `gap` プロパティを検査「すると、実装されていないにもかかわらず肯定的な回答を得ることになります。 + +## プログレッシブエンハンスメントのための機能クエリーの使い方 + +機能クエリーは、サイトを段階的に拡張していく際に非常に有効なツールです。すべてのブラウザーに対して適切なソリューションを提供し、より新しい機能に対応しているブラウザーにはより高度なソリューションを提供することができます。 + +しかし、機能クエリーに対応していないブラウザーもあれば、使いたい機能に対応していないブラウザーもあります。例えば、 IE11 で対応していない CSS グリッドを使いたいとします。 IE11 は機能クエリーにも対応していないので、未対応のブラウザーをチェックして代替策を作ることはできません。しかし、実際には、プログレッシブエンハンスメントに機能クエリーを使用する場合、これは重要ではありません。ただし、未対応ブラウザー用の CSS を記述し、それを機能クエリー内の CSS で上書きするようにするなど、一定の方法で CSS を構成する必要があります。 + +それでは、上記のような方法で機能クエリーを使用する、とても簡単な例を見ていきましょう。 + +例えば、 3 つのボックスが並んだレイアウトを作りたい場合、理想的には[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)を使いたいところです。しかし、古いブラウザーのためのレイアウトでは、浮動要素を使ったレイアウトにしたいとします。まずはその浮動レイアウトを以下のコードで作成しすると、 3 列にすることができます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}} + +ブラウザーは CSS のプロパティや値を理解できない場合、それを無視します。そこで、 CSS グリッドを使ってレイアウトを強化することから始めるとよいでしょう。グリッドに対応していないブラウザーは、 `display` プロパティの `grid` の値を無視します。浮動アイテムがグリッドアイテムになると、浮動は取り除かれます。詳細は、[古いブラウザーの対応](/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)を参照してください。そのため、グリッド版は浮動のものを上書きすればよいのです。 + +しかし、浮動されたアイテムを 3 列で表示するために使用した `width` プロパティが原因で問題が発生しました。これは、現在、浮動の場合のようにコンテナーの幅ではなく、カラムトラックの幅としてグリッドに解釈されます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}} + +必要なのは、 `display: grid` に対応している場合に、 width を削除する方法です。これはまさに機能クエリーが解決する状況です。グリッドに対応している場合、 `width` を `auto` に戻すことができます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}} + +上記のシナリオでは、 IE11 が機能クエリーや CSS グリッドに対応していなくても問題ありません。浮動版はどの場合でも適用され、グリッドに対応しているブラウザーではそれが上書きされm佐生。 + +上記のコードを記述する別の方法として、以下のようにグリッドのコードをすべて機能クエリーでラップすることができます。 + +{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}} + +この場合、コードが少し増えるかもしれませんが、プロパティ名や値名の綴りを故意に間違えることで、代替策をテストできるという利点があります。上記のライブサンプルでは、 `@supports` ルールの `display: grid` を `display: grip` などに変更すると試すことができます。 + +## まとめ + +機能クエリーは、古いブラウザーで使用されているサイトの表示をよりシンプルに強化することで、新しい機能の利用を開始するのに役立ちます。対応ブラウザー用の CSS をまとめることができるため、上記のグリッドの例のように、代替表示用のスタイルが漏れてしまうリスクもありません。 + +### 関連情報 + +- [@supports](/ja/docs/Web/CSS/@supports) ルール +- レイアウトの学習: [古いブラウザーの対応](/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [CSS グリッドレイアウトとプログレッシブエンハンスメント](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [CSS での機能クエリーの使用](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md index 5ae9631f82..4f69ef7e47 100644 --- a/files/ja/web/css/vertical-align/index.md +++ b/files/ja/web/css/vertical-align/index.md @@ -174,7 +174,7 @@ p { #### 結果 -{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}} +{{EmbedLiveSample("Vertical_alignment_in_a_line_box", 1200, 160)}} <h3 id="Vertical_alignment_in_a_table_cell">表のセル内での垂直方向の配置</h3> @@ -218,7 +218,7 @@ td { #### 結果 -{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}} +{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", 1200, 230)}} ## 仕様書 diff --git a/files/ja/web/guide/index/index.html b/files/ja/web/guide/index/index.html deleted file mode 100644 index 9f0d683123..0000000000 --- a/files/ja/web/guide/index/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: 索引 -slug: Web/Guide/Index -tags: - - Index - - ガイド -translation_of: Web/Guide/Index ---- -<div>{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}</div> - -<p>{{Index("/ja/docs/Web/Guide")}}</p> diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html index 04d36acba9..30989d253f 100644 --- a/files/ja/web/guide/user_input_methods/index.html +++ b/files/ja/web/guide/user_input_methods/index.html @@ -14,50 +14,51 @@ tags: translation_of: Web/Guide/User_input_methods --- <div class="summary"> -<p><span class="seoSummary">現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術についてより詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>、<a href="/ja/docs/Web/API/Pointer_Lock_API">ポインターロック API</a>、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>、<a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a>、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ</a>などがあります。</span></p> +<p><span class="seoSummary">現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術について、より詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a>、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>、<a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a>、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a> などがあります。</span></p> </div> <h2 id="User_input_and_controls_workflow" name="User_input_and_controls_workflow">ユーザー入力とコントロールのワークフロー</h2> -<p>The following diagram illustrates the typical workflow for implementing user input mechanisms:</p> +<p>次の図式は、ユーザー入力の仕組みを実装するための典型的なワークフローを説明しています。</p> <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p> -<p>First of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. Once you decided the input mechanisms, you can control them using tools offered by the web platform or JavaScript libraries.</p> +<p>最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、ウェブプラットフォームや JavaScript ライブラリーによって提供されているツールを使い、制御することができます。</p> <h2 id="Recommendations" name="Recommendations">推奨事項</h2> -<p>Available input mechanisms depend on the capabilities of the device running the application:</p> +<p>利用できる入力の仕組みはアプリを動かしているデバイスの性能に依存します。</p> <ul> - <li>Some devices provide touchscreen displays: the Web Platform offers <a href="/ja/docs/Web/Guide/Events/Touch_events">touch events</a> to interpret finger activity on touch-based user interfaces.</li> - <li>For devices providing a mouse/touchpad as a pointing method, the <a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> helps you in implementing a first person 3D game or other applications requiring full control of the pointing device. And the <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> helps you in displaying your app in fullscreen mode.</li> - <li>Using features such as <a href="/ja/docs/Web/Guide/HTML/Content_Editable">contentEditable</a> elements you can implement fast rich-text editors and with <a href="/ja/docs/Web/Guide/HTML/Drag_and_drop">Drag&Drop</a> let users moving elements inside your app. When screen orientation matters for your application, through the <a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a> you can read the screen orientation state and perform other actions.</li> - <li>You should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea.</li> + <li>デバイスの中にはタッチスクリーンディスプレイを提供するものがあります。そのウェブプラットフォームは、タッチを基にしたユーザーインターフェースで指の動きを解釈するための<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>を提供します。</li> + <li>ポインターを操作する方法としてマウスやタッチパッドを提供しているデバイスの場合、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> が一人称視点の 3D ゲームの実装や、他のアプリがポイントを合わせているデバイスの全ての制御を要求するのに役立ちます。そして <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> は、あなたのアプリをフルスクリーンモードで表示するのに役立ちます。</li> + <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツが編集可能な要素（contentEditable など）</a>のような機能を使うことで、速いリッチテキストエディターを実装することができ、そして<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a> はユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API </a>を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。 + <li>キーボードのアクセシビリティが適切か常に気に掛ける必要があります。多くのユーザーはキーボードのみを使いウェブサイトやアプリを操作します。ですので、あなたのシステムの機能性からそれを除外することは良くない考えです。</li> </ul> -<p>The following is a set of recommendations and best practices for using such tools in Open Web Apps.</p> +<p>以下は推奨事項一式であり、オープンなウェブアプリでそのようなツールを利用するためのベストプラクティスです。</p> -<h3 id="Decide_what_input_mechanism_you’re_using">Decide what input mechanism you’re using</h3> +<h3 id="Decide_what_input_mechanism_you’re_using">使用する入力の仕組みを決める</h3> <h4 id="Keyboard" name="Keyboard">キーボード</h4> -<p>Keyboard input can be controlled by your app. For example if you want to add controls when any key gets pressed, you need to add an event listener on the window object:</p> +<p>キーボード入力はあなたのアプリによって制御できます。例えば、何らかのキーが押された時に制御を追加したい場合、ウィンドウオブジェクトにイベントリスナーを追加する必要があります。</p> <pre class="brush: js notranslate">window.addEventListener("keydown", handleKeyDown, true); window.addEventListener("keyup", handleKeyUp, true);</pre> -<p>where <code>handleKeyDown</code> and <code>handleKeyUp</code> are the functions implementing the controls about the <code>keydown</code> and <code>keyup</code> events.</p> +<p><code>handleKeyDown</code> と <code>handleKeyUp</code> は、<code>keydown</code> と <code>keyup</code> イベントについての制御を実装する関数です。</p> <div class="note"> -<p><strong>注</strong>: Have a look at the <a href="/ja/docs/Web/Reference/Events">Events reference</a> and {{domxref("KeyboardEvent")}} guide to find out more about keyboard events.</p> +<p><strong>注</strong>: キーボードイベントについて、より知りたい人は<a href="/ja/docs/Web/Reference/Events">イベントリファレンス</a> と {{domxref("KeyboardEvent")}} ガイドをご確認ください。</p> </div> <h4 id="Mouse" name="Mouse">マウス</h4> -<p>The events occurring when the user interacts with a pointing device such as a mouse are represented by the {{domxref("MouseEvent")}} DOM Interface. Common mouse events include <a href="/ja/docs/Web/Reference/Events/click"><code>click</code></a>, <a href="/ja/docs/Web/Reference/Events/dblclick"><code>dblclick</code></a>, <a href="/ja/docs/Web/Reference/Events/mouseup"><code>mouseup</code></a>, and <a href="/ja/docs/Web/Reference/Events/mousedown"><code>mousedown</code></a>. The list of all events using the Mouse Event Interface is provided in the <a href="/ja/docs/Web/Reference/Events">Events reference</a>.</p> +<p>ユーザーがマウスのようなポインティングデバイスと関わっている時に発生するイベントは {{domxref("MouseEvent")}} DOM インターフェースによって表されます。一般的なマウスイベントは、<a href="/ja/docs/Web/Reference/Events/click"><code>click イベント</code></a>、<a href="/ja/docs/Web/API/Element/dblclick_event"><code>dblclick イベント</code></a>、<a href="/ja/docs/Web/API/Element/mouseup_event"><code>mouseup イベント</code></a>、そして <a href="/ja/docs/Web/Reference/Events/mousedown"><code>mousedown イベント</code></a>を含みます。マウスイベントインターフェースが使用している全てのイベントの一覧は、<a href="/ja/docs/Web/Reference/Events">イベントリファレンス</a>に記載されています。</p> <p>When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag & Drop (see below).</p> +<p>入力デバイスがマウスの場合、ユーザー入力を Pointer Lock API やドラッグ＆ドロップ API の実装でも制御できます (下記を参照してください)。</p> <h4 id="Finger_touch" name="Finger_touch">指でのタッチ</h4> @@ -150,14 +151,14 @@ if (elem.requestFullscreen) { <h4 id="contentEditable" name="contentEditable">コンテンツを編集可能にする</h4> -<p><a href="/ja/docs/Web/HTML/Global_attributes#contenteditable"><code>contenteditable</code></a> 属性を使うことで、開いているウェブアプリのあらゆる DOM 要素を直接編集することができます。</p> +<p><a href="/ja/docs/Web/HTML/Global_attributes#attr-contenteditable"><code>contenteditable</code></a> 属性を使うことで、開いているウェブアプリのあらゆる DOM 要素を直接編集することができます。</p> <pre class="brush: html notranslate"><div contenteditable="true"> このテキストは閲覧者が編集することができます。 </div></pre> <div class="note"> -<p><strong>注</strong>: 互換性や例、その他リソースに関する情報は <a href="/ja/docs/Web/Guide/HTML/Content_Editable">コンテンツを編集可能にするガイド</a>で確認することができます。</p> +<p><strong>注</strong>: 互換性や例、その他リソースに関する情報は <a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にするガイド</a>で確認することができます。</p> </div> <h2 id="Examples" name="Examples">例</h2> @@ -168,7 +169,7 @@ if (elem.requestFullscreen) { <dt><strong><a href="/ja/docs/Web/API/Pointer_Lock_API#example">Simple pointer lock demo</a></strong></dt> <dd>We've written a simple pointer lock demo to show you how to use it to set up a simple control system. The demo uses JavaScript to draw a ball inside a <code>{{htmlelement("canvas")}}</code> element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse.</dd> <dt><strong><a href="http://html5demos.com/contenteditable">コンテンツを編集可能にするデモ</a></strong></dt> - <dd>このデモは、編集可能なドキュメントセクションを作成することに利用できる contenteditable がどのように動くか表示しており、その状態はその後 <a href="/ja/docs/Web/Guide/API/DOM/Storage">ローカルストレージ</a>を使い保存されます。</dd> + <dd>このデモは、編集可能なドキュメントセクションを作成することに利用できる contenteditable がどのように動くか表示しており、その状態はその後 <a href="/ja/docs/Web/API/Web_Storage_API">ローカルストレージ</a>を使い保存されます。</dd> </dl> <h2 id="Tutorials" name="Tutorials">チュートリアル</h2> @@ -176,9 +177,9 @@ if (elem.requestFullscreen) { <ul> <li><a href="/ja/docs/Web/Guide/DOM/Events/Touch_events">タッチイベントガイド</a></li> <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面の回転の管理</a></li> - <li><a href="/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode">全画面モードの使用</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">複数のアイテムのドラッグ＆ドロップ</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Drag_operations">ドラッグ操作ガイド</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面モードの使用</a></li> + <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items">複数のアイテムのドラッグ＆ドロップ</a></li> + <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">ドラッグ操作ガイド</a></li> </ul> <h2 id="Reference" name="Reference">関連情報</h2> @@ -186,12 +187,12 @@ if (elem.requestFullscreen) { <ul> <li>{{domxref("MouseEvent")}}</li> <li>{{domxref("KeyboardEvent")}}</li> - <li><a href="/ja/docs/Web/Guide/Events/Touch_events">タッチイベント</a></li> - <li>{{domxref("Pointer_Lock_API")}}</li> - <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面回転 API</a></li> - <li><a href="/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode">全画面 API</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Drag_and_drop">ドラッグ＆ドロップ</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Content_Editable">コンテンツを編集可能にする</a></li> + <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li> + <li><a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a></li> + <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にする</a></li> <li><a href="/ja/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li> <li><a href="/ja/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li> </ul> diff --git a/files/ja/web/html/element/summary/index.html b/files/ja/web/html/element/summary/index.html index 64afe6b82b..5b2413f101 100644 --- a/files/ja/web/html/element/summary/index.html +++ b/files/ja/web/html/element/summary/index.html @@ -114,7 +114,7 @@ translation_of: Web/HTML/Element/summary <h3 id="HTML_in_summaries" name="HTML_in_summaries">概要の中の HTML</h3> -<p>この例は、 <code><summary></code> 要素にいくらか意味をを追加して、ラベルを重要であると示します。</p> +<p>この例は、 <code><summary></code> 要素にいくらか意味を追加して、ラベルを重要であると示します。</p> <pre class="brush: html notranslate"><details open> <summary><strong>Overview</strong></summary> diff --git a/files/ja/web/html/index/index.html b/files/ja/web/html/index/index.html deleted file mode 100644 index eadaa1c4d0..0000000000 --- a/files/ja/web/html/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: HTML ドキュメントの索引 -slug: Web/HTML/Index -tags: - - HTML - - Index - - MDN Meta -translation_of: Web/HTML/Index ---- -<p>{{Index("/ja/docs/Web/HTML")}} <span class="seoSummary">利用可能なすべての HTML に関する文書の包括的な索引リストです。</span></p> diff --git a/files/ja/web/http/headers/content-encoding/index.html b/files/ja/web/http/headers/content-encoding/index.html index 98df102634..0f5c3494f5 100644 --- a/files/ja/web/http/headers/content-encoding/index.html +++ b/files/ja/web/http/headers/content-encoding/index.html @@ -69,7 +69,7 @@ Content-Encoding: deflate, gzip <pre>Content-Encoding: gzip</pre> -<p>なお、サーバーはどの圧縮方式も使用することを義務づけられていません。圧縮はサーバー設定や使用しているサーバージュールに強く依存します。</p> +<p>なお、サーバーはどの圧縮方式も使用することを義務づけられていません。圧縮はサーバー設定や使用しているサーバーモジュールに強く依存します。</p> <h2 id="Specifications" name="Specifications">仕様書</h2> diff --git a/files/ja/web/http/index/index.html b/files/ja/web/http/index/index.html deleted file mode 100644 index acbf54eb38..0000000000 --- a/files/ja/web/http/index/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: 索引 -slug: Web/HTTP/Index -tags: - - HTTP - - Index -translation_of: Web/HTTP/Index ---- -<div>{{HTTPSidebar}}</div> - -<p>このページは概要やタグに沿った MDN のすべての HTTP ページの一覧です。</p> - -<p>{{Index("/ja/docs/Web/HTTP")}}</p> diff --git a/files/ja/web/javascript/reference/strict_mode/index.md b/files/ja/web/javascript/reference/strict_mode/index.md index b2fb61e0f6..a3de03d9ba 100644 --- a/files/ja/web/javascript/reference/strict_mode/index.md +++ b/files/ja/web/javascript/reference/strict_mode/index.md @@ -119,7 +119,7 @@ fixed.newProp = 'ohai'; // TypeError が発生します delete Object.prototype; // TypeError が発生します ``` -第四に、厳格モードでは、関数の引数名が一意であることが要求されます。通常のコードでは、引数の名前が重複していると、同じ名前の前の引数が見えなくなります。こうした前の引数は `arguments[i]` を通せば利用可能なので、完全にアクセスできないわけではありません。しかし、この隠蔽はほとんど意味がなく、おそらく望ましくないものです（例えば、タイプミスを隠してしまうかもしれません）。したがって、厳密モードでは引数名が超空すると構文エラーになります。 +第四に、厳格モードでは、関数の引数名が一意であることが要求されます。通常のコードでは、引数の名前が重複していると、同じ名前の前の引数が見えなくなります。こうした前の引数は `arguments[i]` を通せば利用可能なので、完全にアクセスできないわけではありません。しかし、この隠蔽はほとんど意味がなく、おそらく望ましくないものです（例えば、タイプミスを隠してしまうかもしれません）。したがって、厳格モードでは引数名が重複すると構文エラーになります。 ```js function sum(a, a, c) { // !!! 構文エラー @@ -128,7 +128,7 @@ function sum(a, a, c) { // !!! 構文エラー } ``` -第五に、ECMAScript 5 の厳格モードでは、[`0` を先頭とした 8 進数表記や 8 進数エスケープシーケンスを禁止](/ja/docs/Web/JavaScript/Reference/Errors/Deprecated_octal)します。厳格モード以外では、 `0644` のような `0` で始まる数値は、すべての桁が 8 より小さい場合、 8 進数 (`0644 === 420`) として解釈されます。 8 進数のエスケープシーケンス、例えば `"\45"` は `"%"` と等しいものですが、文字を 8 進数の拡張 ASCII 文字コード番号で表現するために使用されます。厳密モードでは、これは構文エラーになります。 ECMAScript 2015 では、数値の前に "`0o`" を付けることで 8 進数のリテラルに対応しています。 +第五に、ECMAScript 5 の厳格モードでは、[`0` を先頭とした 8 進数表記や 8 進数エスケープシーケンスを禁止](/ja/docs/Web/JavaScript/Reference/Errors/Deprecated_octal)します。厳格モード以外では、 `0644` のような `0` で始まる数値は、すべての桁が 8 より小さい場合、 8 進数 (`0644 === 420`) として解釈されます。 8 進数のエスケープシーケンス、例えば `"\45"` は `"%"` と等しいものですが、文字を 8 進数の拡張 ASCII 文字コード番号で表現するために使用されます。厳格モードでは、これは構文エラーになります。 ECMAScript 2015 では、数値の前に "`0o`" を付けることで 8 進数のリテラルに対応しています。 ```js var a = 0o10; // ES2015: 8 進数 diff --git a/files/ja/web/mathml/index/index.html b/files/ja/web/mathml/index/index.html deleted file mode 100644 index a32dfa6b75..0000000000 --- a/files/ja/web/mathml/index/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: MathML 関連ドキュメントの索引 -slug: Web/MathML/Index -tags: - - Index - - MathML -translation_of: Web/MathML/Index ---- -<p>{{Index("/ja/docs/Web/MathML")}}</p> diff --git a/files/ja/web/media/images/index.html b/files/ja/web/media/images/index.html deleted file mode 100644 index 30e3aefce7..0000000000 --- a/files/ja/web/media/images/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: HTML での画像の使用 -slug: Web/Media/images -tags: - - HTML - - Images - - Landing - - Media -translation_of: Web/Media/images ---- -<p>HTML の用語集 {{Glossary("HTML")}} は、以下のようになっています。{{HTMLElement("img")}} 要素を使用すると HTML 文書に画像を埋め込むことができ、一方で {{HTMLElement("picture")}} 要素を使用するとレスポンシブ画像を使用することができます。このガイドでは、Web サイトへの画像の追加を扱うリソースへのリンクを紹介します。</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="リファレンス">リファレンス</h2> - -<p>これらの記事では、Web 上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。</p> - -<h3 id="HTML">HTML</h3> - -<dl> - <dt>{{HTMLElement("img")}}</dt> - <dd><strong>HTML <code><img></code> 要素</strong>は、Web ページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性をサポートしており、画像を見ない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。</dd> - <dt>{{HTMLElement("picture")}}</dt> - <dd><strong>HTML <code><picture></code> 要素</strong>は、0 個以上の {{HTMLElement("source")}} 要素と1個の {{HTMLElement("img")}} 要素を含みます。ブラウザは、それぞれの子 <source> 要素を考慮して、それらの中から最適なものを選択します。</dd> -</dl> - -<h3 id="CSS">CSS</h3> - -<dl> - <dt>{{cssxref("object-fit")}}</dt> - <dd><code><strong>object-fit</strong></code> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、<code><a href="/ja/docs/Web/HTML/Element/Img"><img></a></code> や <code><a href="/ja/docs/Web/HTML/Element/video"><video></a></code> のような<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>の内容を、そのコンテナに合わせてどのようにリサイズするかを設定します。</dd> - <dt>{{cssxref("object-position")}}</dt> - <dd><strong><code>object-position</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素のボックス内で選択された<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>内のコンテンツの整列を指定します。置換された要素のオブジェクトに覆われていないボックス内の領域は、要素の背景が表示されます。</dd> - <dt>{{cssxref("background-image")}}</dt> - <dd><strong><code>background-image</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素の背景画像を設定します。</dd> - <dd></dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="ガイド">ガイド</h2> - -<p>これらの記事では、画像の種類を選択して設定するためのガイダンスを提供しています。</p> - -<dl> - <dt><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類とフォーマットガイド</a></dt> - <dd>Web ブラウザで一般的にサポートされている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要因などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。</dd> - <dt><a href="/ja/docs/Web/Media/images/aspect_ratio_mapping">メディアコンテナ要素の幅と高さの属性をアスペクト比にマッピングする</a></dt> - <dd>これにより、ブラウザが画像を読み込む方法が変更され、アスペクト比がブラウザによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。</dd> -</dl> - -<dl> -</dl> - -<h2 id="その他のトピック">その他のトピック</h2> - -<p>興味がありそうな関連トピック</p> - -<dl> - <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">HTML の学習: レスポンシブ画像</a></dt> - <dd>この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なるデバイスでも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。</dd> -</dl> -</div> -</div> diff --git a/files/ja/web/media/images/index.md b/files/ja/web/media/images/index.md new file mode 100644 index 0000000000..6a27dfd6c5 --- /dev/null +++ b/files/ja/web/media/images/index.md @@ -0,0 +1,47 @@ +--- +title: HTML での画像の使用 +slug: Web/Media/images +tags: + - HTML + - 画像 + - ランディング + - メディア +translation_of: Web/Media/images +--- +{{Glossary("HTML")}} の {{HTMLElement("img")}} 要素で HTML 文書に画像を埋め込むことができ、 {{HTMLElement("picture")}} 要素を使用すると[レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)を使用することができます。このガイドでは、ウェブサイトへの画像の追加を扱うリソースへのリンクを紹介します。 + +## リファレンス + +これらの記事では、ウェブ上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。 + +### HTML + +- {{HTMLElement("img")}} + - : **HTML の `<img>` 要素**は、ウェブページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性に対応しており、画像を見られない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。 +- {{HTMLElement("picture")}} + - : **HTML の `<picture>` 要素**は、 0 個以上の {{HTMLElement("source")}} 要素と 1 個の {{HTMLElement("img")}} 要素を含み、様々な画面や端末のシナリオのために画像の別な版を提供します。ブラウザーは、子要素であるそれぞれの `<source>` 要素を考慮して、それらの中から最適なものを選択します。 + +### CSS + +- {{cssxref("object-fit")}} + - : **`object-fit`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば [`<img>`](/ja/docs/Web/HTML/Element/img) や [`<video>`](/ja/docs/Web/HTML/Element/video) の中身をコンテナーに合わせるために、どのようにリサイズする可を設定します。 +- {{cssxref("object-position")}} + - : **`object-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のボックス内で選択された[置換要素](/ja/docs/Web/CSS/Replaced_element)内のコンテンツの配置を指定します。ボックス内の領域のうちで置換要素のオブジェクトに覆われていない部分には、要素の背景が表示されます。 +- {{cssxref("background-image")}} + - : **`background-image`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 1 つまたは複数の要素の背景画像を設定します。 + +## ガイド + +これらの記事では、画像の種類を選択して構成するためのガイダンスを提供しています。 + +- [画像ファイルの種類と形式ガイド](/ja/docs/Web/Media/Formats/Image_types) + - : ウェブブラウザーが一般的に対応ている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要素などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。 +- [メディアのコンテナー要素の width および height 属性をアスペクト比に対応付ける](/ja/docs/Web/Media/images/aspect_ratio_mapping) + - : これにより、ブラウザーが画像を読み込む方法が変更され、アスペクト比がブラウザーによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。 + +## その他のトピック + +興味がありそうな関連トピック + +- [HTML の学習: レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + - : この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なる端末でも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。 diff --git a/files/ja/web/svg/index/index.html b/files/ja/web/svg/index/index.html deleted file mode 100644 index 84bc4161f7..0000000000 --- a/files/ja/web/svg/index/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: SVG 関連ドキュメントの索引 -slug: Web/SVG/Index -tags: - - Index - - SVG -translation_of: Web/SVG/Index ---- -<p>{{Index("/ja/docs/Web/SVG")}}</p> diff --git a/files/ja/web/xpath/index/index.html b/files/ja/web/xpath/index/index.html deleted file mode 100644 index e90e8fb344..0000000000 --- a/files/ja/web/xpath/index/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Index -slug: Web/XPath/Index -tags: - - Index - - Reference - - XPath - - XSLT -translation_of: Web/XPath/Index ---- -<p>{{Index("/ja/docs/Web/XPath")}}</p> - -<div class="boxed translate-rendered text-content"> -<p>{{QuickLinksWithSubpages("/ja/docs/Web/XPath")}}</p> -</div> diff --git a/files/ja/web/xslt/index/index.html b/files/ja/web/xslt/index/index.html deleted file mode 100644 index 91bb5362a3..0000000000 --- a/files/ja/web/xslt/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Index -slug: Web/XSLT/Index -tags: - - Index - - XSLT - - リファレンス -translation_of: Web/XSLT/Index ---- -<p>{{XSLTRef}}{{QuickLinksWithSubpages("/ja/docs/Web/XSLT")}}</p> - -<p>{{Index("/ja/docs/XSLT")}}</p> |