Question

我正在测试一些东西而且我遇到了一个奇怪的错误（我不知道它是不是真的是一个bug）。

拿这个简单的文件

<!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中它是两次 - 这意味着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);

Answer 1

我在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;
                    }
                });
            });
        }
    };
}());

IE 9标准模式：normalize（）方法不起作用

1 个答案: