DOM初探（5）——遍历节点/元素节点

上面这些都是选择元素方法类的操作，还有非方法类的操作：

DOM基本操作：

遍历节点树：

parentNode->父节点(最顶端的parentNode为#document);

childNodes->子节点们

firstChild->第一个子节点

lastChild->最后一个子节点

nextChild->后一个子节点

previousSibling->前一个兄弟节点

基于元素节点树的遍历：
parentElement->返回当前元素的父元素节点(IE不兼容)

children->只返回当前元素的元素子节点

node.childrenElementCount == node.children.length当前元素节点的子元素节点个数(IE不兼容)

firstElementChild->返回的是第一个元素节点(IE不兼容)

lastElementChild->返回的是最后一个元素节点(IE不兼容)

nextElementSibling/previousElementSibling->返回后一个/前一个兄弟节点(IE不兼容)

比如现在有一个树形结构：

        <div>
            <span></span>
            <div>
                <p></p>
            </div>
        </div>

有的是父亲，有个互为左右兄弟……

        <div>
            <strong></strong>
            <span></span>
            <em></em>
        </div>
        <script type="text/javascript">
            var strong = document.getElementsByTagName("strong")[0];
        </script>

strong的父亲是div，div的父亲是body，body的父亲是html，html的父亲是document，document的父亲是浏览器，但是浏览器说了，我不参与你这个，所以document就没有父亲了，document就是顶层了。

        <div>
            <strong>
                <span>1</span>
            </strong>
            <span></span>
            <em></em>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>

现在，你看div有几个儿子，三个吧？

是7，怎么回事？

遍历节点树，我又没说只有html节点算节点！！

childNodes选的是div下面的所有子节点，

第8行到第9行选中的区域——第一个文本节点

第9行到第11行选中的区域——第二个元素节点

第11行到第12行选中的区域——第三个文本节点

第12行选中的区域——第四个元素节点

第12行到底13行选中的区域——第五个文本类节点

第13行选中的区域——第六个元素节点

第13行到第14行选中的区域——第七个文本类节点

节点的类型有很多，比如：元素节点，属性节点，文本节点，注释节点，document，DocumentFragment……

    <body>
        <div>
            <!-- this is comment -->
            <strong></strong>
            <span></span>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>
    </body>

注释能看到，他只不过是不运行而已！！

    <body>
        <div>123
            <!-- this is comment -->
            <strong></strong>
            <span></span>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>
    </body>

现在有多少个子节点？？

还是7个！！

div的第一个子节点与最后一个子节点，都时文本节点。

注释能看到，他只不过是不运行而已！！

    <body>
        <div>123
            <!-- this is comment -->
            <strong></strong>
            <span></span>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>
    </body>

现在有多少个子节点？？

还是7个！！

div的第一个子节点与最后一个子节点，都时文本节点。

    <body>
        <div>123
            <!-- this is comment -->
            <strong></strong>
            <span></span>
        </div>
        <script type="text/javascript">
            var strong = document.getElementsByTagName("div")[0];
        </script>
    </body>

遍历元素节点树：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div>123
            <!-- this is comment -->
            <strong></strong>
            <span></span>
            <em></em>
            <i></i>
            <b></b>
        </div>
        <script type="text/javascript">
            var strong = document.getElementsByTagName("div")[0];
        </script>
    </body>
</html>

DOM初探（5）——遍历节点/元素节点

猜你喜欢