你的位置:首页 > Java教程

[Java教程]元素多层嵌套,JS获取问题


如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧。

HTML:

  

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>元素多层嵌套,JS获取问题</title></head><body>  <div id="box">    <span>span</span>    <div>      <span>span</span>      <a href="">        <span>1</span>      </a>    </div>    <div>      <a href="">        <span>2</span>      </a>    </div>    <div>      <a href="">        <span>3</span>      </a>    </div>  </div></body></html>

我想获取a下面的span。

 

思路1:先获取它的父元素,然后通过for循环诶个获取这个元素下面的元素,然后通过此次获取到的元素在依次循环获取下面的元素,直到获取到目标元素。

  // 获取父元素  var dBox = document.getElementById('box');  // 通过父元素获取所有div  var dDiv = dBox.getElementsByTagName('div');  // 将所有的a标签放到dArr中  var aArr = [];  for(var i=0;i<dDiv.length;i++){    aArr.push(dDiv[i].getElementsByTagName('a')[0]);  }  // 通过a标签获取所有span  var spanArr = [];  for(var i=0;i<aArr.length;i++){    spanArr.push(aArr[i].getElementsByTagName('span')[0]);  }  console.log(spanArr);  

缺点:消耗性能,如果再嵌套多一点,那获取目标元素就相当的麻烦。

 

思路2:通过父元素,直接获取目标元素,但是这样做肯定是有问题的,因为它会把父元素下的所有span都获取到,我的想法是将获取到的这些元素进行判断它的父元素是不是a标签。

 var box = document.getElementById('box'); // 获取box下面所有的span var span = box.getElementsByTagName('span'); // 定义一个数组保存过滤后的span var arr = []; for(var i=0;i<span.length;i++){  // 诶个判断span是父元素是不是A,如果是就把它添加到arr中。  if(span[i].parentNode.tagName==='A'){   arr.push(span[i]);  } } console.log(arr);

思路1跟思路2虽然可以,但其实它们都有缺点,如果布局再复杂一些,可能获取到的就不是那么精确了。

 

如果想精确的获取可以给每个元素添加一个class。但class的话,浏览器有兼容问题。

 

突然想到了另外一个方法。

思路:通过自定义属性,但是因为在js中获取js自定义属性有兼容问题,我就用正则来判断,这个元素是否有我自定义的属性。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>元素多层嵌套,JS获取问题</title></head><body>  <div id="box">    <span>span</span>    <div>      <span>span</span>      <a href="">        <span isspan='span'>1</span>      </a>    </div>    <div>      <a href="">        <span isspan='span'>2</span>      </a>    </div>    <div>      <a href="">        <span isspan='span'>3</span>      </a>    </div>  </div></body></html>

js

  // 获取父元素  var dBox = document.getElementById('box');  // 获取所有子元素  var dSpan = dBox.getElementsByTagName('span');  // 当前元素  var str = '';  // 过滤后的所有span元素  var spans = [];  for(var i=0;i<dSpan.length;i++){    // 获取当前整个元素    str = dSpan[i].outerHTML;    console.log(str);    // 判断当前这个元素是否有自定义属性    if(/isspan="span"/.test(str)){      // 有就添加到数组中      spans.push(dSpan[i]);    }  }  console.log(spans);

 

建议用class或者自定义属性获取,第一和第二种方法获取的不精确。