2016-04-01 20 views
1

, bu bkz:Yinelenen HTML öğeleri etiketi

enter image description here

ben hala birhtml elemanı, sahip olduğu anlamına mı birihead ve tekbody?

Veya bunun yerine, bu öğeler çoğaltıldı mı?

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 Ben senin senaryoya baktım

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

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

İlginç. Yine de, denetçinin DOM ağacının neye benzediğine dair çok fazla endişelenmem. Iframe ile de öyle görünüyor. –

+0

@MrLister Yani, gösterilen DOM ağacının gerçek olmadığı anlamına mı geliyor? Bu durumda, gerçek (gerçek) DOM ağacını görmenin bir yolunu biliyor olabilirsiniz? –

+0

@maioman Bu örnek, [HTML5Rocks makalesi] (http://www.html5rocks.com/en/tutorials/webcomponents/imports/) örneğidir (biraz basitleştirilmiş). –

cevap

0

(bu fiddle yapılan);

temelde bir .html dosyası (müstakil .html kaynağına erişim sağlayarak) içerebilir şeyi içerebilir import özelliği aracılığıyla

kaynak bir iframe gibi tarayıcıda gömülü olduğu (en azından bu krom uygulamasının kaynağı kullanılabilir hale getirme şekli - not implemented in other major browsers).

Yani hala bir tek html öğesi, ONE head ve ONE gövdesi var, gömülü kaynak iframe gibi görünüyor ve bu sizin dev-tools'larınızda gördüğünüz şeydir.