如果一段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. jQuery实现锚点平滑定位

    一般的锚点,就是点击一个按钮或者其他元素可以实现定位效果,当然可以使用锚点实现,但是这个不够美观,没有平滑的动画过渡效果,下面就通过代码实例介绍一下利用jquery实现平滑的定位效果. <!DO ...

  2. appframework build目录各文件之包含内容

    { "build/css/af.ui.css": [ "css/main.css", "css/appframework.css", &qu ...

  3. VC 单文档视图分割

    http://blog.csdn.net/smartwhitehorse/article/details/6707183 主要使用类:CSplitterWnd 问题:分割线的固定,需要重写CSplit ...

  4. MongoDB学习笔记-01 简介、安装

    MongoDB简介 MongoDB是一种强大.灵活.可拓展的存储方式.是一个面向文档(相当于"行"的概念)的数据库. 可拓展:通过添加服务器而增加存储量. Windows下安装 版 ...

  5. 表格里使用text-overflow后不能隐藏超出的文本的解决方法

          当把text-overflow设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,不过在表格里面使用text-overflow后依旧不能隐藏超 ...

  6. Windows phone8.1教务在线客户端

    本人是个大二学生,由于学校的教务在线一直没出windows phone的教务在线,而且本身也对wp开发感兴趣,所以就尝试着开发一下 由于没有系统的学习,只能在摸索中前进,这背后的原理很简单,可不容易实 ...

  7. position定位

    CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...

  8. 将SQL SERVER数据库改成MySql

    (www.helpqy.com) 架构在阿里云上,最先想采用SQL SERVER,想大家都是微软家族的嘛.但是发现SQL SERVER需要的配置比较高,需要的银子也比较多,最后在纠结之下换成了MySq ...

  9. ddms(基于 Express 的表单管理系统)源码学习

    ddms是基于express的一个表单管理系统,今天抽时间看了下它的代码,其实算不上源码学习,只是对它其中一些小的开发技巧做一些记录,希望以后在项目开发中能够实践下. 数据层封装 模块只对外暴露mod ...

  10. 两种include方式及filter中的dispatcher解析

    两种include方式 我自己写了一个original.jsp,另外有一个includedPage.jsp,我想在original.jsp中把includedPage.jsp引进来有两种方式: 1.& ...