資訊專欄INFORMATION COLUMN
摘要：常見的獲取元素的方法有種，分別是通過元素通過標(biāo)簽名字和通過類名字來獲取。其使用的方法如下是元素對應(yīng)的該方法兼容主流瀏覽器，甚至包括，可以大膽使用。除了通過指定標(biāo)簽獲取元素外，還提供了方法來獲取指定名的元素。
常見的獲取元素的方法有3種，分別是通過元素ID、通過標(biāo)簽名字和通過類名字來獲取。
getElementByIdDOM提供了一個(gè)名為getElementById的方法，這個(gè)方法將返回一個(gè)與之對應(yīng)id屬性的節(jié)點(diǎn)對象。使用的時(shí)候請注意區(qū)分大小寫。
它是document對象特有的函數(shù)，只能通過其來調(diào)用該方法。其使用的方法如下：
document.getElementById("demo") //demo是元素對應(yīng)的ID
該方法兼容主流瀏覽器，甚至包括IE6+，可以大膽使用。
getElementsByTagName該方法返回一個(gè)對象數(shù)組（準(zhǔn)確的說是HTMLCollection集合，它不是真正意義上的數(shù)組），每個(gè)對象分別對應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素。類似于getElementById,同樣，該方法只提供一個(gè)參數(shù)，它的參數(shù)是指定標(biāo)簽的名字，示例代碼如下：
document.getElementsByTagname("li") //li是標(biāo)簽的名字
需要注意的是，該方法除了能被document對象調(diào)用之外，還可以被普通的元素調(diào)用。示例如下：
var demo = document.getElementById("demo");
var lis = demo.getElementsByTagname("li");
同樣，該方法兼容主流瀏覽器，甚至包括IE6+，可以大膽使用。
getElementsByClassName除了通過指定標(biāo)簽獲取元素外，DOM還提供了getElementsByClassName方法來獲取指定class名的元素。不過由于該方法比較新，較老的瀏覽器還不支持，比如IE6。不過我們可以通過hack方式來彌補(bǔ)老瀏覽器缺陷。該方法調(diào)用的方式如下所示：
document.getElementsByClassName("demo") //demo為元素指定的class名
和getElementsByTagname一樣， 該方法除了能被document對象調(diào)用之外，還可以被普通的元素調(diào)用。
對于比較老的瀏覽器，比如IE6、7我們可以通過下面的hack方式來實(shí)現(xiàn)：
function getElementsByClassName(node,classname){
if(node.getElementsByClassName) {
return node.getElementsByClassName(classname);
}else {
var results = [];
var elems = node.getElementsByTagName("*");
for(var i = 0; i < elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
如果你想獲取極致的性能，可以參考這便文章：The ultimate getElementsByClassName, anno 2008
拓展如果你不僅僅滿足上面那些元素選擇的方法，想和JQuery一樣，能通過選擇器來獲取元素，實(shí)現(xiàn)的方法和上面的getElementsByClassName差不多，如果有興趣自己可以實(shí)現(xiàn)一套選擇器。不過我覺得有上面的三個(gè)方法再結(jié)合事件冒泡，已經(jīng)夠用了，畢竟這三種性能上算是優(yōu)秀的。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85536.html
摘要：前言本篇文章以介紹常見的節(jié)點(diǎn)知識(shí)元素操作方法為目的，其中也對一些比較容易忽略的問題進(jìn)行簡要說明。此外，還有一些方式可以獲得相關(guān)的元素節(jié)點(diǎn)。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。 前言 本篇文章以介紹常見的DOM節(jié)點(diǎn)知識(shí)、DOM元素操作方法為目的，其中也對一些比較容易忽略的問題進(jìn)行簡要說明。才疏學(xué)淺，如有紕漏之處或建議歡迎留下評(píng)論。 Node節(jié)點(diǎn) 首先，簡單看看Node...
摘要：這是因?yàn)槲覀冊L問了數(shù)組中不存在的數(shù)組元素它超過了最后一個(gè)實(shí)際分配到內(nèi)存的數(shù)組元素字節(jié)，并且有可能會(huì)讀取或者覆寫的位。包含個(gè)元素的新數(shù)組由和數(shù)組元素所組成中的內(nèi)存使用中使用分配的內(nèi)存主要指的是內(nèi)存讀寫。 原文請查閱這里，本文有進(jìn)行刪減，文后增了些經(jīng)驗(yàn)總結(jié)。 本系列持續(xù)更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第三章。 我們將會(huì)討論日常使用中另一個(gè)被開發(fā)...
摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級(jí)表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來探索HTML表單樣式的那...
摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級(jí)表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來探索HTML表單樣式的那...
閱讀 3632·2023-04-25 23:32
閱讀 2047·2019-08-30 15:55
閱讀 2660·2019-08-30 15:52
閱讀 3119·2019-08-30 10:54
閱讀 847·2019-08-29 16:16
閱讀 656·2019-08-29 15:09
閱讀 3661·2019-08-26 14:05
閱讀 1641·2019-08-26 13:22
