From 5fab0a1eb99e87aa141adb3777d92c69437ae971 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 2 Mar 2022 22:49:44 +0900 Subject: Element 以下の a-g で始まるプロパティを移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/after/index.html | 90 -------- files/ja/web/api/element/after/index.md | 90 ++++++++ files/ja/web/api/element/animate/index.html | 120 ----------- files/ja/web/api/element/animate/index.md | 120 +++++++++++ files/ja/web/api/element/append/index.html | 100 --------- files/ja/web/api/element/append/index.md | 100 +++++++++ files/ja/web/api/element/before/index.html | 91 -------- files/ja/web/api/element/before/index.md | 91 ++++++++ files/ja/web/api/element/closest/index.html | 149 ------------- files/ja/web/api/element/closest/index.md | 149 +++++++++++++ files/ja/web/api/element/getattribute/index.html | 81 -------- files/ja/web/api/element/getattribute/index.md | 81 ++++++++ .../web/api/element/getattributenames/index.html | 70 ------- .../ja/web/api/element/getattributenames/index.md | 70 +++++++ .../ja/web/api/element/getattributenode/index.html | 63 ------ files/ja/web/api/element/getattributenode/index.md | 63 ++++++ files/ja/web/api/element/getattributens/index.html | 47 ----- files/ja/web/api/element/getattributens/index.md | 47 +++++ .../api/element/getboundingclientrect/index.html | 112 ---------- .../web/api/element/getboundingclientrect/index.md | 112 ++++++++++ files/ja/web/api/element/getclientrects/index.html | 231 --------------------- files/ja/web/api/element/getclientrects/index.md | 231 +++++++++++++++++++++ .../api/element/getelementsbyclassname/index.html | 113 ---------- .../api/element/getelementsbyclassname/index.md | 113 ++++++++++ .../api/element/getelementsbytagname/index.html | 55 ----- .../web/api/element/getelementsbytagname/index.md | 55 +++++ .../api/element/getelementsbytagnamens/index.html | 50 ----- .../api/element/getelementsbytagnamens/index.md | 50 +++++ 28 files changed, 1372 insertions(+), 1372 deletions(-) delete mode 100644 files/ja/web/api/element/after/index.html create mode 100644 files/ja/web/api/element/after/index.md delete mode 100644 files/ja/web/api/element/animate/index.html create mode 100644 files/ja/web/api/element/animate/index.md delete mode 100644 files/ja/web/api/element/append/index.html create mode 100644 files/ja/web/api/element/append/index.md delete mode 100644 files/ja/web/api/element/before/index.html create mode 100644 files/ja/web/api/element/before/index.md delete mode 100644 files/ja/web/api/element/closest/index.html create mode 100644 files/ja/web/api/element/closest/index.md delete mode 100644 files/ja/web/api/element/getattribute/index.html create mode 100644 files/ja/web/api/element/getattribute/index.md delete mode 100644 files/ja/web/api/element/getattributenames/index.html create mode 100644 files/ja/web/api/element/getattributenames/index.md delete mode 100644 files/ja/web/api/element/getattributenode/index.html create mode 100644 files/ja/web/api/element/getattributenode/index.md delete mode 100644 files/ja/web/api/element/getattributens/index.html create mode 100644 files/ja/web/api/element/getattributens/index.md delete mode 100644 files/ja/web/api/element/getboundingclientrect/index.html create mode 100644 files/ja/web/api/element/getboundingclientrect/index.md delete mode 100644 files/ja/web/api/element/getclientrects/index.html create mode 100644 files/ja/web/api/element/getclientrects/index.md delete mode 100644 files/ja/web/api/element/getelementsbyclassname/index.html create mode 100644 files/ja/web/api/element/getelementsbyclassname/index.md delete mode 100644 files/ja/web/api/element/getelementsbytagname/index.html create mode 100644 files/ja/web/api/element/getelementsbytagname/index.md delete mode 100644 files/ja/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/ja/web/api/element/getelementsbytagnamens/index.md 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 ---- -
{{APIRef("DOM")}}
- -

Element.after() は、Element の親の子リストの、Element の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。

- -

構文

- -
-after(... nodes)
-
- -

引数

- -
-
nodes
-
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
-
- -

例外

- - - -

例

- -

要素の挿入

- -
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>"
-
- -

テキストの挿入

- -
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>"
- -

要素とテキストの挿入

- -
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}}

- -

関連情報

- - 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..52186ca2fb --- /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 + - Method + - Node + - Reference +browser-compat: api.Element.after +translation_of: Web/API/Element/after +--- +
{{APIRef("DOM")}}
+ +

Element.after() は、Element の親の子リストの、Element の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。

+ +

構文

+ +
+after(... nodes)
+
+ +

引数

+ +
+
nodes
+
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
+
+ +

例外

+ + + +

例

+ +

要素の挿入

+ +
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>"
+
+ +

テキストの挿入

+ +
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>"
+ +

要素とテキストの挿入

+ +
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}}

+ +

関連情報

+ + 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 ---- -
{{APIRef('Web Animations')}} {{SeeCompatTable}}
- -

{{domxref("Element")}} インターフェースの animate() メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。

- -

構文

- -
element.animate(keyframes, options);
-
- -

引数

- -
-
keyframes
-
- -
    -
  1. 列挙可能な値の配列をプロパティに持つ keyframes オブジェクト
    2. -
  2. keyframes オブジェクトから成る配列
    3. -
- -
-
のどちらかを指定します。keyframes 形式の詳細については Keyframe Formats で確認できます。
-
-
    -
  1. 変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト - 
    element.animate({
-  opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
-  color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
-}, 2000);
-
    -
    2. -
  2. CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列 - 
    element.animate([
-  { // フレーム 1
-    opacity: 0,
-    color: "#fff"
-  },
-  { // フレーム 2
-    opacity: 1,
- ​   color: "#000"
-  }
-], 2000);
    -
    3. -
-
-
options
-
アニメーションの再生時間を表す ms 単位の整数値、または  animation timing options を含むオブジェクトを渡す必要があります。後者の場合、animation timing options のプロパティに加え、以下のようなプロパティも追加して animate() に渡すことができます。
-
- -

keyframeOptions に追加できるプロパティ

- -
-
id
-
アニメーションを参照する文字列
-
- -
-
composite
-
Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は replace です。 -
    -
  • add dictates an additive effect, where each successive iteration builds on the last. 例として transform を挙げると、translateX(-200px) は自身よりも前に指定されていた rotate(20deg) の値を上書きすることはありませんが、合成結果は translateX(-200px) rotate(20deg) になります。
    • -
  • accumulate を指定した場合、add に似ていますがよりスマートな結果が得られ、blur(2) と blur(5) の合成結果は blur(7) になります（blur(2) blur(5) ではありません）。
    • -
  • replace を指定した場合、前回の値は新しい値で上書きされます。
    • -
-
-
iterationComposite
-
Defines the way animation values build from iteration to iteration. accumulate または replace を指定できます（上記参照）。デフォルト値は replace です。
-
- -

戻り値

- -

{{domxref("Animation")}} を返します。

- -

使用例

- -

Down the Rabbit Hole (with the Web Animation API) のデモでは、上に向かって永遠に流れ続けるアニメーションが #tunnel 要素に施されています。ここでは、アニメーションを素早く作成して再生できる animate() メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。

- -
document.getElementById("tunnel").animate([
-  // keyframes
-  { transform: 'translate3D(0, 0, 0)' },
-  { transform: 'translate3D(0, -300px, 0)' }
-], {
-  // timing options
-  duration: 1000,
-  iterations: Infinity
-});
-
- -

仕様

- - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Editor's draft.
- -

ブラウザ実装状況

- -

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

- -

参考情報

- - 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..661f224477 --- /dev/null +++ b/files/ja/web/api/element/animate/index.md @@ -0,0 +1,120 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +translation_of: Web/API/Element/animate +--- +
{{APIRef('Web Animations')}} {{SeeCompatTable}}
+ +

{{domxref("Element")}} インターフェースの animate() メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。

+ +

構文

+ +
element.animate(keyframes, options);
+
+ +

引数

+ +
+
keyframes
+
+ +
    +
  1. 列挙可能な値の配列をプロパティに持つ keyframes オブジェクト
    2. +
  2. keyframes オブジェクトから成る配列
    3. +
+ +
+
のどちらかを指定します。keyframes 形式の詳細については Keyframe Formats で確認できます。
+
+
    +
  1. 変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト + 
    element.animate({
+  opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
+  color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
+}, 2000);
+
    +
    2. +
  2. CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列 + 
    element.animate([
+  { // フレーム 1
+    opacity: 0,
+    color: "#fff"
+  },
+  { // フレーム 2
+    opacity: 1,
+ ​   color: "#000"
+  }
+], 2000);
    +
    3. +
+
+
options
+
アニメーションの再生時間を表す ms 単位の整数値、または  animation timing options を含むオブジェクトを渡す必要があります。後者の場合、animation timing options のプロパティに加え、以下のようなプロパティも追加して animate() に渡すことができます。
+
+ +

keyframeOptions に追加できるプロパティ

+ +
+
id
+
アニメーションを参照する文字列
+
+ +
+
composite
+
Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は replace です。 +
    +
  • add dictates an additive effect, where each successive iteration builds on the last. 例として transform を挙げると、translateX(-200px) は自身よりも前に指定されていた rotate(20deg) の値を上書きすることはありませんが、合成結果は translateX(-200px) rotate(20deg) になります。
    • +
  • accumulate を指定した場合、add に似ていますがよりスマートな結果が得られ、blur(2) と blur(5) の合成結果は blur(7) になります（blur(2) blur(5) ではありません）。
    • +
  • replace を指定した場合、前回の値は新しい値で上書きされます。
    • +
+
+
iterationComposite
+
Defines the way animation values build from iteration to iteration. accumulate または replace を指定できます（上記参照）。デフォルト値は replace です。
+
+ +

戻り値

+ +

{{domxref("Animation")}} を返します。

+ +

使用例

+ +

Down the Rabbit Hole (with the Web Animation API) のデモでは、上に向かって永遠に流れ続けるアニメーションが #tunnel 要素に施されています。ここでは、アニメーションを素早く作成して再生できる animate() メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

ブラウザ実装状況

+ +

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

+ +

参考情報

+ + 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 ---- -

{{APIRef("DOM")}}

- -

Element.append() メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを Element のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。

- -

{{domxref("Node.appendChild()")}} との違いは次の通りです。

- - - -

構文

- -
-append(...nodesOrDOMStrings)
-
- -

引数

- -
-
nodesOrDOMStrings
-
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
-
- -

例外

- - - -

例

- -

要素の追加

- -
let div = document.createElement("div")
-let p = document.createElement("p")
-div.append(p)
-
-console.log(div.childNodes) // NodeList [ <p> ]
-
- -

テキストの追加

- -
let div = document.createElement("div")
-div.append("Some text")
-
-console.log(div.textContent) // "Some text"
- -

要素とテキストの追加

- -
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")}} をご覧ください。

- -
let div = document.createElement("div")
-
-with(div) {
-  append("foo")
-}
-// ReferenceError: append is not defined
- - -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - 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..82feaa6f91 --- /dev/null +++ b/files/ja/web/api/element/append/index.md @@ -0,0 +1,100 @@ +--- +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 +--- +

{{APIRef("DOM")}}

+ +

Element.append() メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを Element のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。

+ +

{{domxref("Node.appendChild()")}} との違いは次の通りです。

+ + + +

構文

+ +
+append(...nodesOrDOMStrings)
+
+ +

引数

+ +
+
nodesOrDOMStrings
+
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
+
+ +

例外

+ + + +

例

+ +

要素の追加

+ +
let div = document.createElement("div")
+let p = document.createElement("p")
+div.append(p)
+
+console.log(div.childNodes) // NodeList [ <p> ]
+
+ +

テキストの追加

+ +
let div = document.createElement("div")
+div.append("Some text")
+
+console.log(div.textContent) // "Some text"
+ +

要素とテキストの追加

+ +
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")}} をご覧ください。

+ +
let div = document.createElement("div")
+
+with(div) {
+  append("foo")
+}
+// ReferenceError: append is not defined
+ + +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + 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 ---- -
{{APIRef("DOM")}}
- -

Element.before() は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この Element の親の子リストの中、この Element の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。

- -

構文

- -
before(... nodes)
- -

引数

- -
-
nodes
-
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
-
- -

例外

- - - -

例

- -

要素の挿入

- -
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>"
-
- -

テキストの挿入

- -
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>"
- -

要素とテキストの挿入

- -
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}}

- -

関連情報

- - 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..652f38c95f --- /dev/null +++ b/files/ja/web/api/element/before/index.md @@ -0,0 +1,91 @@ +--- +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 +--- +
{{APIRef("DOM")}}
+ +

Element.before() は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この Element の親の子リストの中、この Element の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。

+ +

構文

+ +
before(... nodes)
+ +

引数

+ +
+
nodes
+
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
+
+ +

例外

+ + + +

例

+ +

要素の挿入

+ +
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>"
+
+ +

テキストの挿入

+ +
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>"
+ +

要素とテキストの挿入

+ +
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}}

+ +

関連情報

+ + 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 ---- -
{{APIRef('DOM')}}
- -
closest() メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 null を返します。 - -

構文

- -
var closestElement = targetElement.closest(selectors);
-
- -

引数

- - - -

返値

- - - -

例外

- - - -

例

- -

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

- -
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+) に対応しているものには、ポリフィルがあります。

- -
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 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。

- -
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;
-  };
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}初回定義
- -

ブラウザーの互換性

- -
-

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

- -

互換性のメモ

- -
    -
  • Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 document.createElement(tagName).closest(tagName) が null を返します。
    • -
-
- -

関連情報

- - -
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..dd876b80aa --- /dev/null +++ b/files/ja/web/api/element/closest/index.md @@ -0,0 +1,149 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference + - メソッド +translation_of: Web/API/Element/closest +--- +
{{APIRef('DOM')}}
+ +
closest() メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 null を返します。 + +

構文

+ +
var closestElement = targetElement.closest(selectors);
+
+ +

引数

+ + + +

返値

+ + + +

例外

+ + + +

例

+ +

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

+ +
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+) に対応しているものには、ポリフィルがあります。

+ +
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 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。

+ +
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;
+  };
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ +
+

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

+ +

互換性のメモ

+ +
    +
  • Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 document.createElement(tagName).closest(tagName) が null を返します。
    • +
+
+ +

関連情報

+ + +
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 ---- -
{{APIRef("DOM")}}
- -

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

- -

構文

- -
let attribute = element.getAttribute(attributeName);
-
- -

ここで、

- - - -

例

- -
const div1 = document.getElementById('div1');
-const align = div1.getAttribute('align');
-
-alert(align); // id="div1" の要素の align の値を表示します。
- -

解説

- -

小文字化

- -

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

- -

属性が存在しない場合

- -

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

- -

ノンス値の受け取り

- -

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

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

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

- -
let nonce =  script.nonce;
- -

仕様書

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

ブラウザーの互換性

- -
-

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

-
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..4ee84122ba --- /dev/null +++ b/files/ja/web/api/element/getattribute/index.md @@ -0,0 +1,81 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Element + - Method + - Reference + - メソッド +translation_of: Web/API/Element/getAttribute +--- +
{{APIRef("DOM")}}
+ +

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

+ +

構文

+ +
let attribute = element.getAttribute(attributeName);
+
+ +

ここで、

+ + + +

例

+ +
const div1 = document.getElementById('div1');
+const align = div1.getAttribute('align');
+
+alert(align); // id="div1" の要素の align の値を表示します。
+ +

解説

+ +

小文字化

+ +

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

+ +

属性が存在しない場合

+ +

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

+ +

ノンス値の受け取り

+ +

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

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

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

+ +
let nonce =  script.nonce;
+ +

仕様書

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

ブラウザーの互換性

+ +
+

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

+
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 ---- -
{{APIRef("DOM")}}
- -

{{domxref("Element")}} インターフェースの getAttributeNames() メソッドは要素の属性の名前を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。

- -

getAttributeNames() を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。

- -

構文

- -
let attributeNames = element.getAttributeNames();
-
- -

例

- -
// 要素の属性に対して反復処理する
-for(let name of element.getAttributeNames()) {
-	let value = element.getAttribute(name);
-	console.log(name, value);
-}
-
- -

代替モジュール

- -
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;
-  };
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}{{Spec2("DOM WHATWG")}}初回定義
- -

ブラウザーの対応

- -
-

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

-
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..f353b84b74 --- /dev/null +++ b/files/ja/web/api/element/getattributenames/index.md @@ -0,0 +1,70 @@ +--- +title: Element.getAttributeNames() +slug: Web/API/Element/getAttributeNames +tags: + - API + - DOM + - Element + - getAttributeNames + - メソッド + - 属性 +translation_of: Web/API/Element/getAttributeNames +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} インターフェースの getAttributeNames() メソッドは要素の属性の名前を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。

+ +

getAttributeNames() を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。

+ +

構文

+ +
let attributeNames = element.getAttributeNames();
+
+ +

例

+ +
// 要素の属性に対して反復処理する
+for(let name of element.getAttributeNames()) {
+	let value = element.getAttribute(name);
+	console.log(name, value);
+}
+
+ +

代替モジュール

+ +
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;
+  };
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}{{Spec2("DOM WHATWG")}}初回定義
+ +

ブラウザーの対応

+ +
+

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

+
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 ---- -
{{ APIRef("DOM") }}
- -

指定された要素の指定された属性を、 Attr ノードとして返します。

- -

構文

- -
var attrNode = element.getAttributeNode(attrName);
-
- - - -

Example

- -
// 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、 previousSibling、nextSibling などは Attr ノードでは null になります。しかしながら、 ownerElement プロパティではこの属性が属している要素を取得することができます。

- -

要素の属性の値を取得するためには、通常 getAttributeNode の代わりに getAttribute を使用してください。

- -

{{ DOMAttributeMethods() }}

- -

仕様書

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

ブラウザーの互換性

- -

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

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..4d28b69f39 --- /dev/null +++ b/files/ja/web/api/element/getattributenode/index.md @@ -0,0 +1,63 @@ +--- +title: Element.getAttributeNode() +slug: Web/API/Element/getAttributeNode +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/getAttributeNode +--- +
{{ APIRef("DOM") }}
+ +

指定された要素の指定された属性を、 Attr ノードとして返します。

+ +

構文

+ +
var attrNode = element.getAttributeNode(attrName);
+
+ + + +

Example

+ +
// 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、 previousSibling、nextSibling などは Attr ノードでは null になります。しかしながら、 ownerElement プロパティではこの属性が属している要素を取得することができます。

+ +

要素の属性の値を取得するためには、通常 getAttributeNode の代わりに getAttribute を使用してください。

+ +

{{ DOMAttributeMethods() }}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

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 ---- -

{{ ApiRef("DOM") }}

- -

概要

- -

getAttributeNS は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は null または ""(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。

- -

構文

- -
attrVal =element.getAttributeNS(namespace,name)
-
- -

引数

- - - -

例

- -
var div1 = document.getElementById("div1");
-var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
-                            "special-align");
-alert(a); // div の align 属性の値を表示します。
-
- -

注記

- -

getAttributeNS は getAttribute と異なります。getAttributeNS は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。

- -

DOM4 より前の仕様では、このメソッドは属性が存在しない場合に null ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは null を返していました。DOM4 以降は、仕様でも null を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら getAttributeNS を呼ぶ前に hasAttributeNS を使用して属性の存在を確かめる必要があります。

- -

{{ DOMAttributeMethods() }}

- -

仕様

- -

DOM Level 2 Core: getAttributeNS

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..ee03de1cab --- /dev/null +++ b/files/ja/web/api/element/getattributens/index.md @@ -0,0 +1,47 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - DOM + - Gecko + - 翻訳中 +translation_of: Web/API/Element/getAttributeNS +--- +

{{ ApiRef("DOM") }}

+ +

概要

+ +

getAttributeNS は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は null または ""(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。

+ +

構文

+ +
attrVal =element.getAttributeNS(namespace,name)
+
+ +

引数

+ + + +

例

+ +
var div1 = document.getElementById("div1");
+var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
+                            "special-align");
+alert(a); // div の align 属性の値を表示します。
+
+ +

注記

+ +

getAttributeNS は getAttribute と異なります。getAttributeNS は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。

+ +

DOM4 より前の仕様では、このメソッドは属性が存在しない場合に null ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは null を返していました。DOM4 以降は、仕様でも null を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら getAttributeNS を呼ぶ前に hasAttributeNS を使用して属性の存在を確かめる必要があります。

+ +

{{ DOMAttributeMethods() }}

+ +

仕様

+ +

DOM Level 2 Core: 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 ---- -
{{APIRef("DOM")}}
- -

Element.getBoundingClientRect() メソッドは、要素の寸法と、そのビューポートに対する位置を返します。

- -

構文

- -
domRect = element.getBoundingClientRect();
- -

値

- -

返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の left, top, right, bottom, x, y, width, height の各プロパティを持つ、要素全体を含む最小の矩形です。 width と height 以外のプロパティは、"ビューポートの左上を基準"としています。

- -

DOMRect 値の説明

- -

空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 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")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。

- -
// 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
-
- -

例

- -
// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
-var rect = obj.getBoundingClientRect();
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}初回定義
- -

メモ

- -

モダンブラウザーでは返された DOMRect オブジェクトを変更することが可能ですが、これは DOMRectReadOnly を返す古いバージョンには該当しません。IE と Edge では、返された ClientRect オブジェクトに対し、見過ごされたプロパティを追加することができず、x と y を補填することができません。

- -

互換性問題 (下記参照) のため、 left, top, right, bottom のみに頼ることが最も安全です。

- -

返された DOMRect オブジェクトのプロパティは、自身のプロパティではありません。in 演算子や for...in では返されたプロパティを見つけますが、他の Object.keys() のような API では失敗します。さらに予期しないことに、 Object.assign() のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。

- -
rect = elt.getBoundingClientRect()
-// emptyObj の結果は {}
-emptyObj = Object.assign({}, rect)
-emptyObj = { ...rect }
-{width, ...emptyObj} = rect
-
- -

DOMRect の top, left, right, bottom の各プロパティは他のプロパティ値から計算されます。

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..69c2b2500a --- /dev/null +++ b/files/ja/web/api/element/getboundingclientrect/index.md @@ -0,0 +1,112 @@ +--- +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 +--- +
{{APIRef("DOM")}}
+ +

Element.getBoundingClientRect() メソッドは、要素の寸法と、そのビューポートに対する位置を返します。

+ +

構文

+ +
domRect = element.getBoundingClientRect();
+ +

値

+ +

返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の left, top, right, bottom, x, y, width, height の各プロパティを持つ、要素全体を含む最小の矩形です。 width と height 以外のプロパティは、"ビューポートの左上を基準"としています。

+ +

DOMRect 値の説明

+ +

空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 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")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。

+ +
// 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
+
+ +

例

+ +
// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
+var rect = obj.getBoundingClientRect();
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}初回定義
+ +

メモ

+ +

モダンブラウザーでは返された DOMRect オブジェクトを変更することが可能ですが、これは DOMRectReadOnly を返す古いバージョンには該当しません。IE と Edge では、返された ClientRect オブジェクトに対し、見過ごされたプロパティを追加することができず、x と y を補填することができません。

+ +

互換性問題 (下記参照) のため、 left, top, right, bottom のみに頼ることが最も安全です。

+ +

返された DOMRect オブジェクトのプロパティは、自身のプロパティではありません。in 演算子や for...in では返されたプロパティを見つけますが、他の Object.keys() のような API では失敗します。さらに予期しないことに、 Object.assign() のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。

+ +
rect = elt.getBoundingClientRect()
+// emptyObj の結果は {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+
+ +

DOMRect の top, left, right, bottom の各プロパティは他のプロパティ値から計算されます。

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + 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 ---- -

{{APIRef("DOM")}}

- -

getClientRects() は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの CSS 境界ボックスの境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。

- -

多くの要素はそれぞれ1つの境界ボックスしか持ちませんが、複数行のインライン要素 (例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合) には行ごとに囲む境界ボックスがあります。

- -

構文

- -
let rectCollection = object.getClientRects();
- -

返値

- -

返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の left, top, right, bottom の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の <svg> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <svg> が確立したビューポートになります (明確にするために、矩形は外部の <svg> の viewBox 変形によっても変換されます)。

- -

本来、Microsoft はこのメソッドがテキストの各行に対して TextRectangle オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この二つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。

- -

{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で width と height の各プロパティが TextRectangle オブジェクトに追加されました。")}}

- -

矩形を計算する際には、ビューポート領域 (またはその他のスクロール可能な要素) のスクロール量が考慮されます。

- -

返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。

- -

HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 display:none の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。

- -

CSS ボックスで境界ボックスが空であっても矩形が返されます。 left, top, right, bottom の各座標はなお意味を持っています。

- - - -

小数のピクセルオフセットが可能です。

- -

例

- -

これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 withClientRectsOverlay クラスを介してマークアップに接続されていることに注意してください。

- -

HTML

- -

例 1: このHTMLは、 <span> 要素を含む3つの段落を生成し、それぞれを <div> ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの <span> 要素には、クライアントの矩形が描画されます。

- -
<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>
- -

例 2: このHTMLは3つの順序付きリストを生成します。2 番目のブロックの <ol> と 3 番目のブロックの各 <li> 要素に対してクライアントの矩形が描かれています。

- -
<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>
- -

例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの <table> で描画されます。

- -
<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> の各要素の周りに境界線を描画します。

- -
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要素について、クライアント矩形を描画します。

- -
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)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}{{Spec2("CSSOM View")}}初回定義
- -

補足

- -

getClientRects() は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..f8276ed1cb --- /dev/null +++ b/files/ja/web/api/element/getclientrects/index.md @@ -0,0 +1,231 @@ +--- +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 +--- +

{{APIRef("DOM")}}

+ +

getClientRects() は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの CSS 境界ボックスの境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。

+ +

多くの要素はそれぞれ1つの境界ボックスしか持ちませんが、複数行のインライン要素 (例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合) には行ごとに囲む境界ボックスがあります。

+ +

構文

+ +
let rectCollection = object.getClientRects();
+ +

返値

+ +

返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の left, top, right, bottom の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の <svg> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <svg> が確立したビューポートになります (明確にするために、矩形は外部の <svg> の viewBox 変形によっても変換されます)。

+ +

本来、Microsoft はこのメソッドがテキストの各行に対して TextRectangle オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この二つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。

+ +

{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で width と height の各プロパティが TextRectangle オブジェクトに追加されました。")}}

+ +

矩形を計算する際には、ビューポート領域 (またはその他のスクロール可能な要素) のスクロール量が考慮されます。

+ +

返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。

+ +

HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 display:none の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。

+ +

CSS ボックスで境界ボックスが空であっても矩形が返されます。 left, top, right, bottom の各座標はなお意味を持っています。

+ + + +

小数のピクセルオフセットが可能です。

+ +

例

+ +

これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 withClientRectsOverlay クラスを介してマークアップに接続されていることに注意してください。

+ +

HTML

+ +

例 1: このHTMLは、 <span> 要素を含む3つの段落を生成し、それぞれを <div> ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの <span> 要素には、クライアントの矩形が描画されます。

+ +
<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>
+ +

例 2: このHTMLは3つの順序付きリストを生成します。2 番目のブロックの <ol> と 3 番目のブロックの各 <li> 要素に対してクライアントの矩形が描かれています。

+ +
<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>
+ +

例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの <table> で描画されます。

+ +
<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> の各要素の周りに境界線を描画します。

+ +
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要素について、クライアント矩形を描画します。

+ +
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)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}{{Spec2("CSSOM View")}}初回定義
+ +

補足

+ +

getClientRects() は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + 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 ---- -
{{APIRef("DOM")}}
- -

{{domxref("Element")}} の getElementsByClassName() メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 

- -

{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。

- -

構文

- -
var elements = element.getElementsByClassName(names);
- -

引数

- -
-
names
-
マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。
-
- -

戻り値

- -

names で指定したすべてのクラスを持つすべての要素のリストである live な {{ domxref("HTMLCollection") }} です。

- -

使用上の注意

- -

この関数が返すコレクションは常に live です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で names にマッチする新しい要素が追加されたり、サブツリー上にある names にマッチしなかった要素が names にマッチするよう変更された場合、すぐにこのコレクションに追加されます。

- -

逆もしかりです。names にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。

- -
-

クラス名は後方互換モードでは大文字・小文字を区別されず、それ以外では区別されます。

-
- -

例

- -

単一のクラスとマッチさせる

- -

単一の指定されたクラスを含む要素を探すには、 getElementsByClassName() を呼び出す際にそのクラス名を指定するだけです。

- -
element.getElementsByClassName('test');
- -

この例は main の id を持つ要素の子孫の中で、test クラスをもつ全要素を見つけます。

- -
document.getElementById('main').getElementsByClassName('test');
- -

複数のクラスとマッチさせる

- -

red と test 両方のクラスを含んだ要素を見つけます。

- -
element.getElementsByClassName('red test');
- -

結果を調査する

- -

標準の配列構文や、HTMLCollection の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、次の例はうまく動作しないでしょう。colorbox クラスを外した際に、matches がすぐに変更されてしまうからです。

- -
var matches = element.getElementsByClassName('colorbox');
-
-for (var i=0; i<matches.length; i++) {
-  matches[i].classList.remove('colorbox');
-  matches.item(i).classList.add('hueframe');
-}
-
- -

別の手段を使いましょう。例えば、

- -
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")}} 要素を見つけられます。

- -
var testElements = document.getElementsByClassName('test');
-var testDivs = Array.prototype.filter.call(testElements, function(testElement){
-    return testElement.nodeName === 'DIV';
-});
- -

仕様

- - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}初期定義
- -

ブラウザーの互換性

- -

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

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..c20756a14b --- /dev/null +++ b/files/ja/web/api/element/getelementsbyclassname/index.md @@ -0,0 +1,113 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +tags: + - API + - Classes + - Element + - Method + - Reference + - getElementsByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} の getElementsByClassName() メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 

+ +

{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。

+ +

構文

+ +
var elements = element.getElementsByClassName(names);
+ +

引数

+ +
+
names
+
マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。
+
+ +

戻り値

+ +

names で指定したすべてのクラスを持つすべての要素のリストである live な {{ domxref("HTMLCollection") }} です。

+ +

使用上の注意

+ +

この関数が返すコレクションは常に live です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で names にマッチする新しい要素が追加されたり、サブツリー上にある names にマッチしなかった要素が names にマッチするよう変更された場合、すぐにこのコレクションに追加されます。

+ +

逆もしかりです。names にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。

+ +
+

クラス名は後方互換モードでは大文字・小文字を区別されず、それ以外では区別されます。

+
+ +

例

+ +

単一のクラスとマッチさせる

+ +

単一の指定されたクラスを含む要素を探すには、 getElementsByClassName() を呼び出す際にそのクラス名を指定するだけです。

+ +
element.getElementsByClassName('test');
+ +

この例は main の id を持つ要素の子孫の中で、test クラスをもつ全要素を見つけます。

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

複数のクラスとマッチさせる

+ +

red と test 両方のクラスを含んだ要素を見つけます。

+ +
element.getElementsByClassName('red test');
+ +

結果を調査する

+ +

標準の配列構文や、HTMLCollection の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、次の例はうまく動作しないでしょう。colorbox クラスを外した際に、matches がすぐに変更されてしまうからです。

+ +
var matches = element.getElementsByClassName('colorbox');
+
+for (var i=0; i<matches.length; i++) {
+  matches[i].classList.remove('colorbox');
+  matches.item(i).classList.add('hueframe');
+}
+
+ +

別の手段を使いましょう。例えば、

+ +
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")}} 要素を見つけられます。

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}初期定義
+ +

ブラウザーの互換性

+ +

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

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 ---- -

{{ ApiRef() }}

- -

概要

- -

指定された タグ名 による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。

- -

構文

- -
elements = element.getElementsByTagName(tagName)
-
- - - -
-

Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。

- -

複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。

-
- -

例

- -
// テーブル内のセルの数だけ反復処理します
-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") {
-        // データを取得します
-    }
-}
-
- -

注意点

- -

element.getElementsByTagName は、検索対象が指定された要素の子孫要素に限られるという点を除けば、document.getElementsByTagName と似ています。

- -

仕様書

- -

DOM Level 2 Core: Element.getElementsByTagName

- -
 
- -

{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}

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..248bf36639 --- /dev/null +++ b/files/ja/web/api/element/getelementsbytagname/index.md @@ -0,0 +1,55 @@ +--- +title: element.getElementsByTagName +slug: Web/API/Element/getElementsByTagName +tags: + - DOM + - Gecko +translation_of: Web/API/Element/getElementsByTagName +--- +

{{ ApiRef() }}

+ +

概要

+ +

指定された タグ名 による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。

+ +

構文

+ +
elements = element.getElementsByTagName(tagName)
+
+ + + +
+

Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。

+ +

複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。

+
+ +

例

+ +
// テーブル内のセルの数だけ反復処理します
+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") {
+        // データを取得します
+    }
+}
+
+ +

注意点

+ +

element.getElementsByTagName は、検索対象が指定された要素の子孫要素に限られるという点を除けば、document.getElementsByTagName と似ています。

+ +

仕様書

+ +

DOM Level 2 Core: Element.getElementsByTagName

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}

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 ---- -

{{ ApiRef() }}

- -

概要

- -

与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。

- -

構文

- -
elements = element.getElementsByTagNameNS(namespaceURI,localName)
-
- - - -

例

- -
// 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") {
-        // データを取得
-    }
-}
-
- -

注意

- -

element.getElementsByTagNameNS は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。

- -

仕様

- -

DOM Level 2 Core: Element.getElementsByTagNameNS

- -
 
- -

{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}

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..f0344fd357 --- /dev/null +++ b/files/ja/web/api/element/getelementsbytagnamens/index.md @@ -0,0 +1,50 @@ +--- +title: element.getElementsByTagNameNS +slug: Web/API/Element/getElementsByTagNameNS +tags: + - DOM + - Gecko +translation_of: Web/API/Element/getElementsByTagNameNS +--- +

{{ ApiRef() }}

+ +

概要

+ +

与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。

+ +

構文

+ +
elements = element.getElementsByTagNameNS(namespaceURI,localName)
+
+ + + +

例

+ +
// 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") {
+        // データを取得
+    }
+}
+
+ +

注意

+ +

element.getElementsByTagNameNS は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。

+ +

仕様

+ +

DOM Level 2 Core: Element.getElementsByTagNameNS

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}

-- cgit v1.2.3-54-g00ecf