2

<template>function を使用して HTML5 のアクティブなコピーを取得しimportNode()ます。

  function getTemplate() {
    var t = document.getElementById("example");
    return document.importNode(t.content,true);
  }

この後、動的データを入力し、

  var t = fillTemplate({
    id:"test",
    text:"Enter test data"
  });

最後に、ノードをターゲット コンテナーに追加します。

  var c = document.getElementById("container");
  var result = c.appendChild(t);

私の問題:resultノードのコンテンツがすべて取り除かれています: 結果ノードのテンプレートのコンポーネント要素にアクセスできません。実際には、操作が実行されると、resultノードには子ノードがまったく含まれません。appendChild

の戻り値はappendChild、コンテナに挿入され、現在アクティブなドキュメントの一部となっているノードを指すはずです。これが当てはまらない理由は何ですか？

これがjsfiddleです（Chrome 53でテスト済み）：

https://jsfiddle.net/rplantiko/mv2rbhym/

4

1 に答える 1

2

これは、 a ではNodeなく aを操作するという事実によるものですDocumentFragment。

挿入されたノードの数を取得したい場合は、親コンテナー (cこの例では) で呼び出しを実行する必要があり、正しい答え (5) が得られます。

ただし、追加した子要素のみをカウントする場合は、を使用するのではなく childNodes、ParentNode インターフェイスのプロパティを使用する必要がありますchildren。

c.childNodes.length  // = 5
c.children.length    // = 2

container に追加されるcと、DocumentFragmenttには子がなくなります。

MDN ドキュメントから:

他のさまざまなメソッドはドキュメントフラグメントを引数として取ることができます (例: Node.appendChild や Node.insertBefore などの Node インターフェイスメソッド)。フラグメント自体ではなく、ドキュメントのフラグメントです。フラグメント自体は (メモリ内に) 存在し続けますが、現在は子がありません。

DOM 3 W3Cの推奨事項も明確です。

さらに、さまざまな操作 (ノードを別のノードの子として挿入するなど) は、DocumentFragment オブジェクトを引数として取ることができます。これにより、DocumentFragment のすべての子ノードがこのノードの子リストに移動されます。

于 2016-10-02T19:43:04.547 に答える