元素多层嵌套，JS获取问题

最新推荐文章于 2023-03-27 18:11:25 发布

weixin_34049032

最新推荐文章于 2023-03-27 18:11:25 发布

阅读量195

点赞数

如果一段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>

    // 获取父元素
    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或者自定义属性获取，第一和第二种方法获取的不精确。

weixin_34049032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素多层嵌套，JS获取问题

如果一段html嵌套过多，在js中获取还是比较麻烦的，我写了几套方案，大家可以参考参考，如果你有好的方法，也分享出来，让我们瞧瞧。HTML：　　&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;元素多层
复制链接

扫一扫