Dom之文档结构与遍历

最新推荐文章于 2022-03-09 17:44:10 发布

weixin_30919429

最新推荐文章于 2022-03-09 17:44:10 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qiuleo/p/4595684.html

1、Document对象、它的Element对象和文档中表示文本的Text对象、comment对象都是Node对象。Node定义了以下重要的属性

　　parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling、NodeType、NodeValue、NodeName(元素的标签名)

　　其中：

　　　　NodeType(节点类型)

　　　　　　1 → 代表Element节点

　　　　　　3 → 代表Text节点

　　　　　　4 → 代表CDATASection节点

　　　　　　8 → 代表Comment(注释)节点

　　　　　　9 → 代表Document节点

　　　　　　11 → 代表DocumentFragment节点

2、当将主要的兴趣集中在文档的元素上而非它们之间的文本(和他们之间的空间)上时，有另一个API

　　API第一部份：children属性

　　API第二部份：Element(统称，其中包括firstElementChild、lastElementChild、nextElementSibling、previousElementSibling、childElementCount)属性

Demo如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="wrapper">
    <div class="test" id="first">
        <span>First text</span>
    </div>
    <!-- here is the comment-->
    <div class="test" id="second">Second text</div>
    <div class="test" id="third">Third text</div>
    <div class="test" id="four">Four text</div>
    <div class="test" id="five">Five text</div>
    <div class="test" id="six">Six text</div>
</div>
</body>
<script>
    var $ = function (id) {
        return document.getElementById(id);
    };

    var e = $("wrapper");

    /**
     * children与Element(firstElementChild等的统称)将主要关注的
     * 点集中在元素上，而不是文本上(例如text、comment)
     */
    (function () {
        console.log(e.children);

        console.log(e.firstElementChild);
        console.log(e.lastElementChild);
        console.log(e.firstElementChild.nextElementSibling);
        console.log(e.lastElementChild.previousElementSibling);

        console.log(e.childElementCount);//子元素的数量，返回的值和children.length相等
    })();

    /**
     * Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象
     *
     */
    (function () {
        console.log(e.parentNode);// return body的node对象
        console.log(e.childNodes);// 返回该节点的子节点的实时表示，包含text、comment
        console.log(e.firstChild);// 该节点的子节点的第一个，没有则为null
        console.log(e.lastChild);// 该节点的子节点的最后一个，没有则为null

        var eFirst = $("first");
        console.log(eFirst.nextSibling);// 返回该节点的兄弟节点的下一个节点
        console.log(eFirst.nextSibling.nextSibling);// 这里返回注释节点
        console.log(eFirst.previousSibling);// 返回该节点的兄弟节点的上一个节点

    })();
</script>
</html>