IE 9 Standards Mode: normalize() method does not work

问题

I was testing something and I came across a weird bug (I don't know if it's really a bug, although).

Take this simple document

<!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>

In all browsers but IE 9, the console output is first 3 then 1. In IE-9 it is 3 both times -- which means that normalize() is not doing it's thing. What's more surprising is that if I change the "Document mode" to IE 7 or 8 or even quirks mode, the console output is 3 and 1.

Is this some bug in IE or am I getting something wrong?

-- UPDATE --

Strangely, if the element is NOT added to the DOM, IE 9 also behaves in the right way. That is, in the above code, if I remove the line that adds the paragraph into the body:

document.body.appendChild(p);

then, the IE 9 console also displays first 3 then 1.

-- UPDATE 2 --

A simple script to check if your browser does normalize() properly or not:

    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);

回答1:

I experienced this issue on IE 11, but after I tried "Reset Internet Explorer Settings", normalize() was behaving right. In any case, I wrote a function that does a "normalize" if IE is broken.

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

来源：https://stackoverflow.com/questions/12972090/ie-9-standards-mode-normalize-method-does-not-work

标签

javascript

internet-explorer-9