JS获取元素多层嵌套思路详解
来源: 阅读:1095 次 日期:2016-06-27 16:39:59
温馨提示: 小编为您整理了“JS获取元素多层嵌套思路详解”,方便广大网友查阅!

这篇文章主要介绍了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');

// 通过父元素获取所有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=;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获取元素多层嵌套的问题,希望对大家有所帮助

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map