[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 で、かつ、
        • [49] 結果の属性リストが空ではない
        • [50] 結果の子供childNodesが空ではない
        • [51] 結果の親parentNodeが null ではない
        • [52] 結果の節点文書が文書ではない
        • [53] 結果の名前空間がHTML名前空間でない
        • [55] 結果の局所名が局所名でない
        ... のいずれかを満たすなら、
        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]
      • [39] 名前空間が HTML名前空間
      • [40] 局所名が妥当なカスタム要素名か、または is が null ではない
      ... のすべてを満たすなら、
      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 を、オプション群の isis="" の値に設定します。
  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 Standard はHTML名前空間に統一しようと試みましたが、 Web互換でないことがわかり、断念しました。

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

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

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

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

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

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

構文解析器の動作

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

  1. [140] 文書を、想定親の節点文書に設定します。
  2. [141] 局所名を、字句のタグ名に設定します。
  3. [142] is を、字句の isis="" 属性の値に設定します。
  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] 要素に属性を追加末尾に追加 (属性)します。
    • [14] XMLNS名前空間の xmlns 属性や xmlns:xlink 属性が設定される場合、 その属性値がそれぞれ名前空間やXLink名前空間でなければ、 構文解析エラーです >>7。
  10. [11] スクリプト実行が真なら、
    1. [13] キューを、関連する類似起源閲覧文脈群の単位のカスタム要素反応群スタックを pop した結果に設定します。
    2. [15] キューについてカスタム要素反応群の呼び出しを実行します。
    3. [155] 構文解析器の throw-on-dynamic-markup-insertion counter をデクリメントします。
  11. [16] 要素が再設定可能要素なら、
    1. [158] 要素について再設定アルゴリズムを呼び出します。
  12. [17]
    • [18] 要素がフォーム被関連付け要素である
    • [19] 構文解析器のform要素指示子が null ではない
    • [20] 構文解析器の開いている要素のスタックに template 要素がない
    • [21] 要素が被列挙要素でないか、 要素が formform="" 属性を持たない
    • [22] 想定親と構文解析器のform要素指示子の要素が同じ木にある
    ... のすべてを満たすなら、
    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] Netscape の JavaScript では、 Image や Option のコンストラクターだけが要素を作成する方法でした。 (もちろん他にHTML構文解析器と document.write がありましたが、当時はまだ文書木がありませんでした。)

W3C DOM 時代

[93] createElement は DOM1 で追加されました。

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

[95] createElementNS は DOM2 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水準1とDOM水準2では、 createElement は HTML 文書では tagName は大文字正準形に実装が写像しなければならないと明記されていました。

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

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

[74] DOM水準3では createElement は tagName が xmlVersion に照らして正しい名前でなければ 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水準3で createElementNS の NAMESPACE_ERR の条件が増えています:

  • 名前空間接頭辞が xmlns で 名前空間URI が http://www.w3.org/2000/xmlns/ ではない
  • 修飾名が xmlns で名前空間URI が http://www.w3.org/2000/xmlns/ ではない
  • 名前空間URI が http://www.w3.org/2000/xmlns/ で修飾名または名前空間接頭辞が xmlns ではない

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

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

[79] createElementNS は qualifiedName が修飾名でなければ 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