JavaScript获取父元素下子元素节点

快乐打工仔 分类:实例代码

JavaScript获取父元素下子元素节点属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它能够获取父元素下指定的子元素节点。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
ul li{
  list-style:none;
  font-size:12px;
}
</style>
<script type="text/javascript">
function nth(parent,ele,num){
  var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[];
  for(var index= 0,len=_ele.length;index<len;index++){
    if(_ele[index].nodeType==1){
      eleArray.push(_ele[index]);
    }
  }
  if(arguments.length===2){
    if(typeof arguments[1]==="string"){
      _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1]));
      return _ele;
    }
    else if(typeof arguments[1]==="number"){
      return eleArray[arguments[1]];
    }
  }
  else{
    _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));
    return _ele[num];
  }
}
 
window.onload=function(){
  var list=document.getElementById("list");
  console.log(nth(list,"li",2).innerHTML);
  console.log(nth(list,"button",3).innerHTML)
  console.log(nth(nth(list,"li",1),"button",1).innerHTML);
  console.log(nth(nth(list,"li",1),"button"));
  console.log(nth(list,2));
}
</script>
</head>
<body>
<ul id="list">
  <li>1<button>a</button></li>
  <li>2<button>n</button><button>t</button></li>
  <p>犀牛前端部落</p>
  <li>3<button>z</button></li>
  <li>4<button>o</button></li>
  <li>5<button>n</button></li>
  <li>6<button>e</button></li>
</ul>
</body>
</html>

一.代码注释:

(1).function nth(parent,ele,num){},此方法实现获取子元素的功能,第一个参数是父元素对象,第二个参数规定要获取子元素的类型,第三个参数规定获取子元素的索引值。

(2).var _ele=Array.prototype.slice.call(parent.childNodes),将父元素的子节点存储在一个新的数组中。

(3).eleArray=[],声明一个空数组。

(4).for(var index= 0,len=_ele.length;index<len;index++){

  if(_ele[index].nodeType==1){

    eleArray.push(_ele[index]);

  }

}遍历数组,其实就是父元素的每一个子节点。

如果是元素节点,那么久将其存入eleArray数组。

(5).if(arguments.length===2){},判断是否为函数传递了两个参数。

(6).if(typeof arguments[1]==="string"){

  _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1]));

  return _ele;

},如果第二个参数的类型是字符串,那么第二个参数传递的就是元素类型,这个时候获取的是父元素下所有指定类型的元素,并存入数组,最后返回此数组。

(7).else if(typeof arguments[1]==="number"){

  return eleArray[arguments[1]];

},如果第二个参数是数字类型,那么返回的是父元素下一级子元素节点中指定索引的元素节点。

(8).else{

  _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));

  return _ele[num];

},如果传递的不是2个参数,那么就是三个参数(其他的参数不做考虑)

那么就会获取所有的父节点下所有的指定类型的后代元素,然后并返回指定索引的元素。

二.相关阅读:

(1).slice()方法参阅javascript Array slice()一章节。

(2).call()方法参阅js call()一章节。

(3).nodeType参阅js nodeType一章节。

(4).push()方法参阅javascript push()一章节。

(5).arguments对象参阅javascript arguments一章节。

JavaScript获取父元素下子元素节点,这样的场景在实际项目中还是用的比较多的,关于JavaScript获取父元素下子元素节点就介绍到这了。

回复

我来回复
  • 暂无回复内容