IE11 DOM規范化不適用於表行

Question

我想規范化表行。 除了IE（用IE 11測試）之外，這就像魅力一樣。

我已經創建了一個演示代碼片段來演示這個問題：

 $(function() { $("table tbody tr span").each(function() { var $this = $(this); var $parent = $this.parent(); $this.replaceWith($this.html()); $parent[0].normalize(); }); }); 

 <link href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-striped table-hover"> <thead> <tr> <th>President</th> <th>Birthplace</th> </tr> </thead> <tbody> <tr> <td><span>Zach</span>ary Taylor</td> <td>Barboursville, Virginia</td> </tr> </tbody> </table> 

這會將<span>元素替換為其內容。 在此步驟之后，節點將如下所示：

然后，調用normalize()以合並分割的文本節點。 但是，在IE11中，文本節點仍然是分開的。

我無法看到任何問題。 這個問題的原因是什么，可能是什么解決方案？

---

事實證明這是一個IE11錯誤，我填寫了錯誤報告 ！

Answer 1

似乎IE-11無法規范化已經是文檔一部分的元素如果您的開發人員工具欄已打開 。

這也與IE9和10相關（使用meta http-equiv="X-UA-Compatible"標簽模擬）

當您只創建新節點並且不將它們附加到文檔時 - 一切都很好（對於這兩種情況 - 開發人員工具欄都是打開和關閉）：

 d = document.createElement('div'); d.appendChild(document.createTextNode('text 1')); d.appendChild(document.createTextNode('text 2')); console.log(d.childNodes.length + ' - Should be 2') d.normalize(); console.log(d.childNodes.length + ' - Should be 1') 

但是，如果您正在使用已經是文檔一部分的節點， 那么如果您的開發人員工具欄處於打開狀態 ，則normalize函數將不起作用：

 d = document.getElementsByTagName('div')[0]; d.appendChild(document.createTextNode('text 1')); d.appendChild(document.createTextNode('text 2')); console.log(d.childNodes.length + ' - should be 2 on every browser') d.normalize(); console.log(d.childNodes.length + ' - should be 1, however it\\'s 2 on IE') 

 <div></div> 

如果你真的想要，你可以做的是從文檔中提取節點並在規范化后添加它們：

 d = document.getElementsByTagName('div')[0]; d.appendChild(document.createTextNode('text 1')); d.appendChild(document.createTextNode('text 2')); console.log(d.childNodes.length + ' - should be 2 on every browser') dNew = d.cloneNode(true) dNew.normalize() d.parentElement.replaceChild(dNew, d) d = document.getElementsByTagName('div')[0]; console.log(d.childNodes.length + ' - should be 1 on every browser') 

 <div></div> 

更新 - 28/8
答案在@dude發表評論后更新。 這里花了一些時間來調查原因，但我認為現在我已經涵蓋了所有內容。

請注意，對於IE8（在IE-11中使用<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> ）， normalize()函數適用於DOM樹中的兩個元素和即使開發人員工具欄已打開，也沒有。

Answer 2

我不太熟悉DOM.normalize（）但是如果你已經在使用jQuery，那么操作元素的內容就很容易了。 我最喜歡刪除不必要的嵌套標簽的方法是使用$ .text（），如下所示：

$("table tbody tr span").each(function() {
  var $parent = $(this).parent();
  $parent.html($parent.text());
});

如果您的用例確實與您發布的內容一樣簡單，則此方法有效。 對於更復雜的用例，還有許多其他方法可以執行此類操作。