这篇文章主要介绍了 JS 获取元素多层嵌套思路详解的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
如果一段 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 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 获取元素多层嵌套的问题,希望对大家有所帮助,也希望大家多多支持 phperz 网站!
来源: http://www.phperz.com/article/17/0301/265740.html