刚刚写了一大堆，被我不小心给刷新下，没了。现在就不写那么多了。直接贴代码：
function modify(){
//createElement()生成元素
var newElem=document.createElement("p");
newElem.id="newP";//相当于 newElem.setAttribute("id","newP");
//createTextNode() 生成传递文本参数的文本节点
var newText=document.createTextNode("this is the second paragraph");
newElem.appendChild(newText);//把文本添加到新建元素节点下
document.body.appendChild(newElem);//然后吧新建元素添加到body下
//替换文本 替换了<em>标签之间的文本为“first”
document.getElementById("emphasis1").childNodes[0].nodeValue="first";
//alert(node);
}
<p id="paragraph1">this is the <em id="emphasis1">one and only.first and second</em> paragraph on the page</p>
如果上面的document.getElementById("emphasis1").childNodes[0].nodeValue该成：document.getElementById("emphasis1").innerHTML也是一样，但是后者会更好理解。但innerHTML包含HTML。
那么为什么 document.getElementById("emphasis1").childNodes[0].nodeValue这句话不能改写成这样呢：document.getElementById("emphasis1").nodeValue，原因我可能知道了。是这样的，childNodes得到的不仅仅是根下的元素（如span），还包含TextNode元素，我下面还有测试，就是还包含#text元素。
困惑2（直接看下代码，待会说明）：
<div id="Div1">
<span id="sp1">节点1</span>
<span id="sp2">节点2</span>
</div>
</body>
</html>
<script type="text/javascript">
var _nod=document.getElementById("sp1");
var _pNod=_nod.parentNode;
for(var i=0;i<_pNod.childNodes.length;i++){
alert(_pNod.childNodes[i].nodeName);
}
</script>
pNod.childNodes[i].nodeName,这句话应该得到的是标签的类型吧，运行后的结果是：#text、span、#text、span、#text。那就奇怪了，假如<span>里的文本（节点1、节点2）算是文本节点的话，那么结果也应该是：span、#text、span、#text。还有childNodes到底得到滴是什么东东？
我下面又做了个测试：
<body>
<ul id="Div1">
<li id="sp1">节点1</li>
<li id="sp2">节点2</li>
</ul>
</body>
</html>
<script type="text/javascript">
var _nod=document.getElementById("Div1");
alert(_nod.childNodes[1].firstChild.nodeValue);
</script>
发现一个一直让我误解滴问题，我本来想var _nod=document.getElementById("Div1");这句得到的是UL（没错），然后我就想既然是UL，那么我_nod.firstChild得到滴应该是li，但测试下得到滴竟然是#text，
传说有空格或换行就会出现#text，这个时候使用firstChild就不能得到想要的li了，所以以后要慎重用firstChild，首孩子就用childNodes[1]吧。
照这样，我测试了下 alert(_nod.childNodes[1].nodeName);得到滴真的是LI。然后我又改了下， alert(_nod.childNodes[1].nodeValue);，你猜得到了什么，结果既然是null。呵呵。。这个是意料之中滴事了，
经过早上的测试我已经知道了LI节点下面的还有一个文本节点要算（就是#text啦）。所以要得到“节点1”就要这样写： alert(_nod.childNodes[1].firstChild.nodeValue);或 alert(_nod.childNodes[1].childNodes[0].nodeValue);
下面呢。我要总结下DOM的一些常用操作，我 就不把那些常用操作写出来了，直接应用到代码了：
<script type="text/javascript">
function modify(){
var _p=document.getElementById("paragraph1");
//createElement()生成元素
var newElem=document.createElement("p");
newElem.id="newP";//相当于 newElem.setAttribute("id","newP");
//createTextNode() 生成传递文本参数的文本节点
var newText=document.createTextNode("新建节点的文本");
newElem.appendChild(newText);//把文本添加到新建元素节点下
_p.appendChild(newElem);//然后吧新建元素添加到body下
//替换文本 替换了<em>标签之间的文本为“first”
//alert(node);
var _elem2=newElem.cloneNode(true);//克隆 一个节点
_elem2.id="elemId";
var _txt=document.createTextNode("新建文本，用来替换");
_elem2.replaceChild(_txt,_elem2.childNodes[0]);//将节点_elem2的文本替换
newElem.parentNode.insertBefore(_elem2,newElem);//将节点_elem2插入到newElem之前
newElem.parentNode.removeChild(newElem);
}
</script>
</head>
<body>
<button onclick="modify()"> add/replace text</button>
<p id="paragraph1">this is the <em id="emphasis1">one and only.first and second</em>
paragraph on the page</p>
</body>
table操作
IE比较特殊，他对DOM操作table不能解释，这是别人说滴，我特地做了测试，发现IE8以后才这样滴，之前的版本还不会。搞特殊，所以要用table操作（下面是我测试的代码，两种方式都有）：
<script type="text/javascript">
function tableCreate(){
var row=document.createElement("tr");
row.innerHTML="<td> 随便写点什么吧</td><td> 随便写点什么吧</td>"
var tab=document.getElementById("tab");
tab.appendChild(row);
}
</script>
</head>
<body onload="tableCreate()">
<table border="1" id="tab">
<tr>
<td> 随便写点什么吧</td>
<td> 随便写点什么吧</td>
</tr>
<tr>
<td> 随便写点什么吧</td>
<td> 随便写点什么吧</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var tab=document.getElementById("tab");
var row2=tab.insertRow(2);//新增加第三行
var cell20=row2.insertCell(0);//为新增第三行添加一个单元格
cell20.innerHTML="20";
var cell21=row2.insertCell(1);
cell21.innerHTML="20";
</script>