JavaScript中常見獲取元素的方法及其拓展

xiongzenghui 發布于2019-08-21 10:26 / 919人閱讀

摘要：常見的獲取元素的方法有種，分別是通過元素通過標簽名字和通過類名字來獲取。其使用的方法如下是元素對應的該方法兼容主流瀏覽器，甚至包括，可以大膽使用。除了通過指定標簽獲取元素外，還提供了方法來獲取指定名的元素。

常見的獲取元素的方法有3種，分別是通過元素ID、通過標簽名字和通過類名字來獲取。

getElementById

DOM提供了一個名為getElementById的方法，這個方法將返回一個與之對應id屬性的節點對象。使用的時候請注意區分大小寫。

它是document對象特有的函數，只能通過其來調用該方法。其使用的方法如下：

document.getElementById("demo") //demo是元素對應的ID

該方法兼容主流瀏覽器，甚至包括IE6+，可以大膽使用。

getElementsByTagName

該方法返回一個對象數組（準確的說是HTMLCollection集合，它不是真正意義上的數組），每個對象分別對應著文檔里有著給定標簽的一個元素。類似于getElementById,同樣，該方法只提供一個參數，它的參數是指定標簽的名字，示例代碼如下：

document.getElementsByTagname("li")  //li是標簽的名字

需要注意的是，該方法除了能被document對象調用之外，還可以被普通的元素調用。示例如下：

var demo = document.getElementById("demo");
var lis = demo.getElementsByTagname("li");

同樣，該方法兼容主流瀏覽器，甚至包括IE6+，可以大膽使用。

getElementsByClassName

除了通過指定標簽獲取元素外，DOM還提供了getElementsByClassName方法來獲取指定class名的元素。不過由于該方法比較新，較老的瀏覽器還不支持，比如IE6。不過我們可以通過hack方式來彌補老瀏覽器缺陷。該方法調用的方式如下所示：

document.getElementsByClassName("demo")    //demo為元素指定的class名

和getElementsByTagname一樣，該方法除了能被document對象調用之外，還可以被普通的元素調用。

對于比較老的瀏覽器，比如IE6、7我們可以通過下面的hack方式來實現：

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一樣，能通過選擇器來獲取元素，實現的方法和上面的getElementsByClassName差不多，如果有興趣自己可以實現一套選擇器。不過我覺得有上面的三個方法再結合事件冒泡，已經夠用了，畢竟這三種性能上算是優秀的。

GPU云服務器云服務器 javascript獲取元素 js中獲取元素位置常見的數據分析方法 js中常見的變量名稱

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85536.html

JavaScript筆記——常見DOM知識

摘要：前言本篇文章以介紹常見的節點知識元素操作方法為目的，其中也對一些比較容易忽略的問題進行簡要說明。此外，還有一些方式可以獲得相關的元素節點。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。前言本篇文章以介紹常見的DOM節點知識、DOM元素操作方法為目的，其中也對一些比較容易忽略的問題進行簡要說明。才疏學淺，如有紕漏之處或建議歡迎留下評論。 Node節點首先，簡單看看Node...

madthumb 2019-08-20 18:58 評論0 收藏0
JavaScript 工作原理之三－內存管理及如何處理 4 類常見的內存泄漏問題(譯)

摘要：這是因為我們訪問了數組中不存在的數組元素它超過了最后一個實際分配到內存的數組元素字節，并且有可能會讀取或者覆寫的位。包含個元素的新數組由和數組元素所組成中的內存使用中使用分配的內存主要指的是內存讀寫。原文請查閱這里，本文有進行刪減，文后增了些經驗總結。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工作原理的第三章。我們將會討論日常使用中另一個被開發...

weknow619 2019-08-22 17:05 評論0 收藏0
【譯】HTML表單高級樣式

摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。系列文章說明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...

caikeal 2019-08-29 10:59 評論0 收藏0
【譯】HTML表單高級樣式

摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。系列文章說明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...

Jacendfeng 2019-08-01 15:29 評論0 收藏0