0

我正在尝试了解有关 DOM 的更多信息，并且一直在编写一些遍历脚本。我提出的算法在我正在做的部分工作中运行良好，但是当我将它应用于 HTML 文档的整个正文时，它就搞砸了。这是HTML：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Lumen Tests</title>
        <link rel='stylesheet' href='../../qunit/qunit.css' />
    </head>
    <body>
        <div id='qunit'></div>
        <div id='qunit-fixture'></div>

        <div id='wrapper'>
            <div id='header'></div>
            <div id='content'>
                <p id='para'>Lorem ipsum dolor sit amet.</p>
            </div>
            <div id='footer'></div>
        </div>

        <script src='../../qunit/qunit.js'></script>
        <script src='../lib/traverse.js'></script>
        <script src='../lib/lumen.js'></script>
        <script src='features.js'></script>
    </body>
</html>

和 JavaScript：

(function () {

    'use strict';

    function toArray(list) {
        var array = [],
            len = list.length,
            i = 0;

        while (i < len) {
            array[i] = list[i];
            i += 1;
        }

        return array;
    }

    function Traverse() {

        var that = this;

        this.allTags = function (node) {
            var context  = node || document.body,
                children = [],
                array = [],
                len,
                i = 0;

            children = toArray(context.childNodes);
            len = children.length;

            while (i < len) {
                if (children[i].nodeType === 1) {
                    array.push(children[i]);
                    array = array.concat(that.allTags(children[i]));
                }

                i += 1;
            }

            return array;
        };

    }

    var foo = new Traverse();
    window.Traverse = foo.allTags;

}());

alert(Traverse());

document.getElementById('wrapper')现在，当我传递给遍历函数时，这个设置可以正常工作，但是当我让它使用它时，document.body它只会得到两个script元素。我在 Chrome 20.0.1132.34、Firefox 11.0 和 IE 9 上对此进行了测试，它们都得到了相同的结果。通过测试，我确实发现该算法没有传递任何内容，childNodes属性 ondocument.body给出的长度为 10，当我将其转换为数组并警告它时，输出为 text, div, text, div, text, div, text 、 脚本、 文本、 脚本。你们中的任何人都可以解释为什么childNodes不选择最后两个脚本标签吗？谢谢！

4

1 回答 1

1

当您调用遍历脚本时，其他 2 个脚本还不存在。在 domready 上调用 traverse。

document.addEventListener('DOMContentLoaded', function () {
    console.log(Traverse());
}, false);
于 2012-06-17T07:31:35.550 回答