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错误，我填写了 bug report ！

Answer 1

似乎IE-11无法规范化已经属于您文档的元素如果您的开发人员工具栏已打开。

  

这也适用于IE9＆amp; 10（使用meta http-equiv="X-UA-Compatible"标签模拟）

当您只创建新节点并且不将它们附加到文档时 - 一切都很好（对于这两种情况 - 开发人员工具栏都是打开和关闭的）：

＆＃13;

＆＃13;

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')

＆＃13;

＆＃13;

＆＃13;

但是，如果您正在处理已经是文档一部分的节点，那么normalize函数如果您的开发人员工具栏已打开则 ：

＆＃13;

＆＃13;

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')

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

如果您真的想要，您可以做的是从文档中提取节点并在规范化后添加它们：

＆＃13;

＆＃13;

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')

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

更新 - 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());
});

如果您的用例确实与您发布的内容一样简单，则此方法有效。对于更复杂的用例，还有许多其他方法可以执行此类操作。