2016-04-01 15 views
1

は、私はこれを参照してください。重複HTML要素タグ

enter image description here

が、それは私がまだ html要素を持っていることを意味してい headおよび body

または、代わりに、これらの要素は重複していますか?

index.htmlを

<head> 
    <link rel="import" href="parts.html"> 
</head> 
<body> 
    <script> 
     var link = document.querySelector('link[rel="import"]'); 
     var content = link.import; 
     var el = content.querySelector('.foo'); 
     document.body.appendChild(el.cloneNode(true)); 
    </script> 
</body> 

parts.html私はあなたのシナリオに見

<div class="foo"> 
    <p>Foo</p> 
</div> 

<div class="bar"> 
    <p>Bar</p> 
</div> 
+0

興味深い。私はDOMツリーがインスペクタでどのように見えるかについてあまり心配しないでしょう。 iframeも同様です。 –

+0

@MrListerしたがって、表示されているDOMツリーが実際ではないことを意味しますか?その場合、実際の(実際の)DOMツリーを見る方法を知っているかもしれません。 –

+0

@maioman [HTML5Rocks article](http://www.html5rocks.com/jp/tutorials/webcomponents/imports/)の例です(少し簡略化されています)。 –

答えて

0

(このfiddleを作りました)。 (デタッチの.htmlソースへのアクセスを与える)あなたが.htmlのファイルに含めることができるものを含むことができimportプロパティを使用して、基本的

リソースはインラインフレーム のように、ブラウザに組み込まれている(少なくともこれはクロム実装がリソースを利用できるようにする方法 - not implemented in other major browsers)。

あなたはまだ1つのhtml要素、1つのヘッドと1つの本体を持っていますが、組み込みリソースはiframeのように見えます。これはdev-toolsに表示されます。