JS獲取元素多層嵌套思路詳解
來源:易賢網(wǎng) 閱讀:1139 次 日期:2016-06-27 16:39:59
溫馨提示:易賢網(wǎng)小編為您整理了“JS獲取元素多層嵌套思路詳解”,方便廣大網(wǎng)友查閱!

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

如果一段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循環(huán)誒個獲取這個元素下面的元素,然后通過此次獲取到的元素在依次循環(huán)獲取下面的元素,直到獲取到目標元素。

// 獲取父元素

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);

缺點:消耗性能,如果再嵌套多一點,那獲取目標元素就相當?shù)穆闊?/P>

思路2:通過父元素,直接獲取目標元素,但是這樣做肯定是有問題的,因為它會把父元素下的所有span都獲取到,我的想法是將獲取到的這些元素進行判斷它的父元素是不是a標簽。

var box = document.getElementById('box');

// 獲取box下面所有的span

var span = box.getElementsByTagName('span');

// 定義一個數(shù)組保存過濾后的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)){

// 有就添加到數(shù)組中

spans.push(dSpan[i]);

}

}

console.log(spans);

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

以上所述是小編給大家介紹的JS獲取元素多層嵌套的問題,希望對大家有所幫助

更多信息請查看網(wǎng)絡編程
易賢網(wǎng)手機網(wǎng)站地址:JS獲取元素多層嵌套思路詳解

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網(wǎng)