使用DOM方法normalize()的效果

Question

好像没看懂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 节点的确切定义是什么？

Answer 1

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

Answer 2

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

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

'label' 和 'input' 元素一起没有空格，您将不会收到任何关于“#text”节点的警报。现在，如果您真的想看看 normalize 是如何工作的，您应该创建两个具有空值的文本节点：

document.createTextNode('');

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

使用DOM方法normalize()的效果

The effect of using DOM method normalize()

javascript

dom

normalize