如果一段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. (转)Linux下root密码丢失和运行级别错误的解决办法

    我们知道,root用户在Linux中是相当重要的,其地位如同Windows中的Adminstrator 有了root权限我们还能修改其他用户的密码,可是,如果root用户的密码丢失该怎么办? 不用担心 ...

  2. Inno setup中定制安装路径

    我的程序修改了安装界面,所以我的界面中提供了更改安装路径的方法. 用户修改后的路径会被传回inno setup脚本,脚本中需要做的事情如下: 1,写一个函数,来返回新的安装路径,如: function ...

  3. iOS进阶_动画的多种实现方式

    一.UIView动画 //UIView动画有开始beginAnimation,有结束commitAnimation    //第一步:开始UIView动画    [UIView beginAnimat ...

  4. datax+hadoop2.X兼容性调试

    以hdfsreader到hdfswriter为例进行说明: 1.datax的任务配置文件里需要指明使用的hadoop的配置文件,在datax+hadoop1.X的时候,可以直接使用hadoop1.X/ ...

  5. Software Project Management hw1

    I just want to say something about my java project that I did last year. Our task is to finish a lin ...

  6. oracle创建视图

    create or replace view view_fwaqjcjl as select T_FWAQJCJL.FWAQJCJL_ID,T_FWAQJCJL.ZCBM,T_FWAQJCJL.FWB ...

  7. FMX下Edit只能输入数字

    procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word; var KeyChar: Char; Shift: TShiftState) ...

  8. Oracle Profile 使用

    一.目的: Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制,使用Create Profile命令创建一个Profile,用它来实现对数据库资源的限制使用,如果把该prof ...

  9. smartroute简单集成集群聊天通讯

    在制定一个规模比较多大的聊天应用时,往往需要制定部署多个应用服务,其一可以保障服务的可靠性,其二可以增加用户负载量.但制定这样一种应用体系是一件复杂的事情,毕竟同一群体的用户实际上会在不同的服务器接入 ...

  10. EQueue - 详细谈一下消息持久化以及消息堆积的设计

    前言 之前写了一篇文章,总体介绍了EQueue.在看这篇文章之前如果还没看过那篇文章,可能会看不懂这篇文章.所以建议没看过的朋友务必先看一下那篇文章中所提到的各种概念,这样才能更好的理解本文所说的内容 ...