From fcaf278de3a2d71b1a94cabdaa934b895b3916bf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 28 Feb 2022 23:16:41 +0900 Subject: Element 以下のプロパティの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/attributes/index.html | 118 ------------ files/ja/web/api/element/attributes/index.md | 118 ++++++++++++ .../web/api/element/childelementcount/index.html | 42 ---- .../ja/web/api/element/childelementcount/index.md | 42 ++++ files/ja/web/api/element/children/index.html | 58 ------ files/ja/web/api/element/children/index.md | 58 ++++++ files/ja/web/api/element/classname/index.html | 35 ---- files/ja/web/api/element/classname/index.md | 35 ++++ files/ja/web/api/element/clientheight/index.html | 67 ------- files/ja/web/api/element/clientheight/index.md | 67 +++++++ files/ja/web/api/element/clientleft/index.html | 86 --------- files/ja/web/api/element/clientleft/index.md | 86 +++++++++ files/ja/web/api/element/clienttop/index.html | 37 ---- files/ja/web/api/element/clienttop/index.md | 37 ++++ files/ja/web/api/element/clientwidth/index.html | 65 ------- files/ja/web/api/element/clientwidth/index.md | 65 +++++++ files/ja/web/api/element/id/index.html | 57 ------ files/ja/web/api/element/id/index.md | 57 ++++++ files/ja/web/api/element/innerhtml/index.html | 213 --------------------- files/ja/web/api/element/innerhtml/index.md | 213 +++++++++++++++++++++ files/ja/web/api/element/localname/index.html | 87 --------- files/ja/web/api/element/localname/index.md | 87 +++++++++ files/ja/web/api/element/namespaceuri/index.html | 35 ---- files/ja/web/api/element/namespaceuri/index.md | 35 ++++ files/ja/web/api/element/outerhtml/index.html | 118 ------------ files/ja/web/api/element/outerhtml/index.md | 118 ++++++++++++ files/ja/web/api/element/prefix/index.html | 48 ----- files/ja/web/api/element/prefix/index.md | 48 +++++ files/ja/web/api/element/scrollheight/index.html | 173 ----------------- files/ja/web/api/element/scrollheight/index.md | 173 +++++++++++++++++ files/ja/web/api/element/scrollleft/index.html | 111 ----------- files/ja/web/api/element/scrollleft/index.md | 111 +++++++++++ files/ja/web/api/element/scrolltop/index.html | 92 --------- files/ja/web/api/element/scrolltop/index.md | 92 +++++++++ files/ja/web/api/element/scrollwidth/index.html | 125 ------------ files/ja/web/api/element/scrollwidth/index.md | 125 ++++++++++++ files/ja/web/api/element/tagname/index.html | 36 ---- files/ja/web/api/element/tagname/index.md | 36 ++++ 38 files changed, 1603 insertions(+), 1603 deletions(-) delete mode 100644 files/ja/web/api/element/attributes/index.html create mode 100644 files/ja/web/api/element/attributes/index.md delete mode 100644 files/ja/web/api/element/childelementcount/index.html create mode 100644 files/ja/web/api/element/childelementcount/index.md delete mode 100644 files/ja/web/api/element/children/index.html create mode 100644 files/ja/web/api/element/children/index.md delete mode 100644 files/ja/web/api/element/classname/index.html create mode 100644 files/ja/web/api/element/classname/index.md delete mode 100644 files/ja/web/api/element/clientheight/index.html create mode 100644 files/ja/web/api/element/clientheight/index.md delete mode 100644 files/ja/web/api/element/clientleft/index.html create mode 100644 files/ja/web/api/element/clientleft/index.md delete mode 100644 files/ja/web/api/element/clienttop/index.html create mode 100644 files/ja/web/api/element/clienttop/index.md delete mode 100644 files/ja/web/api/element/clientwidth/index.html create mode 100644 files/ja/web/api/element/clientwidth/index.md delete mode 100644 files/ja/web/api/element/id/index.html create mode 100644 files/ja/web/api/element/id/index.md delete mode 100644 files/ja/web/api/element/innerhtml/index.html create mode 100644 files/ja/web/api/element/innerhtml/index.md delete mode 100644 files/ja/web/api/element/localname/index.html create mode 100644 files/ja/web/api/element/localname/index.md delete mode 100644 files/ja/web/api/element/namespaceuri/index.html create mode 100644 files/ja/web/api/element/namespaceuri/index.md delete mode 100644 files/ja/web/api/element/outerhtml/index.html create mode 100644 files/ja/web/api/element/outerhtml/index.md delete mode 100644 files/ja/web/api/element/prefix/index.html create mode 100644 files/ja/web/api/element/prefix/index.md delete mode 100644 files/ja/web/api/element/scrollheight/index.html create mode 100644 files/ja/web/api/element/scrollheight/index.md delete mode 100644 files/ja/web/api/element/scrollleft/index.html create mode 100644 files/ja/web/api/element/scrollleft/index.md delete mode 100644 files/ja/web/api/element/scrolltop/index.html create mode 100644 files/ja/web/api/element/scrolltop/index.md delete mode 100644 files/ja/web/api/element/scrollwidth/index.html create mode 100644 files/ja/web/api/element/scrollwidth/index.md delete mode 100644 files/ja/web/api/element/tagname/index.html create mode 100644 files/ja/web/api/element/tagname/index.md (limited to 'files/ja') 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 ---- -

{{ APIRef("DOM") }}

- -

Element.attributes プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 Array ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 attributes はその属性に関するあらゆる情報を表す文字列のキーと値の組です。

- -

構文

- -
var attr = element.attributes;
-
- -

例

- -

基本的な例

- -
// ドキュメント内の最初の <p> 要素を取得する
-var para = document.getElementsByTagName("p")[0];
-var atts = para.attributes;
- -

要素の属性を列挙する

- -

ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。
- 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。

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

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}{{SpecName('DOM2 Core')}} から変更無し
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}{{SpecName('DOM1')}}から変更無し
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - 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..f3653263ef --- /dev/null +++ b/files/ja/web/api/element/attributes/index.md @@ -0,0 +1,118 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - Attributes + - DOM + - Element + - Property + - プロパティ + - リファレンス + - 属性 +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

Element.attributes プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 Array ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 attributes はその属性に関するあらゆる情報を表す文字列のキーと値の組です。

+ +

構文

+ +
var attr = element.attributes;
+
+ +

例

+ +

基本的な例

+ +
// ドキュメント内の最初の <p> 要素を取得する
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

要素の属性を列挙する

+ +

ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。
+ 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。

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

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}{{SpecName('DOM2 Core')}} から変更無し
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}{{SpecName('DOM1')}}から変更無し
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

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

Element.childElementCount は読み取り専用のプロパティで、この要素の子要素の数を返します。

- -

構文

- -
element.childElementCount;
- -

例

- -
let sidebar = document.getElementById('sidebar');
-if (sidebar.childElementCount > 0) {
-  // 何もしない
-}
-
- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

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

Element.childElementCount は読み取り専用のプロパティで、この要素の子要素の数を返します。

+ +

構文

+ +
element.childElementCount;
+ +

例

+ +
let sidebar = document.getElementById('sidebar');
+if (sidebar.childElementCount > 0) {
+  // 何もしない
+}
+
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

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

children は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。

- -

Element.children は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。

- -

構文

- -
-// Getter
-collection = myElement.children;
-
-// No setter; read-only property
-
- -

返値

- -

生きた {{ domxref("HTMLCollection") }} で、 node の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。

- -

ノードが子要素を持たない場合、 children は要素を含まず、length は 0 です。

- -

例 

- -
const myElement = document.getElementById('foo');
-for (let i = 0; i < myElement.children.length; i++) {
-  console.log(myElement.children[i].tagName);
-}
-
- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

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

children は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。

+ +

Element.children は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。

+ +

構文

+ +
+// Getter
+collection = myElement.children;
+
+// No setter; read-only property
+
+ +

返値

+ +

生きた {{ domxref("HTMLCollection") }} で、 node の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。

+ +

ノードが子要素を持たない場合、 children は要素を含まず、length は 0 です。

+ +

例 

+ +
const myElement = document.getElementById('foo');
+for (let i = 0; i < myElement.children.length; i++) {
+  console.log(myElement.children[i].tagName);
+}
+
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

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

概要

-

className は要素の class 属性の値の取得 / 設定に用います。

-

構文

-
cName = elementNodeReference.className;
-elementNodeReference.className = cName;
- -

例

-
var elm = document.getElementById("div1"); //対象要素を取得
-
-if (elm.className == "fixed") {
-  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
-}
-

注記

-

"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために className という名称となっています。

-

仕様書

- -

関連情報

- 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..00f15100e7 --- /dev/null +++ b/files/ja/web/api/element/classname/index.md @@ -0,0 +1,35 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Element/className +--- +
+ {{ApiRef}}
+

概要

+

className は要素の class 属性の値の取得 / 設定に用います。

+

構文

+
cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ +

例

+
var elm = document.getElementById("div1"); //対象要素を取得
+
+if (elm.className == "fixed") {
+  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
+}
+

注記

+

"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために className という名称となっています。

+

仕様書

+ +

関連情報

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

Element.clientHeight は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。

- -

clientHeight は CSS height + CSS padding - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。

- -

clientHeight がルート要素 (<html> 要素) (または文書が後方互換モードである場合は <body>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。これは clientHeight の特例です。

- -
-

注: このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

-
- -

構文

- -
var intElemClientHeight = element.clientHeight;
- -

intElemClientHeight は element の clientHeight をピクセル単位で表す整数値です。 clientHeight プロパティは読み取り専用です。

- -

例

- -

Image:Dimensions-client.png

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}{{Spec2("CSSOM View")}}
- -

注

- -

clientHeight は Internet Explorer オブジェクトモデルで導入されたプロパティです。

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..4cde36518d --- /dev/null +++ b/files/ja/web/api/element/clientheight/index.md @@ -0,0 +1,67 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - API + - CSSOM View + - NeedsMarkupWork + - Property + - Reference +translation_of: Web/API/Element/clientHeight +--- +
{{APIRef("DOM")}}
+ +

Element.clientHeight は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。

+ +

clientHeight は CSS height + CSS padding - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。

+ +

clientHeight がルート要素 (<html> 要素) (または文書が後方互換モードである場合は <body>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。これは clientHeight の特例です。

+ +
+

注: このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

+
+ +

構文

+ +
var intElemClientHeight = element.clientHeight;
+ +

intElemClientHeight は element の clientHeight をピクセル単位で表す整数値です。 clientHeight プロパティは読み取り専用です。

+ +

例

+ +

Image:Dimensions-client.png

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}{{Spec2("CSSOM View")}}
+ +

注

+ +

clientHeight は Internet Explorer オブジェクトモデルで導入されたプロパティです。

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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

要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 clientLeft は、左マージンまたは左パディングを含みません。 clientLeft は読み取り専用です。

- -

layout.scrollbar.side 設定項目が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、垂直スクロールバーは左側に配置され、これが clientLeft の計算方法に影響します。

- -
-

注: このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。 -

-
- -

- -
-

注: 要素に - display: inline が設定されている場合、境界の幅に関わらず clientLeft は 0 を返します。

-
- -

構文

- -
var left = element.clientLeft;
-
- -

例

- -
-
-

- padding-top

- -

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

- -

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.

- -

- padding-bottom

-
- Left - Top - Right - Bottom - margin-top margin-bottom border-top border-bottom -
- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

注

- -

clientLeft は MS IE DHTML オブジェクトモデルで最初に導入されました。

- -

要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 layout.scrollbar.side の設定に依存します

- -

Gecko ベースのアプリケーションは、 clientLeft を Gecko 1.9 (Firefox 3、 {{ - Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。

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

要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 clientLeft は、左マージンまたは左パディングを含みません。 clientLeft は読み取り専用です。

+ +

layout.scrollbar.side 設定項目が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、垂直スクロールバーは左側に配置され、これが clientLeft の計算方法に影響します。

+ +
+

注: このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。 +

+
+ +

+ +
+

注: 要素に + display: inline が設定されている場合、境界の幅に関わらず clientLeft は 0 を返します。

+
+ +

構文

+ +
var left = element.clientLeft;
+
+ +

例

+ +
+
+

+ padding-top

+ +

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

+ +

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.

+ +

+ padding-bottom

+
+ Left + Top + Right + Bottom + margin-top margin-bottom border-top border-bottom +
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

注

+ +

clientLeft は MS IE DHTML オブジェクトモデルで最初に導入されました。

+ +

要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 layout.scrollbar.side の設定に依存します

+ +

Gecko ベースのアプリケーションは、 clientLeft を Gecko 1.9 (Firefox 3、 {{ + Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。

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

概要

-

要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。clientTop は読込専用です。

-

Gecko ベースアプリケーションは、 Gecko 1.9 (Firefox 3、{{Bug("111207")}} で実装) から clientTop をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。

-

構文

-
top = element.clientTop;
-
-

例

-
-
-

padding-top

-

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.

-

All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

-

Cat image and text coming from www.best-cat-art.com

-

padding-bottom

-
- LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{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')}}
-

-

仕様

-

W3C の仕様の一部ではありません。

-

注記

-

clientTop は MS IE DHTML オブジェクトモデルで最初に導入されました。

-

リファレンス

- 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..95ae5ad2b3 --- /dev/null +++ b/files/ja/web/api/element/clienttop/index.md @@ -0,0 +1,37 @@ +--- +title: element.clientTop +slug: Web/API/Element/clientTop +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Element/clientTop +--- +
+ {{ApiRef}}
+

概要

+

要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。clientTop は読込専用です。

+

Gecko ベースアプリケーションは、 Gecko 1.9 (Firefox 3、{{Bug("111207")}} で実装) から clientTop をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。

+

構文

+
top = element.clientTop;
+
+

例

+
+
+

padding-top

+

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.

+

All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from www.best-cat-art.com

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{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')}}
+

+

仕様

+

W3C の仕様の一部ではありません。

+

注記

+

clientTop は MS IE DHTML オブジェクトモデルで最初に導入されました。

+

リファレンス

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

Element.clientWidth プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。

- -

clientWidth がルート要素 (<html> 要素) (または文書が後方互換モードである場合は <body>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。これは clientWidth の特例です。

- -
-

メモ: このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

-
- -

構文

- -
var intElemClientWidth = element.clientWidth;
- -

intElemClientWidth は element の clientWidth をピクセル数で表す整数値です。 clientWidth プロパティは読み取り専用です。

- -

例

- -

Image:Dimensions-client.png

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}}
- -

メモ

- -

clientWidth は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..47753e0077 --- /dev/null +++ b/files/ja/web/api/element/clientwidth/index.md @@ -0,0 +1,65 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - API + - CSSOM View + - Property + - Reference + - プロパティ +translation_of: Web/API/Element/clientWidth +--- +
{{APIRef("DOM")}}
+ +

Element.clientWidth プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。

+ +

clientWidth がルート要素 (<html> 要素) (または文書が後方互換モードである場合は <body>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。これは clientWidth の特例です。

+ +
+

メモ: このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

+
+ +

構文

+ +
var intElemClientWidth = element.clientWidth;
+ +

intElemClientWidth は element の clientWidth をピクセル数で表す整数値です。 clientWidth プロパティは読み取り専用です。

+ +

例

+ +

Image:Dimensions-client.png

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}}
+ +

メモ

+ +

clientWidth は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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

概要

- -

要素の 識別子 (identifier) を取得 / 設定します。

- -

構文

- -
idStr =element.id; // 取得
-element.id = idStr; // 設定
-
- -

注意

- -

ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 id の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。

- -

document によっては(特に HTML 、 XUL 、SVG)、要素の id は次のような要素の属性として指定することができます: <div id="part_3">.

- -

但しカスタム XML 文書に於いては、id 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『getElementById Pitfalls (getElementById の落とし穴)』をご覧下さい。

- -

id 属性は、スタイルシートでスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した id 属性値の先頭に # を付けます。

- -
#thisID {
-  background: darkblue;
-  color; ghostwhite;
-}
- -

id 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "thisID" と "ThisID" は別の id として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : class 属性 / id 属性 / name 属性はケースセンシティブである)

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}} 
- -

 

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..46cf1c1a9e --- /dev/null +++ b/files/ja/web/api/element/id/index.md @@ -0,0 +1,57 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - DOM + - Gecko +translation_of: Web/API/Element/id +--- +
{{ApiRef}}
+ +

概要

+ +

要素の 識別子 (identifier) を取得 / 設定します。

+ +

構文

+ +
idStr =element.id; // 取得
+element.id = idStr; // 設定
+
+ +

注意

+ +

ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 id の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。

+ +

document によっては(特に HTML 、 XUL 、SVG)、要素の id は次のような要素の属性として指定することができます: <div id="part_3">.

+ +

但しカスタム XML 文書に於いては、id 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『getElementById Pitfalls (getElementById の落とし穴)』をご覧下さい。

+ +

id 属性は、スタイルシートでスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した id 属性値の先頭に # を付けます。

+ +
#thisID {
+  background: darkblue;
+  color; ghostwhite;
+}
+ +

id 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "thisID" と "ThisID" は別の id として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : class 属性 / id 属性 / name 属性はケースセンシティブである)

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}} 
+ +

 

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

{{domxref("Element")}} オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

- -
メモ: {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが (&), (<), (>) の文字を含むテキストの子ノードを持っている場合、 innerHTML はこれらの文字を HTML エンティティの "&amp;", "&lt;", "&gt;" としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。
- -

要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。

- -

構文

- -
const content = element.innerHTML;
-
-element.innerHTML = htmlString;
-
- -

値

- -

要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 innerHTML に値を設定すると、要素のすべての子孫を削除して、 htmlString の文字列で与えられた HTML を解析して構築されたノードに置き換えます。

- -

例外

- -
-
SyntaxError
-
正しくない形の HTML の文字列を使用して innerHTML の値を設定しようとした場合。
-
NoModificationAllowedError
-
親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。
-
- -

使用上のメモ

- -

innerHTML プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。

- -

要素の HTML コンテンツの読み取り

- -

innerHTML を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。

- -
let contents = myElement.innerHTML;
- -

これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。

- -
-

メモ: 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。

-
- -

要素の中身の置き換え

- -

innerHTML の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。

- -

例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。

- -
document.body.innerHTML = "";
- -

この例は文書の現在の HTML マークアップを走査し、 "<" の文字を HTML エンティティの "&lt;" に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 innerHTML の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。

- -
document.documentElement.innerHTML = "<pre>" +
-         document.documentElement.innerHTML.replace(/</g,"&lt;") +
-            "</pre>";
- -

操作の詳細

- -

innerHTML に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。

- -
    -
  1. 指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。
    2. -
  2. 中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 <template> 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ1で生成された新しい DocumentFragment で置き換えます。
    3. -
  3. その他の要素はすべて、要素の内容を新しい DocumentFragment のノードで置き換えます。
    4. -
- -

セキュリティの考慮事項

- -

ウェブページにテキストを挿入するために innerHTML を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。

- -
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")}} タグは実行するべきではないと定義しているからです。

- -

しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために innerHTML を使用するたびに、セキュリティリスクは残ります。

- -
const name = "<img src='x' onerror='alert(1)'>";
-el.innerHTML = name; // アラートが表示される
- -

このため、プレーンテキストを挿入するときには innerHTML を使用せず、代わりに {{domxref("Node.textContent")}} を使用することをお勧めします。これは渡されたコンテンツを HTML として解釈するのではなく、生テキストとして挿入します。

- -
-

警告: プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 innerHTML は多くの場合、コードが拒絶される結果になります。例えば、ブラウザー拡張機能の中で innerHTML を使用した場合、拡張機能を addons.mozilla.org に提出すると、自動レビュープロセスを通過できないでしょう。

-
- -

例

- -

この例は innerHTML を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。

- -

JavaScript

- -
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")}} ベースのイベント ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。

- -
function logEvent(event) {
-  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
-            event.clientX + ", " + event.clientY + "</em>";
-  log(msg);
-}
- -

それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。

- -
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 はとても単純です。

- -
<div class="box">
-  <div><strong>Log:</strong></div>
-  <div class="log"></div>
-</div>
- -

"box" クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが "log" である <div> は、ログテキスト自身のコンテナーです。

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

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

{{domxref("Element")}} オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

+ +
メモ: {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが (&), (<), (>) の文字を含むテキストの子ノードを持っている場合、 innerHTML はこれらの文字を HTML エンティティの "&amp;", "&lt;", "&gt;" としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。
+ +

要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。

+ +

構文

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

値

+ +

要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 innerHTML に値を設定すると、要素のすべての子孫を削除して、 htmlString の文字列で与えられた HTML を解析して構築されたノードに置き換えます。

+ +

例外

+ +
+
SyntaxError
+
正しくない形の HTML の文字列を使用して innerHTML の値を設定しようとした場合。
+
NoModificationAllowedError
+
親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。
+
+ +

使用上のメモ

+ +

innerHTML プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。

+ +

要素の HTML コンテンツの読み取り

+ +

innerHTML を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。

+ +
let contents = myElement.innerHTML;
+ +

これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。

+ +
+

メモ: 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。

+
+ +

要素の中身の置き換え

+ +

innerHTML の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。

+ +

例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。

+ +
document.body.innerHTML = "";
+ +

この例は文書の現在の HTML マークアップを走査し、 "<" の文字を HTML エンティティの "&lt;" に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 innerHTML の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

操作の詳細

+ +

innerHTML に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。

+ +
    +
  1. 指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。
    2. +
  2. 中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 <template> 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ1で生成された新しい DocumentFragment で置き換えます。
    3. +
  3. その他の要素はすべて、要素の内容を新しい DocumentFragment のノードで置き換えます。
    4. +
+ +

セキュリティの考慮事項

+ +

ウェブページにテキストを挿入するために innerHTML を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。

+ +
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")}} タグは実行するべきではないと定義しているからです。

+ +

しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために innerHTML を使用するたびに、セキュリティリスクは残ります。

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // アラートが表示される
+ +

このため、プレーンテキストを挿入するときには innerHTML を使用せず、代わりに {{domxref("Node.textContent")}} を使用することをお勧めします。これは渡されたコンテンツを HTML として解釈するのではなく、生テキストとして挿入します。

+ +
+

警告: プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 innerHTML は多くの場合、コードが拒絶される結果になります。例えば、ブラウザー拡張機能の中で innerHTML を使用した場合、拡張機能を addons.mozilla.org に提出すると、自動レビュープロセスを通過できないでしょう。

+
+ +

例

+ +

この例は innerHTML を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。

+ +

JavaScript

+ +
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")}} ベースのイベント ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。

+ +
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 はとても単純です。

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

"box" クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが "log" である <div> は、ログテキスト自身のコンテナーです。

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

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

Element.localName は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。

- -

構文

- -
name = element.localName
-
- -

返値

- -

要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。 -

- -

例

- -

(text/xml や application/xhtml+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 は接頭辞です。

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

注: {{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}}

- -

関連情報

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

Element.localName は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。

+ +

構文

+ +
name = element.localName
+
+ +

返値

+ +

要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。 +

+ +

例

+ +

(text/xml や application/xhtml+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 は接頭辞です。

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

注: {{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}}

+ +

関連情報

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

{{ ApiRef() }}

-

概要

-

ノードの名前空間 URI か、もし指定されていなければ null(読み込み専用)。

-

構文

-
namespace =node.namespaceURI
-
- -

例

-

この断片では、ノードの localName と namespaceURI が試験されます。もし、namespaceURI が XUL の名前空間を返し、localName が "browser" を返せば、そのノードは XUL の <browser/> と理解されます。

-
if (node.localName == "browser" &&
-    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
-  // これは XUL browser です。
-}
-
-

注記

-

これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。

-

ELEMENT_NODE と ATTRIBUTE_NODE 以外の種類全てに属すノードと, document.createElement のような DOM Level 1 のメソッドで作られたノードでは、常に namespaceURI は null です。

-

DOM Level 2 の document.createElementNS メソッドを使うことで、特定の namespaceURI を持った要素を作ることができます。

-

Namespaces in XML によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。

-

仕様

-

DOM Level 2 Core: namespaceURI

-

DOM Level 2 Core: XML Namespaces

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

{{ ApiRef() }}

+

概要

+

ノードの名前空間 URI か、もし指定されていなければ null(読み込み専用)。

+

構文

+
namespace =node.namespaceURI
+
+ +

例

+

この断片では、ノードの localName と namespaceURI が試験されます。もし、namespaceURI が XUL の名前空間を返し、localName が "browser" を返せば、そのノードは XUL の <browser/> と理解されます。

+
if (node.localName == "browser" &&
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // これは XUL browser です。
+}
+
+

注記

+

これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。

+

ELEMENT_NODE と ATTRIBUTE_NODE 以外の種類全てに属すノードと, document.createElement のような DOM Level 1 のメソッドで作られたノードでは、常に namespaceURI は null です。

+

DOM Level 2 の document.createElementNS メソッドを使うことで、特定の namespaceURI を持った要素を作ることができます。

+

Namespaces in XML によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。

+

仕様

+

DOM Level 2 Core: namespaceURI

+

DOM Level 2 Core: XML Namespaces

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

outerHTML は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。

- -

要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。

- -

構文

- -
var content = element.outerHTML;
-
-element.outerHTML = htmlString;
-
- -

値

- -

outerHTML の値を読み取ると、 element およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 outerHTML の値を設定すると、その要素とそのすべての子孫を、指定された htmlString を解釈して構築された新しい DOM ツリーで置き換えます。

- -

例外

- -
-
SyntaxError
-
outerHTML に正しくない HTML の文字列を使用して設定しようとした場合。
-
NoModificationAllowedError
-
outerHTML を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。
-
- -

例

- -

要素の outerHTML プロパティの値を得る例を示します。

- -
// 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>'
-// が、コンソールウィンドウに出力されます。
-
- -

次の例では、 outerHTML プロパティに値を設定し、ノードを置換します。

- -
// 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 要素はもはや文書ツリーの一部ではなく、
-// 新たな段落に置き換えられました。
-
- -

メモ

- -

要素が親要素を持たない場合、その outerHTML プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。

- -
var div = document.createElement("div");
-div.outerHTML = "<div class=\"test\">test</div>";
-console.log(div.outerHTML); // output: "<div></div>"
- -

また、文書の中で要素が置換された場合も、 outerHTML プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。

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

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
- -

ブラウザーの対応

- -

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

- -

関連情報

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

outerHTML は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。

+ +

要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。

+ +

構文

+ +
var content = element.outerHTML;
+
+element.outerHTML = htmlString;
+
+ +

値

+ +

outerHTML の値を読み取ると、 element およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 outerHTML の値を設定すると、その要素とそのすべての子孫を、指定された htmlString を解釈して構築された新しい DOM ツリーで置き換えます。

+ +

例外

+ +
+
SyntaxError
+
outerHTML に正しくない HTML の文字列を使用して設定しようとした場合。
+
NoModificationAllowedError
+
outerHTML を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。
+
+ +

例

+ +

要素の outerHTML プロパティの値を得る例を示します。

+ +
// 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>'
+// が、コンソールウィンドウに出力されます。
+
+ +

次の例では、 outerHTML プロパティに値を設定し、ノードを置換します。

+ +
// 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 要素はもはや文書ツリーの一部ではなく、
+// 新たな段落に置き換えられました。
+
+ +

メモ

+ +

要素が親要素を持たない場合、その outerHTML プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。

+ +
var div = document.createElement("div");
+div.outerHTML = "<div class=\"test\">test</div>";
+console.log(div.outerHTML); // output: "<div></div>"
+ +

また、文書の中で要素が置換された場合も、 outerHTML プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。

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

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

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

Element.prefix は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は null を返します。

- -

構文

- -
string = element.prefix
-
- -

例

- -

次の例はコンソールに "x" を記録します。

- -
<x:div onclick="console.log(this.prefix)"/>
-
- -

注

- -

これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - 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..b2baf67888 --- /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 +- Property +- Reference +browser-compat: api.Element.prefix +translation_of: Web/API/Element/prefix +--- +
{{APIRef("DOM")}}
+ +

Element.prefix は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は null を返します。

+ +

構文

+ +
string = element.prefix
+
+ +

例

+ +

次の例はコンソールに "x" を記録します。

+ +
<x:div onclick="console.log(this.prefix)"/>
+
+ +

注

+ +

これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

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

Element.scrollHeight は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。

- -

scrollHeight の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その scrollHeight は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。

- -
-

このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。

-
- -

構文

- -
elemScrollHeight = element.scrollHeight;
- -

値

- -

整数値で、要素の scrollHeight ピクセル値に対応します。

- -

例

- -
-
-

padding-top

- -

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.

- -

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.

- -

padding-bottom

-
-Left Top Right Bottom margin-top margin-bottom border-top border-bottom
- -

Image:scrollHeight.png

- -

問題と解決方法

- -

要素が完全にスクロールされたかどうかを判定する

- -

次の等式は、要素がスクロールの終点にあると true になり、それ以外は false になります。

- -
element.scrollHeight - element.scrollTop === element.clientHeight
-
- -

コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。

- -
window.getComputedStyle(element).overflowY === 'visible'
-window.getComputedStyle(element).overflowY !== 'hidden'
-
- -

scrollHeight のデモ

- -

{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：

- -

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

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

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

{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..a2146b9db5 --- /dev/null +++ b/files/ja/web/api/element/scrollheight/index.md @@ -0,0 +1,173 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +tags: + - API + - CSSOM View + - NeedsDHTMLRemovalInExample + - Property + - Reference +translation_of: Web/API/Element/scrollHeight +--- +
{{APIRef("DOM")}}
+ +

Element.scrollHeight は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。

+ +

scrollHeight の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その scrollHeight は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。

+ +
+

このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。

+
+ +

構文

+ +
elemScrollHeight = element.scrollHeight;
+ +

値

+ +

整数値で、要素の scrollHeight ピクセル値に対応します。

+ +

例

+ +
+
+

padding-top

+ +

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.

+ +

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.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollHeight.png

+ +

問題と解決方法

+ +

要素が完全にスクロールされたかどうかを判定する

+ +

次の等式は、要素がスクロールの終点にあると true になり、それ以外は false になります。

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+
+ +

コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。

+ +
window.getComputedStyle(element).overflowY === 'visible'
+window.getComputedStyle(element).overflowY !== 'hidden'
+
+ +

scrollHeight のデモ

+ +

{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：

+ +

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

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

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

{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

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

Element.scrollLeft プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。

- -

要素の {{cssxref("direction")}} が rtl (right-to-left、右書き) の場合、 scrollLeft が 0 のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。

- -
-

画面拡大を使用するシステムでは、 scrollLeft が小数になることがあります。

-
- -

構文

- -

値の取得

- -
// スクロールしたピクセル数を取得
-var sLeft = element.scrollLeft;
-
- -

sLeft は element が左端からスクロールしたピクセル数を整数で表現したものです。

- -

値の設定

- -
// スクロールしたピクセル数を設定
-element.scrollLeft = 10;
-
- -

scrollLeft は任意の整数値で設定することができます。しかし、

- - - -

例

- -

HTML

- -
<div id="container">
-  <div id="content">ボタンをクリックすると右にスライドします。</div>
-</div>
-
-<button id="slide" type="button">右へスライド</button>
- -

CSS

- -
#container {
-  width: 100px;
-  height: 100px;
-  border: 1px solid #ccc;
-  overflow-x: scroll;
-}
-
-#content {
-  width: 250px;
-  background-color: #ccc;
-}
- -

JavaScript

- -
const button = document.getElementById('slide');
-
-button.onclick = function () {
-  document.getElementById('container').scrollLeft += 20;
-};
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..4a593af238 --- /dev/null +++ b/files/ja/web/api/element/scrollleft/index.md @@ -0,0 +1,111 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - CSSOM View + - Property + - Reference + - プロパティ +translation_of: Web/API/Element/scrollLeft +--- +
{{APIRef("DOM")}}
+ +

Element.scrollLeft プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。

+ +

要素の {{cssxref("direction")}} が rtl (right-to-left、右書き) の場合、 scrollLeft が 0 のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。

+ +
+

画面拡大を使用するシステムでは、 scrollLeft が小数になることがあります。

+
+ +

構文

+ +

値の取得

+ +
// スクロールしたピクセル数を取得
+var sLeft = element.scrollLeft;
+
+ +

sLeft は element が左端からスクロールしたピクセル数を整数で表現したものです。

+ +

値の設定

+ +
// スクロールしたピクセル数を設定
+element.scrollLeft = 10;
+
+ +

scrollLeft は任意の整数値で設定することができます。しかし、

+ + + +

例

+ +

HTML

+ +
<div id="container">
+  <div id="content">ボタンをクリックすると右にスライドします。</div>
+</div>
+
+<button id="slide" type="button">右へスライド</button>
+ +

CSS

+ +
#container {
+  width: 100px;
+  height: 100px;
+  border: 1px solid #ccc;
+  overflow-x: scroll;
+}
+
+#content {
+  width: 250px;
+  background-color: #ccc;
+}
+ +

JavaScript

+ +
const button = document.getElementById('slide');
+
+button.onclick = function () {
+  document.getElementById('container').scrollLeft += 20;
+};
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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

Element.scrollTop プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。

- -

要素の scrollTop の値は、要素の上から最も上の表示されているコンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 scrollTop の値は 0 になります。

- -

scrollTop がルート要素 (<html> 要素) に対して使用されると、ウィンドウの scrollY が返されます。 これは scrollTop の特例です。

- -
-

画面の拡大縮小を使用するシステムでは、 scrollTop が小数になることがあります。

-
- -

構文

- -
// スクロールしたピクセル数を取得
-var intElemScrollTop = someElement.scrollTop;
-
- -

このコードを実行した後、 intElemScrollTop はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。

- -
// スクロールするピクセル数を設定
-element.scrollTop = intValue;
-
- -

scrollTop は任意の整数値で設定することができます。しかし、

- - - -

例

- -
-
-

padding-top

-If you can see this, scrollTop = 0 - -

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.

-If you can see this, scrollTop is > 0 - -

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.

-If you can see this, scrollTop is maxed-out - -

padding-bottom

-
-Left Top Right Bottom margin-top margin-bottom border-top border-bottom
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..21f8478a46 --- /dev/null +++ b/files/ja/web/api/element/scrolltop/index.md @@ -0,0 +1,92 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - CSSOM View + - NeedsArtUpdate + - NeedsMarkupWork + - Property + - Reference + - プロパティ +translation_of: Web/API/Element/scrollTop +--- +
{{APIRef("DOM")}}
+ +

Element.scrollTop プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。

+ +

要素の scrollTop の値は、要素の上から最も上の表示されているコンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 scrollTop の値は 0 になります。

+ +

scrollTop がルート要素 (<html> 要素) に対して使用されると、ウィンドウの scrollY が返されます。 これは scrollTop の特例です。

+ +
+

画面の拡大縮小を使用するシステムでは、 scrollTop が小数になることがあります。

+
+ +

構文

+ +
// スクロールしたピクセル数を取得
+var intElemScrollTop = someElement.scrollTop;
+
+ +

このコードを実行した後、 intElemScrollTop はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。

+ +
// スクロールするピクセル数を設定
+element.scrollTop = intValue;
+
+ +

scrollTop は任意の整数値で設定することができます。しかし、

+ + + +

例

+ +
+
+

padding-top

+If you can see this, scrollTop = 0 + +

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.

+If you can see this, scrollTop is > 0 + +

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.

+If you can see this, scrollTop is maxed-out + +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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

Element.scrollWidth は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。

- -

scrollWidth の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 scrollWidth は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。

- -
-

このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

-
- -

構文

- -
var xScrollWidth = element.scrollWidth;
- -

xScrollWidth はピクセル単位の element のコンテンツの幅です。

- -

例

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

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

- - 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..5f3e98892d --- /dev/null +++ b/files/ja/web/api/element/scrollwidth/index.md @@ -0,0 +1,125 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - API + - CSSOM View + - Property + - Reference + - プロパティ +translation_of: Web/API/Element/scrollWidth +--- +
{{APIRef("DOM")}}
+ +

Element.scrollWidth は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。

+ +

scrollWidth の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 scrollWidth は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。

+ +
+

このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

+
+ +

構文

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth はピクセル単位の element のコンテンツの幅です。

+ +

例

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

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

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

概要

-

要素の名前を返します。

-

構文

-
elementName = element.tagName
-
- -

注記

-

XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、tagName は標準的な大文字で要素名を返します。 tagName の値は nodeName の値と同じになります。

-

例

-

以下のようなマークアップを想定します。

-
<span id="born">When I was born...</span>
-
-

上記 HTML に対し以下のスクリプトを実行した場合...

-
var span = document.getElementById("born");
-
-alert(span.tagName);
-
-

XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。

-

仕様

- 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..e10c5acf43 --- /dev/null +++ b/files/ja/web/api/element/tagname/index.md @@ -0,0 +1,36 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Element/tagName +--- +
+ {{ApiRef}}
+

概要

+

要素の名前を返します。

+

構文

+
elementName = element.tagName
+
+ +

注記

+

XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、tagName は標準的な大文字で要素名を返します。 tagName の値は nodeName の値と同じになります。

+

例

+

以下のようなマークアップを想定します。

+
<span id="born">When I was born...</span>
+
+

上記 HTML に対し以下のスクリプトを実行した場合...

+
var span = document.getElementById("born");
+
+alert(span.tagName);
+
+

XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。

+

仕様

+ -- cgit v1.2.3-54-g00ecf