DOM节点
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。
根据W3C标准,HTML主要有以下节点
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
parentNode:父节点
previousSibling:上一个节点
nextiousSibling:下一个节点
firstChild:第一个节点
lastChild:最后一个节点
nodeName节点名
tagName标签名
nodeType节点类型 元素节点:1 属性节点:2 文本节点:3
childNodes[n]:第n个节点
childNodes.length:子节点的个数
hasChildNodes():判断是否有子节点 true/false
<div><h1>我是标题1</h1><p id="pra">我是段落1</p><a href="#">超级链接</a><span>span</span></div>
<script type="text/javascript">
var praObj=document.getElementById("pra");
//alert(praObj.nodeName);
document.write("<hr />");
document.write("previousSibling+nodeName:" + praObj.previousSibling.nodeName + "<br />");//nodeName节点名
document.write("previousSibling+nodeType:" + praObj.previousSibling.nodeType + "<br />");//nodeType节点类型
document.write("previousSibling+tagName:" + praObj.previousSibling.tagName + "<br />"); //tagName标签名
//要找到元素的文本值须先找到元素节点的firstChild,人后在通过...firstChild.nodeValue查找
document.write("previousSibling+nodeValue:" + praObj.previousSibling.firstChild.nodeValue + "<br />"); //nodeValue节点值
document.write("nextSibling:" + praObj.nextSibling.tagName + "<br/>");
document.write(praObj.nextSibling.nextSibling.previousSibling.previousSibling.parentNode.tagName + "<br />");
document.write(praObj.parentNode.firstChild.firstChild.nodeValue + "<br />");
document.write(praObj.parentNode.lastChild.firstChild.nodeValue + "<br/>");
document.write(praObj.parentNode.childNodes[3].tagName + "<br/>");
document.write(praObj.parentNode.childNodes.length + "<br/>");
</script>