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

HTML：

　　

    
             
     
        
      span        
      
            
       span            
                       1                    
      
        
      
            
                       2                    
      
        
      
            
                       3                    
      
    
     

我想获取a下面的span。

 

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

// 获取父元素    var dBox = document.getElementById('box');    // 通过父元素获取所有div    var dDiv = dBox.getElementsByTagName('div');    // 将所有的a标签放到dArr中    var aArr = [];    for(var i=0;i

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

 

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

var box = document.getElementById('box');  // 获取box下面所有的span  var span = box.getElementsByTagName('span');  // 定义一个数组保存过滤后的span  var arr = [];  for(var i=0;i

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

 

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

 

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

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

    
             
     
        
      span        
      
            
       span            
                       1                    
      
        
      
            
                       2                    
      
        
      
            
                       3                    
      
    
     

js

// 获取父元素    var dBox = document.getElementById('box');    // 获取所有子元素    var dSpan = dBox.getElementsByTagName('span');    // 当前元素    var str = '';    // 过滤后的所有span元素    var spans = [];    for(var i=0;i

 

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