3

我正在测试一些东西，我遇到了一个奇怪的错误（虽然我不知道它是否真的是一个错误）。

拿这个简单的文件

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<script>
    window.onload = function() {
        var p = document.createElement('p');

        p.appendChild( document.createTextNode('x') );
        p.appendChild( document.createTextNode('y') );
        p.appendChild( document.createTextNode('z') );
        document.body.appendChild(p);

        console.log( p.childNodes.length );

        p.normalize();
        console.log( p.childNodes.length );
};
</script></head><body></body></html>

在除 IE 9 之外的所有浏览器中，控制台输出首先是 3，然后是 1。在 IE-9 中，两次都是 3——这意味着它normalize()没有做它的事情。更令人惊讶的是，如果我将“文档模式”更改为 IE 7 或 8 甚至 quirks 模式，控制台输出为 3 和 1。

这是 IE 中的一些错误还是我出错了？

- 更新 -

奇怪的是，如果没有将元素添加到 DOM，IE 9 也会以正确的方式运行。也就是说，在上面的代码中，如果我删除将段落添加到正文中的行：

document.body.appendChild(p);

然后，IE 9 控制台也先显示 3，然后显示 1。

-- 更新 2 --

一个简单的脚本来检查您的浏览器是否normalize()正确：

    var p = document.createElement('p');

    // you can not put empty strings -- put blank strings instead
    p.appendChild( document.createTextNode(' ') );
    p.appendChild( document.createTextNode(' ') );
    p.appendChild( document.createTextNode(' ') );
    
    var normalizeOk;

    document.body.appendChild(p);
    p.normalize();
    normalizeOk = p.childNodes.length == 1;
    document.body.removeChild(p);


    console.log("normalize OK: ", normalizeOk);
4

1 回答 1

3

我在 IE 11 上遇到了这个问题，但是在我尝试“重置 Internet Explorer 设置”之后，normalize() 表现正确。无论如何，我编写了一个函数，如果 IE 坏了，它会执行“规范化”。

(function () {
    function checkIfNormalizeOk() {
        var p = document.createElement('p');

        // you can not put empty strings -- put blank strings instead
        p.appendChild( document.createTextNode(' ') );
        p.appendChild( document.createTextNode(' ') );
        p.appendChild( document.createTextNode(' ') );

        document.getElementsByTagName('head')[0].appendChild(p);
        p.normalize();
        var isNormalizeOk = (p.childNodes.length === 1);
        document.getElementsByTagName('head')[0].removeChild(p);
        return isNormalizeOk;
    }

    function getNextNode(node, ancestor, isOpenTag) {
        if (typeof isOpenTag === 'undefined') {
            isOpenTag = true;
        }
        var next;
        if (isOpenTag) {
            next = node.firstChild;
        }
        next = next || node.nextSibling;
        if (!next && node.parentNode && node.parentNode !== ancestor) {
            return getNextNode(node.parentNode, ancestor, false);
        }
        return next;
    }

    var isNormalizeOk = checkIfNormalizeOk();
    window.normalizeEl = function (el) {
        if (isNormalizeOk) {
            el.normalize();
        } else {
            var adjTextNodes = [], nodes, node = el;
            while ((node = getNextNode(node, el))) {
                if (node.nodeType === 3 && node.previousSibling && node.previousSibling.nodeType === 3) {
                    if (!nodes) {
                        nodes = [node.previousSibling];
                    }
                    nodes.push(node);
                } else if (nodes) {
                    adjTextNodes.push(nodes);
                    nodes = null;
                }
            }

            adjTextNodes.forEach(function (nodes) {
                var first;
                nodes.forEach(function (node, i) {
                    if (i > 0) {
                        first.nodeValue += node.nodeValue;
                        node.parentNode.removeChild(node);
                    } else {
                        first = node;
                    }
                });
            });
        }
    };
}());
于 2013-12-07T11:32:10.860 回答