JS获取元素多层嵌套思路详解


Posted in Javascript onMay 16, 2016

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

Javascript 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 #Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 #Javascript
在javascript中创建对象的各种模式解析
May 16 #Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 #Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 #Javascript
Javascript基础教程之比较null和undefined值
May 16 #Javascript
javascript对象的相关操作小结
May 16 #Javascript
You might like
百度实时推送api接口应用示例
2014/10/21 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
es6数值的扩展方法
2019/03/11 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python的一些用法分享
2012/10/07 Python
Python help()函数用法详解
2014/03/11 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python 字符串池化的前提
2020/07/03 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
单位门卫岗位职责
2013/12/20 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
个人总结与自我评价
2014/09/18 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript