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 Keycode对照表
Oct 24 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
jquery中键盘事件小结
Feb 24 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 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实现水仙花数的4个示例分享
2014/04/08 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript简介
2015/02/15 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python入门篇之数字
2014/10/20 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
财务管理专业推荐信
2013/11/19 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
庆七一主持词
2015/06/29 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers