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 相关文章推荐
浅谈javascript 迭代方法
Jan 21 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
php+dbfile开发小型留言本
2006/10/09 PHP
PHP VS ASP
2006/10/09 PHP
adodb与adodb_lite之比较
2006/12/31 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
python中PIL安装简单教程
2016/04/21 Python
Django如何配置mysql数据库
2018/05/04 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
python 决策树算法的实现
2020/10/09 Python
英文简历自荐信范文
2013/12/11 职场文书
课程设计心得体会
2013/12/28 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
项目采购员岗位职责
2014/04/15 职场文书
班干部演讲稿
2014/04/24 职场文书
简历自我评价模板
2015/03/11 职场文书
创业计划书之网吧
2019/10/10 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫