JS猎取元素多层嵌套思路详解_

《JS猎取元素多层嵌套思路详解_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、JS猎取元素多层嵌套思路详解_这篇文章主要介绍了JS猎取元素多层嵌套思路详解的相关资料,需要的伴侣可以参考下假如一段html嵌套过多，在js中猎取还是比较麻烦的，我写了几套方案，大家可以参考参考，假如你有好的方法，也分享出来，让我们瞧瞧。HTML：!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title元素多层嵌套，JS猎取问题/title/headbodydivid="box"spanspan/spandivspanspan/spanahref=""span1/span/a/divdivahref=""span2/span

2、/a/divdivahref=""span3/span/a/div/div/body/html我想猎取a下面的span。思路1：先猎取它的父元素，然后通过for循环诶个猎取这个元素下面的元素，然后通过此次猎取到的元素在依次循环猎取下面的元素，直到猎取到目标元素。//猎取父元素vardBox=document.getElementById('box');//通过父元素猎取全部divvardDiv=dBox.getElementsByTagName('div');//将全部的a标签放到dArr中varaArr=[];for(vari=0;idDiv.length;i++){aA

3、rr.push(dDiv[i].getElementsByTagName('a')[0]);}//通过a标签猎取全部spanvarspanArr=[];for(vari=0;iaArr.length;i++){spanArr.push(aArr[i].getElementsByTagName('span')[0]);}console.log(spanArr);缺点：消耗性能，假如再嵌套多一点，那猎取目标元素就相当的麻烦。思路2：通过父元素，挺直猎取目标元素，但是这样做确定是有问题的，由于它会把父元素下的全部span都猎取到，我的想法是将猎取到的这些元素进行推断它的父元素是不

4、是a标签。varbox=document.getElementById('box');//猎取box下面全部的spanvarspan=box.getElementsByTagName('span');//定义一个数组保存过滤后的spanvararr=[];for(vari=0;ispan.length;i++){//诶个推断span是父元素是不是A，假如是就把它添加到arr中。if(span[i].parentNode.tagName==='A'){arr.push(span[i]);}}console.log(arr);思路1跟思路2虽然可以，但其实它们都有缺点，假如布局

5、再简单一些，可能猎取到的就不是那么精确了。假如想精确的猎取可以给每个元素添加一个class。但class的话，扫瞄器有兼容问题。突然想到了另外一个方法。思路：通过自定义属性，但是由于在js中猎取js自定义属性有兼容问题，我就用正则来推断，这个元素是否有我自定义的属性。!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title元素多层嵌套，JS猎取问题/title/headbodydivid="box"spanspan/spandivspanspan/spanahref=""spanisspan='span'1/span/a/d

6、ivdivahref=""spanisspan='span'2/span/a/divdivahref=""spanisspan='span'3/span/a/div/div/body/htmljs//猎取父元素vardBox=document.getElementById('box');//猎取全部子元素vardSpan=dBox.getElementsByTagName('span');//当前元素varstr='';//过滤后的全部span元素varspans=[];for(vari=;idSpan.length;i++){//猎取当前整个元素str=dSpan[i].

7、outerHTML;console.log(str);//推断当前这个元素是否有自定义属性if(/isspan="span"/.test(str)){//有就添加到数组中spans.push(dSpan[i]);}}console.log(spans);建议用class或者自定义属性猎取，第一和其次种方法猎取的不精确。以上所述是我给大家介绍的JS猎取元素多层嵌套的问题，盼望对大家有所关心...