一. 节点与节点之间的关系
说明：
父（parent）节点 父节点拥有任意数量的子节点
子（child）节点 子节点拥有一个父节点
兄弟（sibling）节点 同级的子节点被称为同胞（兄弟或姐妹）。同胞是拥有相同父节点的节点
根 (root) 节点 一个文档只能有一个根节点。对html文档来说，根节点就是documentElement。根节点不可能有父节点
1.1 childNodes属性：获取一个元素的所有子节点
childNodes：获取所有子节点。(但是不能获取到子节点的子节点)
<body>
<div id="div">
<a href="">搜狐</a>
<div>
<a href=""></a>
</div>
<input type="text" name="user" />
</div>
<script type="text/javascript">
//通过Element元素的childNodes属性获取到这个元素下面的所有直接子节点
var nodes = document.getElementById("div").childNodes;
for (var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName)
}
</script>
</body>
1.2 firstChild属性：获取一个元素的第一个子节点
如果选定的节点没有子节点，则该属性返回 null。
<body>
<div id="div"><a href="">搜狐</a>
<div>
<a href=""></a>
</div>
<input type="text" name="user" />
</div>
<script type="text/javascript">
var div = document.getElementById("div");
var fistChild = div.firstChild; //第一个子节点
alert(fistChild.nodeName); // A
</script>
</body>
1.3 lastChild属性：获取一个元素的最后一个子节点
lastChild 属性可返回文档的最后一个子节点。
<body>
<div id="div"><a href="">搜狐</a>
<div>
<a href=""></a>
</div>
<input type="text" name="user" /></div>
<script type="text/javascript">
var div = document.getElementById("div");
var lastChild = div.lastChild; //最后一个节点
alert(lastChild.nodeName); // INPUT
</script>
</body>
1.4 parentNode属性：获取一个元素的父节点
<body>
<div id="div"><a href="">搜狐</a>
<div>
<a href=""></a>
</div>
<input type="text" name="user" /></div>
<script type="text/javascript">
var div = document.getElementById("div");
var parentNode = div.parentNode; //父节点
alert(parentNode.nodeName); // BODY
</script>
</body>
1.5 previousSibling属性：获取一个元素的上一个兄弟节点
<body>
<div id="div"><a href="">搜狐</a><div id="div1">
<a href=""></a>
</div>
<input type="text" name="user" /></div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
var preSibling = div1.previousSibling; //获取div1的父节点
alert(preSibling.nodeName); // A
</script>
</body>
1.6 nextSibling属性：获取一个元素的下一个节点
<body>
<div id="div"><a href="">搜狐</a>
<div id="div1">
<a href=""></a>
</div>
<input type="text" name="user" />
</div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
var neSibling = div1.nextSibling; // 下一个兄弟节点
alert(neSibling.nodeName); // #text
</script>
</body>
- 补充：由于上述都是节点操作，所以获取到的节点会包含一些我们并不关心的内容，比如空节点。下面的几个api只获取元素节点.
