//获得一个DOM结点的ChildList function getChildNodes(obj){ var r = new Array(); for(var i in obj.childNodes){ if(obj.childNodes[i].nodeType == 1){ r.push(obj.childNodes[i]); } } return r; } //删除所有孩子结点 function removeAllChild(obj){ while(obj.childNodes.length !== 0){ obj.removeChild(obj.childNodes[0]); } } //获得最后一个孩子 function getLastChild(obj){ var x = obj.lastChild; while(x.nodeType !== 1){ x = x.previousSibling; } return x; } //获得第一个孩子 function getFirstChild(obj){ var x = obj.firstChild; while(x.nodeType !== 1){ x = x.nextSibling; } return x; } /** 在指定孩子结点后添加新结点 参数说明: obj: Dom对象 s:指定的孩子结点 c:新添加的结点 */ function insertChildAfter(obj, s, c){ obj.insertBefore(c, s.nextSibling); }
测试代码:
<script language="JavaScript">
<!--
function init(){
var rootElmt = document.getElementById("root");
var r = getChildNodes(rootElmt);
var last = getLastChild(rootElmt);
alert(last.innerHTML);
var first = getFirstChild(rootElmt);
alert(first.innerHTML);
var newElmt = document.getElementById("newElmt");
insertChildAfter(rootElmt,r[2], newElmt);
var n = getChildNodes(rootElmt);
for(var i in n){
alert(n[i].innerHTML);
}
removeAllChild(rootElmt);
alert(rootElmt.innerHTML);
}
//-->
</script>
<body οnlοad="init()">
<div id="root">
<div>A</div>
<div>
<div>BB</div>
<div>CC</div>
</div>
<div>D</div>
<div>E</div>
</div>
<div id="newElmt">N</div>
</body>
注:FireFox浏览器不支持innerText方法