JS获取元素多层嵌套思路详解
如果一段html嵌套过多，在js中获取还是比较麻烦的，我写了几套方案，大家可以参考参考，如果你有好的方法，也分享出来，让我们瞧瞧。
HTML：
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>元素多层嵌套，JS获取问题</title> </head> <body> <divid="box"> <span>span</span> <div> <span>span</span> <ahref=""> <span>1</span> </a> </div> <div> <ahref=""> <span>2</span> </a> </div> <div> <ahref=""> <span>3</span> </a> </div> </div> </body> </html>
我想获取a下面的span。
思路1：先获取它的父元素，然后通过for循环诶个获取这个元素下面的元素，然后通过此次获取到的元素在依次循环获取下面的元素，直到获取到目标元素。
//获取父元素
vardBox=document.getElementById('box');
//通过父元素获取所有div
vardDiv=dBox.getElementsByTagName('div');
//将所有的a标签放到dArr中
varaArr=[];
for(vari=0;i<dDiv.length;i++){
aArr.push(dDiv[i].getElementsByTagName('a')[0]);
}
//通过a标签获取所有span
varspanArr=[];
for(vari=0;i<aArr.length;i++){
spanArr.push(aArr[i].getElementsByTagName('span')[0]);
}
console.log(spanArr);
缺点：消耗性能，如果再嵌套多一点，那获取目标元素就相当的麻烦。
思路2：通过父元素，直接获取目标元素，但是这样做肯定是有问题的，因为它会把父元素下的所有span都获取到，我的想法是将获取到的这些元素进行判断它的父元素是不是a标签。
varbox=document.getElementById('box');
//获取box下面所有的span
varspan=box.getElementsByTagName('span');
//定义一个数组保存过滤后的span
vararr=[];
for(vari=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自定义属性有兼容问题，我就用正则来判断，这个元素是否有我自定义的属性。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>元素多层嵌套，JS获取问题</title> </head> <body> <divid="box"> <span>span</span> <div> <span>span</span> <ahref=""> <spanisspan='span'>1</span> </a> </div> <div> <ahref=""> <spanisspan='span'>2</span> </a> </div> <div> <ahref=""> <spanisspan='span'>3</span> </a> </div> </div> </body> </html>
js
//获取父元素
vardBox=document.getElementById('box');
//获取所有子元素
vardSpan=dBox.getElementsByTagName('span');
//当前元素
varstr='';
//过滤后的所有span元素
varspans=[];
for(vari=;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获取元素多层嵌套的问题，希望对大家有所帮助，也希望大家多多支持毛票票网站！