關於dom獲取元素的幾種方式


原文鏈接:https://blog.csdn.net/levinhax/article/details/71274456

獲取元素DOM對象有很多種方法,以前一直在用getElementById和getElementsByTagName等,現在對這些方法和querySelector做一個總結.
常見的獲取元素的方法有3種,分別是通過元素ID、通過標簽名字和通過類名字來獲取。
DOM提供了一個名為getElementById的方法,這個方法將返回一個與之對應id屬性的節點對象,它是document對象特有的函數,只能通過其來調用該方法,使用方法如下:document.getElementById('idName');

getElementsByTagName方法返回一個對象數組(准確的說是HTMLCollection集合),返回元素的順序是它們在文檔中的順序,傳遞給 getElementsByTagName() 方法的字符串可以不區分大小寫,使用方法如下:document.getElementsByTagName(tagName);

DOM還提供了getElementsByClassName方法來獲取指定class名的元素,該方法返回文檔中所有指定類名的元素集合,作為 NodeList 對象。NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始), 所以有時使用時要指定下標,使用方法如下:document.getElementsByClassName('className');

querySelector() 方法返回匹配指定 CSS 選擇器元素的第一個子元素 。 該方法只返回匹配指定選擇器的第一個元素。如果要返回所有匹配元素,需要使用 querySelectorAll() 方法替代.

由於querySelector是按css規范來實現的,所以它傳入的字符串中第一個字符不能是數字.

最后再根據查詢的資料總結一下:
query選擇符選出來的元素及元素數組是靜態的,而getElement這種方法選出的元素是動態的。靜態的就是說選出的所有元素的數組,不會隨着文檔操作而改變.
在使用的時候getElement這種方法性能比較好,query選擇符則比較方便.
最后需要注意一點就是getElementById和getElementsByTagName是兼容ie678瀏覽器的,getElementsByClassName和querySelector方法屬於h5的新增內容,不兼容ie678瀏覽器。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM