gpt4 book ai didi

javascript - IE11 DOM 规范化不适用于表行

转载 作者:搜寻专家 更新时间:2023-11-01 04:14:14 25 4
gpt4 key购买 nike

我想规范化表格行。这就像一个魅力,除了在 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>元素及其内容。在这一步之后,节点将如下所示:

DOM Node

然后,normalize()被调用以合并拆分的文本节点。然而,在 IE11 中,文本节点仍然被拆分。

我看不出有任何问题。这个问题的原因是什么,解决方案是什么?


事实证明这是一个 IE11 错误,我已经填写了一个 bug report !

最佳答案

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

This is also relevant for IE9 & 10 (emulated by using meta http-equiv="X-UA-Compatible" tag)

当您只创建新节点而不将它们附加到文档时 - 一切正常(对于这两种情况 - 开发人员工具栏打开和关闭):

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 发表评论后更新了答案。调查原因花了一些时间,但我认为现在我已经涵盖了所有内容。

Note that for IE8 (forced by using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> in IE-11) the normalize() function works for both elements that are in the DOM tree and elements that are not, even with the developers toolbar was open.

关于javascript - IE11 DOM 规范化不适用于表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39095101/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com