HTMLDocument の動的な作成 : createDocument メソッド編

codereading 
function createHTMLDocument_createDocument(source) {
  var doc = document.implementation.createDocument(null, 'html', null);
  var range = document.createRange();
  range.selectNodeContents(document.documentElement);
  var content = doc.adoptNode(range.createContextualFragment(source));
  doc.documentElement.appendChild(content);
  return doc;
}
  1. doc に DOM document を生成
    • namespaceURI : null
    • qualifiedNameStr : html
    • DocumentType : null
  2. document に range オブジェクトを生成
  3. foo
    1. document から root element 取り出す
      • "HTML ドキュメントは一般的に を 1 つの子ノードとして含みますが、その前に DOCTYPE 宣言が含まれる場合もあります。また、多くの XML ドキュメントはルート要素や DOCTYPE 宣言、処理命令 といった複数の子ノードを含みます。このため、ルート要素を取得するためには document.firstChild よりも document.documentElement を使うことが推奨されます。" (documentElement)
    2. 取り出した root element を range にセット
  4. bar
    1. source から document fragment を生成
      • range.createContextualFragment(source)
    2. 生成した document fragment を doc に収めて node にする
      • "node は取り込まれて現在のドキュメントで使用できるようになったノードです。 この新しいノードはまだドキュメントツリーに挿入されていないので、parentNode は null です。" (adoptNode)
    3. 生成した node を content に収める
  5. doc の root element にさっきの content を appendChild する
  6. return doc

日本語があやしい…



><