如果一段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');// 通過父元素獲取所有divvar dDiv = dBox.getElementsByTagName('div');// 將所有的a標簽放到dArr中var aArr = [];for(var i=0;i<dDiv.length;i++){aArr.push(dDiv[i].getElementsByTagName('a')[0]);}// 通過a標簽獲取所有spanvar 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下面所有的spanvar span = box.getElementsByTagName('span');// 定義一個數組保存過濾后的spanvar 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獲取元素多層嵌套的問題，希望對大家有所幫助，也希望大家多多支持武林網網站！
新聞熱點
疑難解答
