看来我不明白 DOM 方法 normalize() 的确切操作。
我认为它会删除完全空的文本节点。但是我没有观察到这种效果。
这是一个示例文档。
<!DOCTYPE html />
<html lang = "en">
<head>
<meta charset = "Utf-8" />
<title>Normalize</title>
</head>
<body>
<form accept = "#" method = "post">
<fieldset><legend>Using normalize()</legend>
<p>The form is used only to test the method normalize().</p>
<div>
<label for = "text">Label</label>
<input type = "text" name = "text" id = "text"/>
</div>
</fieldset>
</form>
<script>
window.onload = function () {
var element = document.getElementById("text");
do {
alert(element);
element = element.previousSibling;
} while (element.nodeType != Node.ELEMENT_NODE);
alert(element);
var element = document.getElementById("text");
element.parentNode.normalize();
do {
alert(element);
element = element.previousSibling;
} while (element.nodeType != Node.ELEMENT_NODE);
alert(element);
};
</script>
</body>
</html>
第一个 do-while 在方法 normalize() 尚未调用时输出节点。
它在 IE-11 中的输出如下
[object HTMLInputElement]
[object Text]
[object HTMLLabelElement]
但是，在调用方法 normalize() 后，下一个 do-while 循环会产生相同的输出序列:
[object HTMLInputElement]
[object Text]
[object HTMLLabelElement]
我认为输出
[object Text]
第二个循环中不应出现。
我对 normalize() 方法的理解有什么问题？
或者 DOM 规范中空 Text 节点的确切定义是什么？
最佳答案
“标准化”方法定义表示“子树中没有文本节点是空的，并且没有相邻的文本节点”在您的情况下，没有空的文本节点，有具有“↵”和一些空格的文本节点。如果您将 html 更改为:
<label for = "text">Label</label><input type = "text" name = "text" id = "text"/>
“label”和“input”元素在一起时不带空格，您将不会收到“#text”节点的任何警报。现在，如果您确实想了解规范化的工作原理，您应该创建两个具有空值的文本节点:
document.createTextNode('');
将它们放在“标签”和“输入”元素之间。然后运行您的代码。您将收到两个关于 #text 节点的警报。标准化后，您不应该收到任何 #text 节点的警报。
关于javascript - 使用DOM方法normalize()的效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34924781/