在dom中每个节点都是一个对象，有三个重要的属性：1.nodeName 2.nodeValue 3.nodeType
节点的名称是只读。
元素节点的名称与标签名相同。
属性节点的名称是属性的名称。
文本节点的名称 永远是#text。
文档节点的名称 永远是#document
节点的值
元素节点的值是 undefined 或 null。
文本节点的值是 文本本身。
属性节点的值是 属性的值。
节点的类型是只读的。常用的有以下几个类型：
元素 ：1 、属性：2 、文本：3 、注释：4 、文档：5。
node.childNodes 访问选定元素节点下的所有子节点的列表，返回的值可以看作一个数组。
node.parentNode 获取指定节点的父节点。
node.nextSibling 元素的后节点 ， node.previousSibling 元素的前节点
IE会忽略节点间生成的空白节点（如：换行符号），而其他浏览器不会忽略。
eg：获取指定节点的上一个节点和下一个节点：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nextSibling</title> </head> <body> <ul id="u1"> <li id="a">javascript</li> <li id="b">jquery</li> <li id="c">html</li> </ul> <ul id="u2"> <li id="d">css3</li> <li id="e">php</li> <li id="f">java</li> </ul> <script type="text/javascript"> function get_nextSibling(n){ var x=n.nextSibling; while (x && x.nodeType!=1){ x=x.nextSibling; } return x; } var x=document.getElementsByTagName("li")[0]; document.write(x.nodeName); document.write(" = "); document.write(x.innerHTML); var y=get_nextSibling(x); if(y!=null){ document.write("<br />nextsibling: "); document.write(y.nodeName); document.write(" = "); document.write(y.innerHTML); }else{ document.write("<br>已经是最后一个节点"); } function get_previousSibling(m){ a = m.previousSibling; while(a && a.nodeType!=1){ a=a.previousSibling; } return a; } var a = document.getElementsByTagName("li")[5]; document.write('<br>'+a.nodeName); document.write(" = "); document.write(a.innerHTML); var b = get_previousSibling(a); if(b!=null){ document.write("<br>previousSibling:"); document.write(b.nodeName); document.write(" = "); document.write(b.innerHTML); }else{ document.write("已经是第一个元素！"); } </script> </body> </html>
插入节点 appendChild
另一种插入,添加到某个节点之前：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <ul id="test"><li>JavaScript</li><li id="x1">HTML</li></ul> <script type="text/javascript"> var otest = document.getElementById("test"); var x = document.getElementById("x1"); var y = document.createElement("li"); y.innerHTML="php"; otest.insertBefore(y,x); </script> </body> </html>
删除节点：removeChild(); 把删除的子节点赋值给x，这个节点不在DOM数中，但是还在内存中，可以通过x完全删除对象。
var otest = document.getElementById("div");
var x = otest.removeChild(otest.childNodes[1]);
x = null;
eg:删除全部节点：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <div id="content"> <h1>html</h1> <h1>php</h1> <h1>javascript</h1> <h1>jquery</h1> <h1>java</h1> </div> <script type="text/javascript"> function clearText() { var content=document.getElementById("content"); // 在此完成该函数 for ( var i=0;i<content.childNodes.length;i++){ if(content.childNodes[i].nodeType!=1){ continue; } else{ content.removeChild(content.childNodes[i]); } } var x = content.removeChild(content.childNodes[5]); } </script> <button onclick="clearText()">清除节点内容</button> </body> </html>
替换元素节点： repalceChild(new,old);当oldnode被建立时，所有与之相关的属性内容都将被移除。newnode必须先被建立。
创建元素节点： createElement(); 此方法返回一个element对象。要与appendChild()或insertBefore()方法联合使用，将元素显示在页面中。
添加一个button：
<script type="text/javascript"> var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "创建一个按钮"; body.appendChild(input); </script>
使用setAttribute来设置属性：
<script type="text/javascript"> var body= document.body; var btn = document.createElement("input"); btn.setAttribute("type", "text"); btn.setAttribute("name", "q"); btn.setAttribute("value", "使用setAttribute"); btn.setAttribute("onclick", "javascript:alert('This is a text!');"); body.appendChild(btn); </script>