js+DOM创设和操作节点
日期：2014-05-16 浏览次数：20351 次
js+DOM创建和操作节点
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(oN
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(oN
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
