如果一段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获取元素多层嵌套的问题,希望对大家有所帮助,也希望大家多多支持网站!

标签:
js多层嵌套,js获取元素

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JS获取元素多层嵌套思路详解”

暂无“JS获取元素多层嵌套思路详解”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。