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>