javascript - 要素が実際にDOMツリーに追加されるのはいつですか？

Question

次のコードスニペットがあるとしましょう。

var NewNode = document.createElement("div");

NewNode.appendChild(document.createTextNode("Hello World!"));

document.body.appendChild(NewNode);

実際にDOMツリーに要素を追加するのはどの行ですか？

Answer 1

ここで、NewNodeがDOMに追加されています。

document.body.appendChild(NewNode);

ここでは、メモリ内にオブジェクトを作成するだけです。

var NewNode = document.createElement("div");

NewNode.appendChild(document.createTextNode("Hello World!"));

Answer 2

最後の行：document.body.appendChild(NewNode);現在レンダリングされているDOMに要素を追加します。ただし、いくつかの個別のDOMツリーを構築することを妨げるものは何もありません。x/ htmlドキュメントをDOMツリーに解析したり、新しい要素の束を作成して新しいツリー/DOMフラグメントを構築したりできます。

Answer 3

質問に具体的に答えるために、3行目のドキュメントDOMツリーに追加しています。しかし、あなたの質問の言い回しには概念的な混乱があります。

最初の行の後に複数のDOMツリーがあります。（1）「the」DOMツリーと呼んでいるドキュメントのDOMツリーがありますが、厳密に言えばそれだけではありません。また、（2）単一のdiv要素で構成されるDOMツリーがあります。この時点では、これら2つのDOMツリーは接続されていません。2行目の実行後、新しいDOMツリーには1つだけでなく2つのノードが含まれています。createTextNodeそして、完全に厄介であるために、戻った直後appendChildであるが呼び出される前に、3つのDOMツリーがあります。3行目以降は、を介してアクセスできる単一のDOMツリーに戻りますdocument。