create

要素の作成 (DOM)

[1] 要素の作成は、いくつかの方法があり、 それぞれで作れる要素の範囲が少しずつ違っています。 また、HTML文書XML文書とでも、動作が異なります。

仕様書

要素の作成

[63] 要素の作成 (create an element) は、 文書局所名名前空間接頭辞 (既定値 null)、 is (既定値 null)、同期カスタム要素フラグについて、 次のようにします >>23

  1. [64] 定義を、文書名前空間局所名is についてカスタム要素定義を探すを実行した結果に設定します。
  2. [65] 定義null でなく、 定義名前定義局所名と異なるなら、
    1. [66] 結果を、要素に設定します。
      要素
      インターフェイス
      局所名HTML名前空間要素インターフェイス
      属性リスト
      名前空間
      HTML名前空間
      名前空間接頭辞
      接頭辞
      局所名
      局所名
      is
      is
      カスタム要素状態
      undefined
      カスタム要素定義
      null
      節点文書
      文書
    2. [67] 同期カスタム要素フラグが設定されていれば、
      1. [68] 要素定義について要素の格上げを実行します。
    3. [30] それ以外なら、
      1. [31] 結果定義について enqueue a custom element upgrade reaction します。
    4. [32] 結果を返します。
  3. [43] それ以外で、定義null 以外なら、
    1. [33] 同期カスタム要素フラグが設定されているなら、
      1. [69] C を、定義構築器に設定します。
      2. [156] 例外を、 null に設定します。
      3. [45] 結果を、C構築を適用した結果に設定します。 例外投げられたら、例外をこれに設定します。
      4. [46] 例外null で、 結果HTMLElement実装していなければ、
        1. [47] 例外を、 TypeError に設定します。
      5. [48] 例外null で、かつ、
        ... のいずれかを満たすなら、
        1. [56] 例外を、 NotSupportedError に設定します。
      6. [157] 例外null なら、
        1. [57] 結果名前空間接頭辞を、接頭辞に設定します。
        2. [165] 結果isを、null に設定します。
      7. [169] それ以外なら、
        1. [170] 例外について例外を報告します。
        2. [171] 結果を、要素に設定します。
          [172] 要素
          インターフェイス
          HTMLUnknownElement
          属性リスト
          空リスト
          名前空間
          HTML名前空間
          名前空間接頭辞
          接頭辞
          局所名
          局所名
          カスタム要素状態
          failed
          カスタム要素定義
          null
          is
          null
          節点文書
          文書
    2. [59] それ以外なら、
      1. [60] 結果を、要素に設定します。
        要素
        インターフェイス
        HTMLElement
        属性リスト
        空リスト
        名前空間
        HTML名前空間
        名前空間接頭辞
        接頭辞
        局所名
        局所名
        is
        null
        カスタム要素状態
        undefined
        カスタム要素定義
        null
        節点文書
        文書
      2. [61] 結果定義について enqueue a custom element upgrade reaction します。
    3. [54] 結果を返します。
  4. [44] それ以外なら、
    1. [34]
      ... のすべてを満たすなら、
      1. [38] カスタム要素状態を、 undefined に設定します。
    2. [42] それ以外なら、
      1. [41] カスタム要素状態を、 uncustomized に設定します。
    3. [35] 新しい要素を返します。
      要素
      インターフェイス
      局所名名前空間要素インターフェイス
      属性リスト
      名前空間
      名前空間
      局所名
      局所名
      is
      is
      カスタム要素状態
      カスタム要素状態
      カスタム要素定義
      null
      節点文書
      文書

[36] この処理は、次の場面で呼び出されます。

[136] 要素の作成を経由せずに要素が作成される場面もあります。

[138] 同期カスタム要素フラグ (synchronous custom elements flag) は、ほとんどの場合に設定されますが、 innerHTML など素片構文解析の場合や clone の場合には、に設定されます。

要素依存の動作

[28] どの作成方法によっても共通して実行される要素の種類に依存する操作がいくつかあります。

多くは初期状態の設定に関するものですが、いくつかは何らかの動作を開始させるものです。

DOM メソッドの動作

[96] Document インターフェイスcreateElement メソッドは、 CEReactions であり、かつ、 次のようにしなければなりません >>92

  1. [97] 局所名を、必須の第1引数を文字列として解釈した結果に設定します。
  2. [98] オプション群を、第2引数を省略可能な辞書 ElementCreationOptions または DOMString として解釈した結果に設定します。
  3. [99] 局所名Name でなければ、
    1. [100] InvalidCharacterError投げ、ここで停止します。
  4. [101] 文脈オブジェクトHTML文書なら、
    1. [102] 局所名を、局所名ASCII小文字に変換した結果に設定します。
  5. [130] オプション群辞書の場合、
    1. [103] is を、オプション群is の値に設定します。
  6. [108] 文脈オブジェクトHTML文書か、 文脈オブジェクト内容型application/xhtml+xml なら、
    1. [107] 名前空間を、HTML名前空間に設定します。
  7. [109] それ以外なら、
    1. [110] 名前空間を、null に設定します。
  8. [111] 要素を、要素の作成の結果に設定します。
    文書
    文脈オブジェクト
    局所名
    局所名
    名前空間
    名前空間
    接頭辞
    null
    is
    is
    同期カスタム要素フラグ
    設定する
    例外投げられたら、改めて投げてここで停止します。
  9. [114] 要素を返します。

[115] HTML文書の場合と、 application/xhtml+xml文書の場合は、自動的に HTML名前空間要素が作られます。 それ以外のXML文書の場合は、 null名前空間要素が作られます。

[116] DOM StandardHTML名前空間に統一しようと試みましたが、 Web互換でないことがわかり、断念しました。

[118] Document インターフェイスcreateElementNS メソッドは、 CEReactions であり、かつ、 次のようにしなければなりません >>117

  1. [119] 名前空間を、必須の第1引数を DOMString? として解釈した結果に設定します。
  2. [120] 修飾名を、必須の第2引数を文字列として解釈した結果に設定します。
  3. [121] オプション群を、第3引数を省略可能な辞書 ElementCreationOptions または DOMString として解釈した結果に設定します。
  4. [122] 内部createElementNS手順群文脈オブジェクト名前空間修飾名オプション群について実行した結果を返します。

[123] 内部createElementNS手順群は、 文書名前空間修飾名オプション群について、 次のようにします >>117

  1. [124] 名前空間接頭辞局所名を、 修飾名名前空間について validate and extract を適用した結果に設定します。例外投げられたら、改めて投げてここで停止します。
  2. [131] オプション群辞書の場合、
    1. [125] is を、オプション群is に設定します。
  3. [129] 要素を、要素の作成の結果に設定します。
    文書
    文脈オブジェクト
    局所名
    局所名
    名前空間
    名前空間
    接頭辞
    接頭辞
    is
    is
    同期カスタム要素フラグ
    設定する
    例外投げられたら、改めて投げてここで停止します。
  4. [132] 要素を返します。

[133] この手順群は、 createElementNS の他、 createDocument からも呼び出されます。

[135] 辞書 ElementCreationOptions >>134 は、 createElementcreateElementNS の最後の省略可能な引数として指定できるオプション群です。

構文解析器の動作

[8] HTML構文解析器 >>7XML構文解析器 >>139 構文解析器による要素の作成は、 字句から要素を作成 (create an element for a token) する手順 >>7 によって行われます。この手順は、字句化器から得られた字句、 または HTML構文解析器内部の処理によって生成された架空の字句に基づき、 要素を作成します。具体的には、字句名前空間想定親について、 次のように処理します >>7

  1. [140] 文書を、想定親節点文書に設定します。
  2. [141] 局所名を、字句タグ名に設定します。
  3. [142] is を、字句is 属性の値に設定します。
  4. [143] 定義を、文書名前空間局所名is についてカスタム要素定義を探すを実行した結果に設定します。
  5. [144] 定義null ではなく、 構文解析器素片構文解析モードでないなら、
    1. [145] スクリプト実行を、に設定します。
  6. [146] それ以外なら、
    1. [147] スクリプト実行を、に設定します。
  7. [148] スクリプト実行なら、
    1. [149] 構文解析器throw-on-dynamic-markup-insertion counterインクリメントします。
    2. [151] JavaScript実行文脈スタックなら、
      1. [152] 関連する類似起源閲覧文脈群の単位イベントループについて、 マイクロタスクチェックポイントを実行します。
    3. [153] 関連する類似起源閲覧文脈群の単位カスタム要素反応群スタックに、 要素キューpush します。
  8. [154] 要素を、要素の作成の結果に設定します。
    文書
    文書
    局所名
    局所名
    名前空間
    名前空間
    名前空間接頭辞
    null
    is
    is
    同期カスタム要素フラグ
    スクリプト実行
  9. [9] 字句属性リストの各属性について、
    1. [10] 要素属性追加します。
  10. [11] スクリプト実行なら、
    1. [13] キューを、関連する類似起源閲覧文脈群の単位カスタム要素反応群スタックpop した結果に設定します。
    2. [15] キューについてカスタム要素反応群の呼び出しを実行します。
    3. [155] 構文解析器throw-on-dynamic-markup-insertion counterデクリメントします。
  11. [16] 要素再設定可能要素なら、
    1. [158] 要素について再設定アルゴリズムを呼び出します。
  12. [17]
    ... のすべてを満たすなら、
    1. [24] 要素構文解析器form要素指示子要素関連付けします。
    2. [25] 要素構文解析器挿入フラグを、に設定します。
  13. [29] 要素を返します。

[26] ここで、想定親 (intended parent) は、 要素挿入されることになる節点です。ただし AAA 内で作成されるときは、親節点自体ではなく、祖先となることがあります。 この想定親は、節点文書の決定とフォーム所有者の処理に使われています。 通常は構文解析の対象となる文書とする挿入することになるのですが、 要素template 要素雛形内容に属することになる場合や、 スクリプトによって挿入先が本来の文書から除去されている場合があり得ます。

[159] この処理への入力となる字句は、タグ名属性名前大文字小文字の正規化が済んだものです。

[27] 構文解析器は、 createElementNS だと例外が発生して作成できない名前を持つ要素属性を作成することがあります。

[4] 構文解析器による要素の作成の場合、属性の順序は仕様上未定義とされています。

通常は、属性は追加された順序が保持されます。

[12] 多くの実装では、ソースコードに現れた順序、またはその逆順となります。

[6] HTML構文解析器XML構文解析器によって作成された script 要素は特別なフラグが設定されます。 script

[3] HTML構文解析器XML構文解析器媒体要素を作成した場合には、 blocked-on-parser フラグが真に設定されます >>2

このフラグは開いている要素のスタックから外された時に偽に設定されます。

[5] フォーム所有者の再設定は、通常の挿入時とは若干異なる形で行われます >>7仕様書は動的猿パッチ的な記述になっていますが、 「構文解析器挿入」フラグのようなものが必要だと思われます。

[160] 字句の要素の作成で作成された要素は、直ちに文書挿入されます。 カスタム要素の場合はカスタム要素構築器が実行されますが、 それ以外の方法やそれ以外の要素挿入前の状態でスクリプトからアクセスされることはありません。

[161] カスタム要素構築器を使うと AAA の途中段階も観察できることに (少なくても仕様書上は) なっているようです。

歴史

DOM0 時代

[71] NetscapeJavaScript では、 ImageOptionコンストラクターだけが要素を作成する方法でした。 (もちろん他にHTML構文解析器document.write がありましたが、当時はまだ文書木がありませんでした。)

W3C DOM 時代

[93] createElementDOM1 で追加されました。

[94] MSHTML では HTMLDocument2 で実装されていました。

[95] createElementNSDOM2 HTML で追加されました。

[62] Bug 280692 - createElement breaks DOM spec for HTML and XUL documents https://bugzilla.mozilla.org/show_bug.cgi?id=280692

[70] d:id:quaa (2007-03-21 23:49:00 +09:00 版) http://d.hatena.ne.jp/quaa/20070321#p2 (名無しさん 2007-03-21 23:59:07 +00:00)

[72] DOM水準1DOM水準2では、 createElementHTML 文書では tagName大文字正準形実装写像しなければならないと明記されていました。

DOM水準3では、XML 以外のマーク付け言語においては大文字小文字を区別するか否かはマーク付け言語に依存し、 区別しない場合には実装正準形写像しなければならないと述べています。

[73] DOM水準2DOM水準3では、 createElementlocalNamenull にすると述べています。

[74] DOM水準3では createElementtagNamexmlVersion に照らして正しい名前でなければ INVALID_CHARACTER_ERR とされていますが、 HTML 文書の場合にどうなるのかは不明です。

[75] あるSEのつぶやき: IE7でHTMLに存在しない要素にスタイルシートを適用する方法 (2008-03-09 21:53:37 +09:00 版) http://fnya.cocolog-nifty.com/blog/2008/01/ie7html_faf9.html

[76] document.createElement()にタグではなくHTMLを指定してみる(IE限定) - uupaaの開発日記 ( 版) http://d.hatena.ne.jp/uupaa/20080718/1216362040

[77] DOM水準3createElementNSNAMESPACE_ERR の条件が増えています:

[78] Firefox 1.5 と Opera 9 Preview 1 は createElementcreateElementNS既定属性を追加しません。

Opera構文解析の時にも既定属性を (内部部分集合にあっても) 追加しません。 Firefox は追加しますが、 specifiedtrue になっています。

[79] createElementNSqualifiedName修飾名でなければ NAMESPACE_ERR ですが、 その XMLに関して・・・ createAttributeNS を参照。

HTML5 時代

[80] IRC logs: freenode / #whatwg / 20090312 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090312#l-333

[14:35] <Lachy> hsivonen, document.createElement("foo").namespaceURI returns the XHTML namespace in an XHTML document.

[14:37] <Lachy> for an SVG document, Opera returns the SVG namespace, but Gecko and WebKit return the XHTML namespace still

[81] Bug 280692 – createElement breaks DOM spec for HTML and XUL documents ( 版) https://bugzilla.mozilla.org/show_bug.cgi?id=280692

[82] IRC logs: freenode / #whatwg / 20091007 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20091007#l-342

[83] Bug 24271 – Document.createElement name validation inconsistent with HTML parse rules ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=24271

[84] IRC logs: freenode / #whatwg / 20140113 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140113#l-241

[85] Bug 19431 – Namespace of elements made via .createElement() in XML documents must be null ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=19431

[86] CreateElement no longer supports angle brackets (Windows) ( ( 版)) http://msdn.microsoft.com/en-us/library/ie/ff986077(v=vs.85).aspx

[87] Change .createElement() namespace to match UAs by ayg · Pull Request #213 · whatwg/dom ( 版) https://github.com/whatwg/dom/pull/213

カスタム要素への対応

[88] Add support for custom elements · whatwg/dom@7f63535 ( 版) https://github.com/whatwg/dom/commit/7f63535da39a1cbf7f8f68563abc6f05f760990a

[89] Change createElement() namespace to match implementations · whatwg/dom@c8ae9cb ( 版) https://github.com/whatwg/dom/commit/c8ae9cbd46ca3175e07b7f205ebe375805013119

[90] Editorial: make "is" and "prefix" optional in "create an element" · whatwg/dom@5fc5624 ( 版) https://github.com/whatwg/dom/commit/5fc5624fb80648de46088cac06864b4048c1981c

[91] Editorial: createDocument should not invoke createElementNS directly · whatwg/dom@4d5ae94 ( 版) https://github.com/whatwg/dom/commit/4d5ae94463a464adf6d7a8eacb4bf1b578ce0905

[137] Fix the owner document for all element constructors ( (domenic著, )) https://github.com/whatwg/html/commit/c9d898386d7b79cf1c7e104b5768e393c924078f

[162] Don't set custom element state redundantly ( (domenic著, )) https://github.com/whatwg/dom/commit/d077da16b7fc307fc51820dbe541f6cf0b088115

[58] createElement() cannot just depend on content type ( (smaug----著, )) https://github.com/whatwg/dom/commit/fb1c9863b16c39ae880becdac90e1156a8d61cde

[163] Clarify that the namespace check in "create an element" is redundant ( (domenic著, )) https://github.com/whatwg/dom/commit/182e89f5355cbf90d263f7fffef812e7012dd945

[164] Save the is="" value an element was created with (domenic著, ) https://github.com/whatwg/dom/commit/754bb8d533f1db664c6c00ddbe565b64cff18811

[167] Set the stage for new custom element adoption semantics (domenic著, ) https://github.com/whatwg/dom/commit/674e9343c811b178b5d1821e469682df0aa616f9

[168] Mark more elements in browsing-context-less documents as "undefined" (domenic著, ) https://github.com/whatwg/dom/commit/6b1b1da6114841e3288d03abc8d40f82af2dfdf2

[37] Make document.write etc. throw during parsing custom elements (domenic著, ) https://github.com/whatwg/html/commit/00c6fa07bdb9f0d08a28f6c6e1ababca7d08618c

[150] Change createElement to report exceptions instead of rethrowing (domenic著, ) https://github.com/whatwg/dom/commit/eb28710ba62bef69e60c5231c4aa78f20ce7b1e7

[173] Update the parser's element creation for recent DOM changes (domenic著, ) https://github.com/whatwg/html/commit/cf2c5759ed0a6a8c8855c6cb67835679234767f9

[166] Remove incorrect customized built-in element checks (domenic著, ) https://github.com/whatwg/dom/commit/766a5e7b8856fb5b90579e56ca1dc8497d28f144

[104] Bug 25893 – createElement should support passing markup instead of just element name, e.g. document.createElement("<select readonly>") () https://bugs.webkit.org/show_bug.cgi?id=25893

[105] 489532 - document.createElement("<x>") does not throw in quirks mode () https://bugzilla.mozilla.org/show_bug.cgi?id=489532

[106] Use Web IDL to construct custom element constructors (domenic著, ) https://github.com/whatwg/dom/commit/1ca094a209ba020348ac146c8bda157b7c5f3212

[126] Validating a qualified name does not match browsers in a corner case · Issue #319 · whatwg/dom () https://github.com/whatwg/dom/issues/319

[127] Use a single exception for name validation (annevk著, ) https://github.com/whatwg/dom/commit/61f40b0763e1c5aac94014b23fb37606e9e2caca

[128] Acid3 and createElementNS() (Anne van Kesteren著, ) https://lists.w3.org/Archives/Public/www-archive/2017Apr/0009.html

[174] Use a single exception for name validation (annevk著, ) https://github.com/whatwg/dom/commit/61f40b0763e1c5aac94014b23fb37606e9e2caca

[175] Track HTML parser form-associated elements with a flag (annevk著, ) https://github.com/whatwg/html/commit/384c30c56d6dfd26dfbd3a5024ae10e7f7134483

[176] Add [CEReactions] to createElement() (annevk著, ) https://github.com/whatwg/dom/commit/fb6638fa3d02985e43782d8857edaa915d499261

[177] Add [CEReactions] to createElement() by annevk · Pull Request #506 · whatwg/dom () https://github.com/whatwg/dom/pull/506

[178] Change handling of is="" in element creation and cloning (domenic著, ) https://github.com/whatwg/dom/commit/fc601be94e75427c3eb35d63ada0f6dc41f9f344

[112] Change handling of is="" in element creation and cloning by domenic · Pull Request #566 · whatwg/dom () https://github.com/whatwg/dom/pull/566

[113] createElement/createElementNS()'s dictionary argument can be a string (annevk著, ) https://github.com/whatwg/dom/commit/c05ca607993f129cef181686ae3b88fc86c34368

[179] Polymer encouraged incorrect document.createElement() usage · Issue #544 · w3c/webcomponents () https://github.com/w3c/webcomponents/issues/544

[180] Allow createElement/createElementNS()'s dictionary argument to be a s… by annevk · Pull Request #572 · whatwg/dom () https://github.com/whatwg/dom/pull/572

[181] 1294100 - TypeError: Argument 2 of Document.createElement can't be converted to a dictionary. () https://bugzilla.mozilla.org/show_bug.cgi?id=1294100

[182] Editorial: ShadowRoot is sufficiently upstreamed (annevk著, ) https://github.com/whatwg/dom/commit/5be84cc52d072197cae81131badd10751f9e1d51