From 42b7f6c057ecc8866ee9f4b8fce9c3d7157e1a35 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 17 Jan 2022 19:47:33 +0900 Subject: カスタム要素に関する Web API を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/createelement/index.html | 134 --------------------- files/ja/web/api/document/createelement/index.md | 134 +++++++++++++++++++++ 2 files changed, 134 insertions(+), 134 deletions(-) delete mode 100644 files/ja/web/api/document/createelement/index.html create mode 100644 files/ja/web/api/document/createelement/index.md (limited to 'files/ja/web/api/document/createelement') diff --git a/files/ja/web/api/document/createelement/index.html b/files/ja/web/api/document/createelement/index.html deleted file mode 100644 index a7ffc5f4dc..0000000000 --- a/files/ja/web/api/document/createelement/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Document.createElement() -slug: Web/API/Document/createElement -tags: - - API - - DOM - - Document - - Method - - Reference - - createElement - - メソッド -translation_of: Web/API/Document/createElement ---- -
{{APIRef("DOM")}}
- -

HTML 文書において、 document.createElement() メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。

- -

構文

- -
var element = document.createElement(tagName[, options]);
-
- -

引数

- -
-
tagName
-
生成される要素の型を特定する文字列。生成される要素の {{domxref("Node.nodeName", "nodeName")}} は tagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 createElement() は要素を生成する前に tagName を小文字に変換します。 Firefox, Opera, Chrome では、 createElement(null) は createElement("null") のように動作します。
-
options{{optional_inline}}
-
省略可能な ElementCreationOptions オブジェクトで、 is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。詳しくは{{anch("Web component example", "ウェブコンポーネントの例")}}を参照してください。
-
- -

返値

- -

新しい {{domxref("Element")}}。

- -

例

- -

基本的な例

- -

この例では新しい <div> を生成し、"div1" の id の要素の前に挿入します。

- -

HTML

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>||Working with elements||</title>
-</head>
-<body>
-  <div id="div1">The text above has been created dynamically.</div>
-</body>
-</html>
-
- -

JavaScript

- -
document.body.onload = addElement;
-
-function addElement () {
-  // 新しい div 要素を作成します
-  var newDiv = document.createElement("div");
-  // いくつかの内容を与えます
-  var newContent = document.createTextNode("Hi there and greetings!");
-  // テキストノードを新規作成した div に追加します
-  newDiv.appendChild(newContent);
-
-  // DOM に新しく作られた要素とその内容を追加します
-  var currentDiv = document.getElementById("div1");
-  document.body.insertBefore(newDiv, currentDiv);
-}
- -

{{EmbedLiveSample("Basic_example", 500, 50)}}

- -

ウェブコンポーネントの例

- -

以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。

- -
// Create a class for the element
-class ExpandingList extends HTMLUListElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // constructor definition left out for brevity
-    ...
-  }
-}
-
-// Define the new element
-customElements.define('expanding-list', ExpandingList, { extends: "ul" });
- -

この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。

- -
let expandingList = document.createElement('ul', { is : 'expanding-list' })
- -

新しい要素には is 属性が与えられ、その値はカスタム要素のタグ名になります。

- -
-

注: カスタム要素仕様書の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
- -

ブラウザーの互換性

- -

{{Compat("api.Document.createElement")}}

- -

関連情報

- - diff --git a/files/ja/web/api/document/createelement/index.md b/files/ja/web/api/document/createelement/index.md new file mode 100644 index 0000000000..a7ffc5f4dc --- /dev/null +++ b/files/ja/web/api/document/createelement/index.md @@ -0,0 +1,134 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Reference + - createElement + - メソッド +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

HTML 文書において、 document.createElement() メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。

+ +

構文

+ +
var element = document.createElement(tagName[, options]);
+
+ +

引数

+ +
+
tagName
+
生成される要素の型を特定する文字列。生成される要素の {{domxref("Node.nodeName", "nodeName")}} は tagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 createElement() は要素を生成する前に tagName を小文字に変換します。 Firefox, Opera, Chrome では、 createElement(null) は createElement("null") のように動作します。
+
options{{optional_inline}}
+
省略可能な ElementCreationOptions オブジェクトで、 is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。詳しくは{{anch("Web component example", "ウェブコンポーネントの例")}}を参照してください。
+
+ +

返値

+ +

新しい {{domxref("Element")}}。

+ +

例

+ +

基本的な例

+ +

この例では新しい <div> を生成し、"div1" の id の要素の前に挿入します。

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Working with elements||</title>
+</head>
+<body>
+  <div id="div1">The text above has been created dynamically.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // 新しい div 要素を作成します
+  var newDiv = document.createElement("div");
+  // いくつかの内容を与えます
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // テキストノードを新規作成した div に追加します
+  newDiv.appendChild(newContent);
+
+  // DOM に新しく作られた要素とその内容を追加します
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

ウェブコンポーネントの例

+ +

以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。

+ +
// Create a class for the element
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // constructor definition left out for brevity
+    ...
+  }
+}
+
+// Define the new element
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

新しい要素には is 属性が与えられ、その値はカスタム要素のタグ名になります。

+ +
+

注: カスタム要素仕様書の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Document.createElement")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf