javascript选取元素子节点的方法--getChildElements

作者:日期:2011-09-08 17:19:18 点击:991

 /*

作者:珠峰培训  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>

上一篇: javascript用类名获得元素的方法-getElementsByClassName

下一篇: html元素放大缩小的示例-javaScript示例