HTML DOM 节点 (获取节点与元素)

1,758 阅读2分钟

HTML DOM 节点

获取元素节点名、节点类型、节点值。

获取父节点、父元素、子节点、子元素、前一个兄弟节点、前一个兄弟元素、后一个兄弟节点、后一个兄弟元素

下面案例可以看出节点和元素之间的区别

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>HTML DOM 节点</h1>
    <div id="div">
        在 HTML DOM (文档对象模型)中,每个部分都是节点:(第一个文本节点)
        <p>p标签01</p>
        <ul id="ul">
            <li>文档本身是文档节点</li>
            <li id="li">所有 HTML 元素是元素节点</li>
            <li>所有 HTML 属性是属性节点</li>
            <li>HTML 元素内的文本是文本节点</li>
            <li>注释是注释节点</li>
        </ul>
        <p>p标签02</p>
        Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。(最后一个个文本节点)
    </div>

    <script>
        var div = document.getElementById("div");
        var li = document.getElementById("li");
        console.log("该节点名:" + div.nodeName + "  节点类型:" + div.nodeType + "  节点值:" + div.nodeValue );

        console.log("\n\n\n\n\n\n下面是节点和元素的区别");
        console.log("----------分割线----------以下是子节点+子元素:");
        console.log("div元素的子节点数组:");
        console.log(div.childNodes);
        console.log("div元素的子元素集合:");
        console.log(div.children);
        console.log("div元素的首个子节点(#text文本节点):");
        console.log(div.firstChild);
        console.log("div元素的首个子元素:");
        console.log(div.firstElementChild);
        console.log("div元素的最后一个子节点(#text文本节点):");
        console.log(div.lastChild);
        console.log("div元素的最后一个子元素:");
        console.log(div.lastElementChild);

        console.log("\n\n\n\n\n\n----------分割线----------以下是父节点+父元素:");
        console.log("div元素的父节点:");
        console.log(div.parentNode);
        console.log("div元素的父元素(IE专用的,但是和parentNode没什么区别parentNode):");
        console.log(div.parentElement);

        console.log("\n\n\n\n\n\n----------分割线----------以下是兄弟节点+兄弟元素:");
        console.log("该元素的前一个兄弟节点(#text文本节点):");
        console.log(li.previousSibling);
        console.log("该元素的前一个兄弟元素:");
        console.log(li.previousElementSibling);
        console.log("该元素的下一个兄弟节点(#text文本节点):");
        console.log(li.nextSibling);
        console.log("该元素的下一个兄弟元素:");
        console.log(li.nextElementSibling);
    </script>
</body>
</html>