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

如果一段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');// 通过父元素获取所有divvar dDiv = dBox.getElementsByTagName('div');// 将所有的a标签放到dArr中var aArr = [];for(var i=0;i<dDiv.length;i++){aArr.push(dDiv[i].getElementsByTagName('a')[0]);}// 通过a标签获取所有spanvar 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下面所有的spanvar span = box.getElementsByTagName('span');// 定义一个数组保存过滤后的spanvar 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或者自定义属性获取，第一和第二种方法获取的不精确。

元素多层嵌套，JS获取问题相关推荐

实体类多层嵌套遍历_JS获取元素多层嵌套思路详解
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: 元素多层嵌套,JS获取问题 span span 1 2 ...
iframe多层嵌套时获取元素总结
父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; ( ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
class 原生js获取父元素_原生js获取class
//使用原生js时,通过class名称就可以得到相应的class名称标签组封装的函数 //定义一个函数getClass(oParent,aClass); function getClass(oPare ...
js获取父级html元素,js获取当前元素所有子级元素的（js获取父级元素下面的所有子元素）...
以ul,li为例,获取ul下所有li标签一号二号三号四号 let a=document.getElementById('nav').children //获取ul下的所有子级 consol ...
class 原生js获取父元素_JS获取节点的兄弟,父级,子级元素的方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素原生的J ...
通过原生js获取dom元素的九种方式
获取dom元素 <body><!-- <div id="box">我是一个DIV</div><p class="item& ...
js遍历多层嵌套对象存在的JSO数据
js获取含有多层嵌套对象的JSON数据,主要应用迭代的思想. 该案例需要获取jsonData中的所有属性值. <!DOCTYPE> <html> <head>< ...
js遍历树，多层嵌套for循环，递归
js遍历树,多层嵌套for循环,递归一.目的源数据示例二.如何获得数据多层for循环嵌套遍历树数据递归遍历树数据一.目的遍历获取树数据中的部分数据. 源数据示例 menuType=2的数 ...

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

元素多层嵌套，JS获取问题相关推荐

最新文章

热门文章