javascript选取元素子节点的方法--getChildElements
2011-09-08 17:19:18
1075
/*
作者：珠峰培训 http://www.zhufengpeixun.cn
此方法用于获取某个元素下的元素子节点
可以传两个参数，第一个参数ele是被操作的那个父元素，就是获取ele这个DOM元素下子元素节点
第二个参数可选，表示指定的标记名，只取某种标记名的子元素
*/
function getChildElements(ele,tagName){//获取ele对象的元素子节点
if(!(ele&&ele.nodeType&&ele.nodeType===1))//传进来的对象是一个元素类型的DOM节点才行，否则退出
return false
var child=ele.firstChild;//从第一个节点开始判断
var a=[]
if(tagName){//参数是可选的，如果第二个参数传进来了
while(child){
if(child.nodeType==1&&child.tagName.toLowerCase()==tagName.toLowerCase()){
a.push(child);
}
child=child.nextSibling;//判断完这个节点就判断下一个节点
}
}else{//如果第二个参数没有传
while(child){
if(child.nodeType==1){
a.push(child);
}
child=child.nextSibling;
}
}
return a//最后别忘把此数组返回
}
以下是示例文件：（把以下内容存成HTML文件即可正常运行）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>课堂示例-JS取得元素子节点方法-珠峰培训</title>
</head>
<body>4
<div>3
<h1 class="a b c">2</h1>
<div id="p1">
<div class="a">1</div>
<div class="b c a">1</div>
<div class="aa b c">1</div>
<p>aa</p>
<span class="a">ssss</span>
<span>ssss</span>
</div>
<h2 class="b a d">H2</h2>
<a href="http://www.zhufengpeixun.cn">珠峰培训</a>
</div>
</body>
</html>
<student></student>
<script type="text/ecmascript">
/*
作者：珠峰培训 http://www.zhufengpeixun.cn
此方法用于获取某个元素下的元素子节点
可以传两个参数，第一个参数ele是被操作的那个父元素，就是获取ele这个DOM元素下子元素节点
第二个参数可选，表示指定的标记名，只取某种标记名的子元素
*/
function getChildElements(ele,tagName){//获取ele对象的元素子节点
if(!(ele&&ele.nodeType&&ele.nodeType===1))//传进来的对象是一个元素类型的DOM节点才行，否则退出
return false
var child=ele.firstChild;//从第一个节点开始判断
var a=[]
if(tagName){//参数是可选的，如果第二个参数传进来了
while(child){
if(child.nodeType==1&&child.tagName.toLowerCase()==tagName.toLowerCase()){
a.push(child);
}
child=child.nextSibling;//判断完这个节点就判断下一个节点
}
}else{//如果第二个参数没有传
while(child){
if(child.nodeType==1){
a.push(child);
}
child=child.nextSibling;
}
}
return a//最后别忘把此数组返回
}
var ele=document.getElementById('p1');
var a=getChildElements(ele,'span');//获取获取id为p1的这个元素标记名为span的子元素
alert(a);
</script>
