是否有可能阻止瀏覽器解析某些元素？

考慮下面的標記：是否有可能阻止瀏覽器解析某些元素？

<div hidden id="table-template"> 
<table> 
<tbody> 
    <slot></slot> 
</tbody> 
</table> 
</div> 
<div hidden id="table-row-template"> 
<tr> 
    <td> 
    Some Content 
    </td> 
</tr> 
</div>

我想用「表格模板」和「錶行模板」在我的腳本可重用的組件。（將它們克隆並按需添加）但隨着頁面加載，瀏覽器解析標記並對其進行變異（以'slot'元素並將其插入'table'元素之前，並剝離'td'和'tr'標籤）。

這是合理的（當然不是有效的HTML），但有什麼辦法可以阻止瀏覽器解析這些元素嗎？

到目前爲止，我曾嘗試：使用隱藏要素，與「前」 /「代碼」標籤，包裝但沒有似乎工作。

來源

2017-06-06 Yair Levy

看看HTML [模板]（https://developer.mozilla.org/en/docs/Web/HTML/Element/template）。 – PeterMader

使用瀏覽器無法識別的虛構標籤。你仍然可以使用Javascript來定位它，並閱讀它的文本內容，但瀏覽器不會解析它。

說<template id="the-template">Foo bar</template>。

但真的是最好的方式來重新使用HTML片段它創建它們在Javascript中沒有污染的DOM。

e.g

var elToReuse = document.createElement('div').innerHTML('<h1>Lets have title here</h1>'); 
// Let's do some things to the elToReuse 
var anotherVersion = elToReuse.querySelector('h1').innerText('My another title'); 

// Now it's the time to append to the DOM 
document.body.appendChild(anotherVersion);

來源

2017-06-06 07:46:18 vassiliskrikonis

'template'標記修復了'table-row-template'問題，但瀏覽器（chrome-58）仍然改變'table-template'，（從表格中取出'slot'元素並追加它的模板）看看這裏：https：//jsfiddle.net/gjgsyL5v/1/ –

'但真的最好的方式來重新使用HTML片段它創建它們在Javascript中沒有污染的DOM' - 我不同意這個假設。將html片段注入DOM的過程要比克隆現有的DOM元素要昂貴得多。 –

@YairLevy你有這方面的perfomance統計？ – vassiliskrikonis

您可以嘗試使用<script type="text/template"></script>

<script id="mytemplate" type="text/template"> 
    ...your table's html... 
</script>

然後：

<script> 
    alert($('#mytemplate').html()); 
</script>

許多圖書館使用此方法，例如handlebar.js。

當兼容性更好，就應該開始使用<template>元素：http://caniuse.com/#feat=template

來源

2017-06-06 08:13:18

於是我研究了一下我的問題，這就是我想通了 - 的「TBODY」元素accpets只有「TR '作爲孩子的元素。，因此瀏覽器會在解析標記的同時「修復」標記。使用模板標籤作爲vassiliskrikonis建議不會爲'表模板'工作，但將修復'錶行模板'問題，使用腳本標記爲@Mihaly_KR建議將適用於這兩個，但在訪問模板時，您將得到一個簡單的字符串來處理（注入這個字符串到DOM將使瀏覽器解析它並'修復'它再次...）

我找到的解決方法是使用其他標記作爲我的佔位符內容。單向使用評論例如，但訪問此註釋元素需要使用treeWalker或nodeIterator（其性能遠低於querySelector或getElementsByTagName）其他方式是使用腳本標記作爲佔位符。瀏覽器不會更改標記，並且可以稍後使用querySelector或getElementsByTagName訪問它。

所以我重構的代碼看起來是這樣的：

<template id="table-template"> 
<table> 
<tbody> 
    <script type="slot"></script> 
</tbody> 
</table> 
</template> 
<template id="table-row-template"> 
<tr> 
    <td> 
    Some Content 
    </td> 
</tr> 
</template>

來源

2017-06-06 09:38:29

是否有可能阻止瀏覽器解析某些元素？

回答

相關問題