访问DOM节点3——通过节点关系

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

parentNode、firstChild、lastChild

如字面意思，parentNode用于访问父节点。firstChild和lastChild则分别用于访问某个节点的第一个子结点和最后一个子结点。其中，nodeName是只读的，元素节点的nodeName和标签名字一样，属性节点的nodeName就是该属性，文字节点的nodeName永远是#text，文档节点的nodeName是#document。

应用实例

HTML代码：

<div>
    <p id="test">我是第一个p的文字</p>
    <p id="test2">我是第二个p的文字，span的文字</p>
</div>

JavaScript代码

<script type="text/javascript">
function getTest(){
	var x = document.getElementById("test");
	x.style.border = "1px dashed";
}
function getParent(){
	var x = document.getElementById("test");
	x.parentNode.style.border = "1px dashed";
}
function getFirst(){
	var x = document.getElementById("test");
	alert(x.firstChild.nodeValue);
}
function getLast(){
	var x = document.getElementById("test");
	alert(x.lastChild.nodeValue);
}
</script>

实际效果：

我是第一个p的文字

我是第二个p的文字，span的文字




从上面的实际例子中我们可以看到，在DOM节点树里，并不只有标签菜构成节点，而文字本身也是节点。例如，p是一个节点，而它的firstChild就是这个段落的文字内容了。

其它访问DOM节点的属性

除了上面的parentNode、firstChild和lastChild，我们还有childNodes，它表示的是一个节点的所有子结点；而previousSibling和nextSibling则分别表示上一个和下一个相邻的节点。

菜鸟的HTML DOM笔记目录

  1. DOM可以做什么？
  2. DOM的结构
  3. 访问DOM节点1——getElementById()
  4. 访问DOM节点2——getElementsByTagName()
  5. 访问DOM节点3——通过节点关系
  6. DOM节点信息
  7. DOM信息nodeType的应用
  8. 修改DOM——innerHTML
  9. 删除DOM节点——removeChild
  10. 添加DOM节点
  11. DOM简介总结