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、さらにはクァークモードに変更すると、コンソール出力が3と1になることです。

これはIEのバグですか、それとも何か問題がありますか？

- アップデート -

不思議なことに、要素がDOMに追加されていない場合、IE9も正しい方法で動作します。つまり、上記のコードで、段落を本文に追加する行を削除すると、次のようになります。

document.body.appendChild(p);

次に、IE9コンソールも最初に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 に答える