DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS獲取元素多層嵌套思路詳解
JS獲取元素多層嵌套思路詳解
編輯:關於JavaScript     

如果一段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');
// 通過父元素獲取所有div
var dDiv = dBox.getElementsByTagName('div');
// 將所有的a標簽放到dArr中
var aArr = [];
for(var i=0;i<dDiv.length;i++){
aArr.push(dDiv[i].getElementsByTagName('a')[0]);
}
// 通過a標簽獲取所有span
var 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下面所有的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獲取元素多層嵌套的問題,希望對大家有所幫助,也希望大家多多支持網站!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved