DOM的常用操作（一）

最新推荐文章于 2022-02-25 18:19:43 发布

原创最新推荐文章于 2022-02-25 18:19:43 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Firefox #JavaScript #C #C++ #C# #ViewUI

//获得一个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 onload="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方法