JS猎取元素多层嵌套思路详解_.docx

上传人:啊飒飒 文档编号:11660339 上传时间:2021-08-28 格式:DOCX 页数:7 大小:13.11KB
返回 下载 相关 举报
JS猎取元素多层嵌套思路详解_.docx_第1页
第1页 / 共7页
JS猎取元素多层嵌套思路详解_.docx_第2页
第2页 / 共7页
JS猎取元素多层嵌套思路详解_.docx_第3页
第3页 / 共7页
JS猎取元素多层嵌套思路详解_.docx_第4页
第4页 / 共7页
JS猎取元素多层嵌套思路详解_.docx_第5页
第5页 / 共7页
亲,该文档总共7页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

《JS猎取元素多层嵌套思路详解_.docx》由会员分享,可在线阅读,更多相关《JS猎取元素多层嵌套思路详解_.docx(7页珍藏版)》请在三一文库上搜索。

1、JS猎取元素多层嵌套思路详解_ 这篇文章主要介绍了JS猎取元素多层嵌套思路详解的相关资料,需要的伴侣可以参考下 假如一段html嵌套过多,在js中猎取还是比较麻烦的,我写了几套方案,大家可以参考参考,假如你有好的方法,也分享出来,让我们瞧瞧。 HTML: !DOCTYPE html html lang=en head meta charset=UTF-8 title元素多层嵌套,JS猎取问题/title /head body div id=box spanspan/span div spanspan/span a href= span1/span /a /div div a href= spa

2、n2/span /a /div div a href= span3/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

3、dDiv.length;i+) aArr.push(dDivi.getElementsByTagName(a)0); / 通过a标签猎取全部span var spanArr = ; for(var i=0;iaArr.length;i+) spanArr.push(aArri.getElementsByTagName(span)0); console.log(spanArr); 缺点:消耗性能,假如再嵌套多一点,那猎取目标元素就相当的麻烦。 思路2:通过父元素,挺直猎取目标元素,但是这样做确定是有问题的,由于它会把父元素下的全部span都猎取到,我的想法是将猎取到的这些元素进行推断它的父元素是

4、不是a标签。 var box = document.getElementById(box); / 猎取box下面全部的span var span = box.getElementsByTagName(span); / 定义一个数组保存过滤后的span var arr = ; for(var i=0;ispan.length;i+) / 诶个推断span是父元素是不是A,假如是就把它添加到arr中。 if(spani.parentNode.tagName=A) arr.push(spani); console.log(arr); 思路1跟思路2虽然可以,但其实它们都有缺点,假如布局再简单一些,可

5、能猎取到的就不是那么精确了。 假如想精确的猎取可以给每个元素添加一个class。但class的话,扫瞄器有兼容问题。 突然想到了另外一个方法。 思路:通过自定义属性,但是由于在js中猎取js自定义属性有兼容问题,我就用正则来推断,这个元素是否有我自定义的属性。 !DOCTYPE html html lang=en head meta charset=UTF-8 title元素多层嵌套,JS猎取问题/title /head body div id=box spanspan/span div spanspan/span a href= span isspan=span1/span /a /div

6、div a href= span isspan=span2/span /a /div div a href= span isspan=span3/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=;idSpan.length;i+) / 猎取当前整个元素 str = dSpani.outerHTML; console.log(str); / 推断当前这个元素是否有自定义属性 if(/isspan=span/.test(str) / 有就添加到数组中 spans.push(dSpani); console.log(spans); 建议用class或者自定义属性猎取,第一和其次种方法猎取的不精确。 以上所述是我给大家介绍的JS猎取元素多层嵌套的问题,盼望对大家有所关心 .

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 科普知识


经营许可证编号:宁ICP备18001539号-1