Question

似乎我不理解DOM方法normalize()的确切行为。

我认为它会删除完全空的Text节点。但是我没有观察到这种效果。

这是一份示例文件。

<!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节点的确切定义是什么？

Answer 1

根据normalize-page on MDN，它将删除空文本节点并合并相邻节点。在你的情况下，你的textnode周围有两个html元素，它们将包含一些空格，因此不会被触及。

Answer 2

'normalize'方法定义说'子树中没有文本节点是空的，没有相邻的文本节点'在你的情况下，没有文本节点为空，有on具有“↵”和一些空格的文本节点。如果您将html更改为：

<label for = "text">Label</label><input type = "text" name = "text" id = "text"/>

'label'和'input'元素一起没有空格，你不会得到'#text'节点的任何警报。现在，如果你真的想看看规范化是如何工作的，你应该创建两个空值的文本节点：

document.createTextNode('');

将它们放在'label'和'input'元素之间。然后运行你的代码。您将收到#text节点的两个警报。规范化后，您不应该对#text节点发出任何警报。

使用DOM方法normalize（）的效果

2 个答案: