快捷導(dǎo)航

JS獲取元素多層嵌套思路詳解

更新時(shí)間：2016年05月16日 13:56:02 作者：追夢(mèng)子

這篇文章主要介紹了JS獲取元素多層嵌套思路詳解的相關(guān)資料,需要的朋友可以參考下

如果一段html嵌套過(guò)多，在js中獲取還是比較麻煩的，我寫了幾套方案，大家可以參考參考，如果你有好的方法，也分享出來(lái)，讓我們瞧瞧。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素多層嵌套，JS獲取問(wèn)題</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：先獲取它的父元素，然后通過(guò)for循環(huán)誒個(gè)獲取這個(gè)元素下面的元素，然后通過(guò)此次獲取到的元素在依次循環(huán)獲取下面的元素，直到獲取到目標(biāo)元素。

// 獲取父元素
var dBox = document.getElementById('box');
// 通過(guò)父元素獲取所有div
var dDiv = dBox.getElementsByTagName('div');
// 將所有的a標(biāo)簽放到dArr中
var aArr = [];
for(var i=0;i<dDiv.length;i++){
aArr.push(dDiv[i].getElementsByTagName('a')[0]);
}
// 通過(guò)a標(biāo)簽獲取所有span
var spanArr = [];
for(var i=0;i<aArr.length;i++){
spanArr.push(aArr[i].getElementsByTagName('span')[0]);
}
console.log(spanArr);

缺點(diǎn)：消耗性能，如果再嵌套多一點(diǎn)，那獲取目標(biāo)元素就相當(dāng)?shù)穆闊?br />

思路2：通過(guò)父元素，直接獲取目標(biāo)元素，但是這樣做肯定是有問(wèn)題的，因?yàn)樗鼤?huì)把父元素下的所有span都獲取到，我的想法是將獲取到的這些元素進(jìn)行判斷它的父元素是不是a標(biāo)簽。

var box = document.getElementById('box');
// 獲取box下面所有的span
var span = box.getElementsByTagName('span');
// 定義一個(gè)數(shù)組保存過(guò)濾后的span
var arr = [];
for(var i=0;i<span.length;i++){
// 誒個(gè)判斷span是父元素是不是A，如果是就把它添加到arr中。
if(span[i].parentNode.tagName==='A'){
arr.push(span[i]);
}
}
console.log(arr);

思路1跟思路2雖然可以，但其實(shí)它們都有缺點(diǎn)，如果布局再?gòu)?fù)雜一些，可能獲取到的就不是那么精確了。

如果想精確的獲取可以給每個(gè)元素添加一個(gè)class。但class的話，瀏覽器有兼容問(wèn)題。

突然想到了另外一個(gè)方法。

思路：通過(guò)自定義屬性，但是因?yàn)樵趈s中獲取js自定義屬性有兼容問(wèn)題，我就用正則來(lái)判斷，這個(gè)元素是否有我自定義的屬性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素多層嵌套，JS獲取問(wèn)題</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');
// 當(dāng)前元素
var str = '';
// 過(guò)濾后的所有span元素
var spans = [];
for(var i=;i<dSpan.length;i++){
// 獲取當(dāng)前整個(gè)元素
str = dSpan[i].outerHTML;
console.log(str);
// 判斷當(dāng)前這個(gè)元素是否有自定義屬性
if(/isspan="span"/.test(str)){
// 有就添加到數(shù)組中
spans.push(dSpan[i]);
}
}
console.log(spans);

建議用class或者自定義屬性獲取，第一和第二種方法獲取的不精確。

以上所述是小編給大家介紹的JS獲取元素多層嵌套的問(wèn)題，希望對(duì)大家有所幫助，也希望大家多多支持腳本之家網(wǎng)站！

您可能感興趣的文章: