实体类多层嵌套 遍历_JS获取元素多层嵌套思路详解
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧。
HTML:
元素多层嵌套,JS获取问题
span
span
1
2
3
我想获取a下面的span。
思路1:先获取它的父元素,然后通过for循环诶个获取这个元素下面的元素,然后通过此次获取到的元素在依次循环获取下面的元素,直到获取到目标元素。
// 获取父元素
var dBox = document.getElementById('box');
// 通过父元素获取所有div
var dDiv = dBox.getElementsByTagName('div');
// 将所有的a标签放到dArr中
var aArr = [];
for(var i=0;i
aArr.push(dDiv[i].getElementsByTagName('a')[0]);
}
// 通过a标签获取所有span
var spanArr = [];
for(var i=0;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是父元素是不是A,如果是就把它添加到arr中。
if(span[i].parentNode.tagName==='A'){
arr.push(span[i]);
}
}
console.log(arr);
思路1跟思路2虽然可以,但其实它们都有缺点,如果布局再复杂一些,可能获取到的就不是那么精确了。
如果想精确的获取可以给每个元素添加一个class。但class的话,浏览器有兼容问题。
突然想到了另外一个方法。
思路:通过自定义属性,但是因为在js中获取js自定义属性有兼容问题,我就用正则来判断,这个元素是否有我自定义的属性。
元素多层嵌套,JS获取问题
span
span
1
2
3
js
// 获取父元素
var dBox = document.getElementById('box');
// 获取所有子元素
var dSpan = dBox.getElementsByTagName('span');
// 当前元素
var str = '';
// 过滤后的所有span元素
var spans = [];
for(var i=;i
// 获取当前整个元素
str = dSpan[i].outerHTML;
console.log(str);
// 判断当前这个元素是否有自定义属性
if(/isspan="span"/.test(str)){
// 有就添加到数组中
spans.push(dSpan[i]);
}
}
console.log(spans);
建议用class或者自定义属性获取,第一和第二种方法获取的不精确。
以上所述是小编给大家介绍的JS获取元素多层嵌套的问题,希望对大家有所帮助,也希望大家多多支持脚本之家网站!
实体类多层嵌套 遍历_JS获取元素多层嵌套思路详解相关推荐
- 原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
- android 遍历实体类,Java中遍历实体类(处理MongoDB)
在实际过程中,经常要将实体类进行封装,尤其是处理数据库的过程中:因此,对于遍历实体类能够与数据库中的一行数据对应起来. 我是使用的环境是Spring boot,访问的数据库时MongoDB 实体类遍历 ...
- vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...
- html web form id,小程序如何获取多个formId实现详解
小程序如何获取多个formId实现详解 发布时间:2020-09-03 08:04:34 来源:脚本之家 阅读:135 作者:jANE2160 很多人使用过form和button的多层嵌套来实现点击一 ...
- 循环嵌套思路详解 | 一个“在盒子里过家家”的算法 -- 以冒泡排序与打印菱形为例
目录 前言 一.引例 -- 菱形打印 1. 题干要求 2. 如何阅读循环结构? 二."在盒子里过家家"的理解思路 1. 什么叫"在盒子里过家家"? 一个小例子 ...
- java list 元素去重_小猿圈Java开发之list按照元素某个字段去重详解
小猿圈Java老师给大家分享一篇关于如何实现Java8中list按照元素的某个字段去重的详细介绍,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,下面我们一起来看一下吧. ...
- java迭代器删除元素_java迭代器中删除元素的实例操作详解
java迭代器中删除元素的实例操作详解 2021-01-21 16:40:08 我们知道通过Iterator,可以对集合中的元素进行遍历.那么在其中遇到我们不需要的元素时,可不可以在遍历的时候顺便给删 ...
- python类继承中构造方法_第8.3节 Python类的__init__方法深入剖析:构造方法与继承详解...
第8.3节Python类的__init__方法深入剖析:构造方法与继承详解 一. 引言 上两节介绍了构造方法的语法及参数,说明了构造方法是Python的类创建实例后首先执行的方法,并说明如果类没 ...
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
最新文章
- torch量化其他功能(量化、反量化)
- 清华校友陈怡然、杨越组队进军AI芯片市场,成立苹芯科技,最新Pre-A轮斩获近千万美元...
- Java复习回顾---7月10日回顾练习
- 50个Android开发技巧(09 避免用EditText对日期进行验证)
- python怎么安装turtle_Python3.6安装turtle模块
- 程序员每天应该思考的5个问题,你有思考过吗?
- 一时冲动:“通往瓦尔哈拉之路的冒险”
- LeetCode 459. 重复的子字符串(数学)
- 切换图片 ImageSwitcher
- Alpha冲刺(2/10)——2019.4.24
- iOS高仿微信悬浮窗、忍者小猪游戏、音乐播放器、支付宝、今日头条布局滚动效果等源码...
- 记一次 GitHub 出现 ^M 符号的解决办法
- Sphere-AABB Intersecting test
- java怎么让二维数组不重复_java - 如何创建具有随机产生的,非重复数二维数组? [重复] - SO中文参考 - www.soinside.com...
- 190609每日一句,科比·布莱恩特:这就是我成功的原因,即使身陷低谷,也要抬头仰望星空
- uCos中的信号量机制
- jQuery菜鸟教程01
- 15、react 的 非受控组件 和 受控组件
- 怎么把PicPick设置成中文版?
- Vue中登录验证成功后保存token,并每次请求携带并验证token操作
热门文章
- txtv28pw河南某中学_中学生骑行典型交通事故案例集 | 知危险会避险
- mysql按字段拆分表_MYSQL命令怎么实现将表中某个字段中多个记录拆分,急求答案!...
- nodejs安装服务器系统,window下,nodejs安装http-server,并开启HTTP服务器
- 怎么保证读取最新数据_摄影师的数据存储有多难,怎么存储大量数据并保证安全高速防水防摔防尘?SanDisk...
- 基于JAVA+SpringMVC+Mybatis+MYSQL的酒店客房管理系统
- Android Studio 使用socks代理
- springboot配置文件(.yml)中自定义属性值并在controller里面获取
- 软件概要设计文档(终)
- [SCSS] Pure CSS for multiline truncation with ellipsis
- Node实战之聊天室