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

元素多层嵌套，JS获取问题的更多相关文章

  1. iframe多层嵌套时获取元素总结

    父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; ( ...

  2. 2014-10-28——iframe多层嵌套时获取元素总结

    同域: 父页面获取子页面元素: 注意:onload事件 jQuery获取:$("iframe").contents().find("holder")...... ...

  3. iframe多层嵌套时获取元素

    一.同域:1.父页面获取子页面元素:注意:onload事件jQuery获取:$("iframe").contents().find("holder")..... ...

  4. JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...

  5. 当一个页面中有多个form表单并且有重名的元素时，js获取指定form表单中的指定元素

    有时候我们会在一个页面中写了多个form表单,碰巧多个form表单中又有相同名称的元素,而我们又不想改名字,这个时候就能用到 $("#form1 #div1").val() 好玩吧 ...

  6. 隐藏元素的宽高无法通过原生js获取的问题

    1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...

  7. js获取上、下级html元素 js删除html元素方法

    js获取下级html元素:htmlEle.childNode; js获取上级html元素:htmlEle.parentNode; js删除当前html元素: htmlEle.removeNode(tr ...

  8. js解析多层嵌套的json，取出所有父元素属性和遍历所有子元素

    已知一个多层嵌套的json,取出所有父元素和子元素的id值 思路:因为不知道到底嵌套了多少层,递归有可能造成栈溢出.查询时间特别久的问题 所以先查询一次,判断是否有子节点,如果有,取出子节点并到父节点 ...

  9. iframe多层嵌套时,Jquery获取元素

    在项目中,尤其是后台管理项目,会使用到iframe嵌套的网页,说起iframe,真的是个让人头疼的东西,能避开是最好避开.不然要请随身备好氧气瓶哈(因为管理和调试过程中往往会被气缺氧!!!哈哈哈~~~ ...

随机推荐

  1. JDBC Boilerplate

    public class Student{ private Integer studId; private String name; private String email; private Dat ...

  2. Unity : Ran out of trampolines of type 2

    Unity 导出游戏到 iOS 平台,当时选择的设置是 mono2x, 结果游戏各种莫名其妙的崩溃,再崩溃, 几乎运行不到一分钟就崩溃,而在 editor 和 android 平台都是正常的. 查看出 ...

  3. c++ 时间类型详解 time_t

    Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00 ...

  4. android wifi SWOL低功耗模式

    1 睡眠模式RX代码流程 ar_wal_rx_patch.c::patch_rx_process_recv_status//调用rx_ctxt->data_ind_handler -> d ...

  5. NTP服务配置

    一.NTP简介 在计算机的世界里,时间非常地重要,例如对于火箭发射这种科研活动,对时间的统一性和准确性要求就非常地高,是按照A这台计算机的时间,还是按照B这台计算机的时间?NTP就是用来解决这个问题的 ...

  6. ORACLE10g创建表空间，角色与授权

    创建基础表空间,创建用户,授权. -- CREATE TABLESPACE CREATE TABLESPACE TS_JK_LAB_BASIC DATAFILE 'D:\TOOLS\ORACLE\PR ...

  7. note of introduction of Algorithms(Lecture 3 - Part1)

    Lecture 3(part 1) Divide and conquer 1. the general paradim of algrithm as bellow: 1. divide the pro ...

  8. DNS拾遗（二）

    MX Record补充 MX记录有优先级的概念,数字越小表示优先级越高.所以一个域可以配置多个不同优先级的MX记录,如果邮件通过第一优先级记录无法递送,则采用第二优先级,以此类推. TXT Recor ...

  9. [ZigBee] 9、ZigBee之AD剖析——AD采集CC2530温度串口显示

    1.ADC 简介 ADC 支持多达14 位的模拟数字转换,具有多达12 位有效数字位.它包括一个模拟多路转换器,具有多达8 个各自可配置的通道:以及一个参考电压发生器.转换结果通过DMA 写入存储器. ...

  10. JavaScript 正则表达式上——基本语法

    定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...