父节点，子节点和同辈节点：
父节点：parentNode:
parentNode返回的永远都是一个节点，因为只有元素节点才有可能包含子节点。
document节点没有父节点。也就是文档节点没有父节点，也就是HTML
子节点：childNode：
childNodes，获取指定节点的所有子节点。其实上个例子已经使用了。
firstChild：指定第一个子节点。
lastChild：指定最后一个子节点。
同辈节点：
nextSibling：返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个节点的上一个兄弟节点。
示例如下：
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<p>你好</p><input type="text">
<script type="text/javascript">
//获取p标签的父，子，兄节点
var p = document.getElementsByTagName("P")[0];
alert(p.parentNode);//body
alert(p.childNodes[0].nodeValue)//你好
alert(p.previousSibling.nodeValue)//空格，说明空格也会作为一个节点
alert(p.nextSibling.nodeName);//input。这里就没出现空格，就是input节点
</script>
</body>
节点属性：
节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点的属性(特别是元素节点)的属性。
事实上，attributes中包含的是一个节点所有属性的集合。
attributes.getNameItem()和Element元素的getAttribute()方法很相似。
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<script type="text/javascript">
var bj = document.getElementById("bj");
alert(bj.attributes[1].nodeValue);
</script>
</body>
检测子节点和属性
查看是否有子节点：hasChildNodes();
查看是存在属性：hasAttributes();
即使节点中没有定义属性，其attributes属性还是有效的，而且长度是0。同样childNodes属性也是如此。
当你想知道某个节点是否包含子节点或属性时，使用hasChildNodes(),hasAttributes()。如果想知道包含多少个：attributes和childNodes属性。
在IE中不存在hasAttributes();方法。(不使用)
示例如下：
<body>
<input type="text" id="username" value="username">
<p>
明天休息
</p>
<script type="text/javascript">
// var username = document.getElementById("username");
// alert(username.hasChildNodes());//false
// alert(username.hasAttribute());//无效果
var p = document.getElementsByTagName("p")[0];
alert(p.hasChildNodes());//true
</script>
</body>
操作Dom节点数：
插入节点：
appendChild()方法。
insertBefore()方法。
没有insertAfter()方法。
删除节点：
removeChild()方法。
替换节点：
replaceChild()
示例
<body>
<ul id="city">
<!--注意这里不要回车-->
<li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li>
</ul>
<script type="text/javascript">
//创建<li id="sh" name="shanghai">上海</li>节点，增加到天津节点的前面
// var liElement = document.createElement("li");
// liElement.appendChild(document.createTextNode("上海"));
// liElement.setAttribute("id","sh");
// liElement.setAttribute("name","shanghai");
// liElement.insertBefore(document.getElementById("tj"));
// document.getElementById("city").appendChild(liElement);
//<li id="sh" name="shanghai">上海</li>节点插入北京节点的后面，没有insertAfter()方法。
var liElement = document.createElement("li");
liElement.appendChild(document.createTextNode("上海"));
liElement.setAttribute("id","sh");
liElement.setAttribute("name","shanghai");
var bjElement = document.getElementById("bj")
//得到兄弟节点
var nextElement = bjElement.nextSibling;
liElement.insertBefore(nextElement);
//添加到city下面
document.getElementById("city").appendChild(liElement);
</script>
</body>
复制和移动节点：
复制节点：cloneNode(boolean)方法，其中boolean参数是判读是否复制子节点。
移动节点：由三种方法组合完成：
查找节点：
getElementById();通过节点id属性，查找对应节点。
getElementsByName();通过节点名称，查找对应节点。
getElementsByTagName();通过节点名称，查找对应节点。
插入节点：
insertBefore()方法
appendChild()方法。
替换节点：
replaceChild()方法。
示例代码如下：
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<ul id="game">
<li id="fk" name="fankong">反恐精英</li>
<li id="xj" name="xingji">星际</li>
</ul>
<script type="text/javascript">
//当点击北京节点，就和反恐精英替换
document.getElementById("bj").onclick = function(){
//得到北京节点
var bjElement = document.getElementById("bj");
//得到反恐精英
var fkElemet = document.getElementById("fk");
//这里也可以:this.parentNode.replaceChild(fkElemet,bjElement);
bjElement.parentNode.replaceChild(fkElemet,bjElement);
}
</script>
</body>
复制案例：
<body>
<input type="button" id="login" value="登陆">
<p>
按钮来这：
</p>
<script type="text/javascript">
document.getElementById("login").onclick = function(){
var loginElement = document.getElementById("login");
//也可以写成:var copy = this.cloneNode(true);
var copy = loginElement.cloneNode(true);
var pElemet = document.getElementsByTagName("p")[0];
pElemet.appendChild(copy);
}
</script>
</body>