如果一段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. Ubuntu下使用USB串口

    Ubuntu本身一般都带了USB转串口的驱动. 1. 首先确认系统支持USBSerial,输入以下命令:      lsmod | grep usbserial 2. 接上USB串口线,看看系统是否可 ...

  2. 在已有 Xcode 项目中 加入Cordova框架

    转自:http://www.jianshu.com/p/656838ae92bc 我们知道,在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但 ...

  3. [转]mysql drop、truncate和delete比较

    一.drop table tb drop将表格直接删除,没有办法找回. 立刻释放磁盘空间 ,不管是 Innodb和MyISAM . 二.truncate (table) tb 该命令可以清空一个表里的 ...

  4. MJExtension笔记(一)

    之前有说,看好的编程就去敲好的开源项目:一直觉得这个无从下手,但是这次跟着一点点敲MJExtension,我明白了这句话的深度:其实并不需要去找,每一个三方项目都有很多值得学习的地方:笔记一只记录在敲 ...

  5. Maltab命令（随用随更新）

    1.eval() ------ 将括号内的字符串视为语句并运行 比如eval('y1=sin(2)')和语句y1=sin(2)等价 多在循环中使用,可以对多个名字有规则的变量或文件进行操作,比如 fo ...

  6. 《理解 ES6》阅读整理：函数（Functions）（六）Purpose of Functions

    明确函数的双重作用(Clarifying the Dual Purpose of Functions) 在ES5及更早的ES版本中,函数调用时是否使用new会有不同的作用.当使用new时,函数内的th ...

  7. STM32的DMA

    什么是DMA?其全称是:Direct Memory Access:根据ST公司提供的相关信息,DMA是STM32中一个独立与Cortex-M3内核的模块,有点类似与ADC.PWM.TIMER等模块:主 ...

  8. Java开发视频网站大概需要多少钱？

    这个还真不好说,需要看你对视频网站有什么要求?你的数据库选择的是什么型号的?需要开发几个页面?服务器是需要高端的还是中低端的?还有你对完成时间有什么要求,这些细节也是决定价格的关键因素. 上面这些因素 ...

  9. [ASE]sprint2 总结 & sprint3计划

    第二个sprint半圆满的结束了, 经历了四周之后我们将整个的框架搭建好,并且能够正常的游戏对战,破坏场景,聊天…… 但是正如老师所述,缺乏亮点. 不过大家都是第一次做,完全把他当成一个工程来一点一点 ...

  10. vs的dll引用机制

    vs2012编译的时候,遇到一个问题就是项目A中运行时缺失dll的问题,项目A引用类库B,类库B引用了x,y等dll,编译A项目的时候,出现x没拷贝到bin 目录. 通过跟踪编译输出发现,x没拷贝的原 ...