obj.appendChild(newe) 将子节点添加父节点的末尾。
obj：要添加的节点的父元素引用；newe：要添加的新节点。
注意：本人发现，在添加子节点的时候不能对其父节点进行引用，如果引用其父节点，就行造成溢出（好像是用这个词吧）现象，而导致浏览器崩溃。
obj.cloneNode(boolen) 得到当前节点的副本
obj：当前节点的引用； boolen：布尔值，true：包括当前节点的子节点；false：不包括。返回值为对当前节点的引用.
obj.hasChildNodes() 检测当前节点时否有子节点。返回值为布尔值：true表示有，false表示没有。
obj：要进行检测的节点。其实有时也可以用 childNodes.length 属性进行检测，只是此属性返回值为节点数量。
obj.parentNode.insertBefore(newe.obj) 在当前节点之前插入一个新节点。
obj：当前节点的引用；ocument.getElementById("tdiv").childNodes(2) 可提供一个字节点位置变量，就可随意放在任何位置。
parentNode：对当前节点的父节点的引用，因为此方法是在当前节点之前插入一个新节点，就等于在其父节点下插一个字节点，所以要对其父进行引用，我们不需要知道其父节点的信息，只需要用到parentNode属性。
newe：要插入的新节点。
obj.parentNode.removeChild(obj) 删除一个子节点
obj.parentNode：对要删除的子节点的父节点的引用，其原理同”obj.parentNode.insertBefore(newe.obj)“类似。
obj：要删除的子节点。
obj.parentNode.replaceChild(newe,obj) 用新节点替换旧节点
obj.parentNode：对要被替换掉的子节点的父节点的引用，其原理同上。
newe：用于替换旧节点的新节点。
obj：被替换掉的旧节点。
1.创建节点并添加内容:使用的方法:createElement和createTextNode
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function Message()
{
var op=document.createElement("p");
var oText=document.createTextNode("hello world!");
op.appendChild(oText);
document.body.appendChild(op);
}
</script>
</head>
<body onload="Message();">
</body>
</html>
2,删除节点 方法:getElementsByTagName和removeChild
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function removeMessage()
{
var op=document.body.getElementsByTagName("p")[0];
op.parentNode.removeChild(op);
}
</script>
</head>
<body onload="removeMessage();">
<p>hello world!</p>
</body>
</html>
3.替换节点 方法replace(new,old)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function replaceMessage()
{
var oNewp=document.createElement("p");
var oText=document.createTextNode("World Hello");
oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
oOldp.parentNode.replaceChild(oNewp,oOldp);
}
</script>
</head>
<body onload="replaceMessage();">
<p>hello world!</p>
</body>
</html>
4.插入新消息 insertBefore(new,old)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function replaceMessage()
{
var oNewp=document.createElement("p");
var oText=document.createTextNode("World Hello");
oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
document.body.insertBefore(oNewp,oOldp);
}
</script>
</head>
<body onload="replaceMessage();">
<p>hello world!</p>
</body>
</html>
5,文档碎片
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
/****************
* 当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中
* 方法:createDocumentFragment()
********************************************/
function replaceMessage()
{
var arrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
var oFragment=document.createDocumentFragment();//文档碎片
for(var i=0;i<arrText.length;i++)
{
var op=document.createElement("p");
var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
oFragment.appendChild(op);
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body onload="replaceMessage();">
<p>hello world!</p>
</body>
</html>
6,操作document元素属性
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function Load_message()
{
var oimg=document.getElementById("a");
alert(oimg.getAttribute("border"));
oimg.setAttribute("alt","DOM Test");
}
</script>
</head>
<body onload="Load_message();">
<img border="0" width="100" height="150" id="a"/>
</body>
</html>