DOM节点操作

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>