Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装
1. 作用:所有类选择器名为cName的标签
参数:类选择器的名(class名)返回值:所有类选择器名为cName的标签
function getClass(cName){
var arr = [];
var allTag = document.getElementsByTagName("*");
for(var i = 0; i < allTag.length; i++){
if(allTag[i].className == cName){
arr.push(allTag[i]);
}
}
return arr;
}
测试:console.log(getClass("Name"));
2. 作用:返回过滤空白文本节点和注释节点后的元素节点集合
参数1:父级节点
返回值:元素节点集合
<pre name="code" class="javascript"><pre name="code" class="javascript">function getChildNodes(element){
var arr = [];
var eList = element.childNodes;
for(var i = 0;i < eList.length;i++){
if(eList[i].nodeType == 1){//过滤空白节点
arr.push(eList[i]);
}
}
return arr;
}
调用示例:
var obj = getChildNodes(父级节点对象);
console.log(obj);
3. 作用:获取最后一个孩子节点
参数1: 父级元素对象
返回值:返回此对象的最后一个非空孩子节点
<pre name="code" class="javascript"> function getlastChild(element){
var lChild = null;
var allsubobj = element.childNodes;
for(var i=allsubobj.length-1;i >= 0;i--)
if(allsubobj[i].nodeType == 1){//过滤空白节点
lChild = allsubobj[i];
break;
}
return lChild;
4. 作用:获取第一个孩子节点
参数1: 父级元素对象
返回值:返回此对象的第一个非空孩子节点
<pre name="code" class="javascript">function getfirstChild(element){
var fChild = null;
var eList = element.childNodes;
for(var i = 0;i < eList.length;i++)
if(eList[i].nodeType == 1){//过滤空白节点
fChild = eList[i];
break;
}
return fChild;
}
5. 作用:获取下一个非空节点
参数1: 元素对象
返回值:返回此对象的下一个非空节点
<pre name="code" class="javascript">function getNextSibling(element){
var obj = element.nextSibling;
while(obj != null && obj.nodeType != 1){
obj = obj.nextSibling;
}
return obj;
}
6. 作用:获取上一个非空节点
参数1: 元素对象
返回值:返回此对象的上一个非空节点
<pre name="code" class="javascript">function getPreviousSibling(element){
var obj = element.previousSibling;
while(obj != null && obj.nodeType != 1){
obj = obj.previousSibling;
}
return obj;
}