JS選取DOM元素的簡(jiǎn)單方法
摘自JavaScript權(quán)威指南(jQuery根據(jù)樣式選擇器查找元素的終極方式是 先用getElementsByTagName(*)獲取所有DOM元素,然后根據(jù)樣式選擇器對(duì)所有DOM元素進(jìn)行篩選)
今天試了下各種選取元素的方法的速度,用原生的方法比jQuery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表現(xiàn)最好,其次是Firefox)
選取文檔元素的方法:
1、通過ID選取元素(getElementById)
1)使用方法:document.getElementById("domId")
其中,domId為要選取元素的id屬性值
2)兼容性:低于IE8版本的IE瀏覽器對(duì)getElementById方法的實(shí)現(xiàn)是不區(qū)分元素ID號(hào)的大小寫的,并且會(huì)返回匹配name屬性的元素。
2、通過名稱name選取元素(getElementsByName)
1)使用方法:document.getElementsByName("domName")
其中,domName為要選取元素的name屬性值
2)說明:a. 返回值是一個(gè)nodeList集合(區(qū)別于Array)
b. 和ID屬性不一樣,name屬性只在少數(shù)DOM元素中有效(form表單、表單元素、iframe、img)。這是因?yàn)閚ame屬性是為了方便提交表單數(shù)據(jù)而打造的。
c. 為form、img、iframe、applet、embed、object元素設(shè)置name屬性時(shí),會(huì)自動(dòng)在Document對(duì)象中創(chuàng)建以該name屬性值命名的屬性。所以可以通過document.domName引用相應(yīng)的dom對(duì)象
3)兼容性:IE中ID屬性值匹配的元素也會(huì)一起返回
3、通過標(biāo)簽名選取元素(getElementsByTagName)
1)使用方法:element.getElementsByTagName("tagName")
其中,element是有效的DOM元素(包括document)
tagName是DOM元素的標(biāo)簽名
2)說明:a. 返回值是一個(gè)nodeList集合(區(qū)別于Array)
b. 該方法只能選取調(diào)用該方法的元素的后代元素。
c. tagName不區(qū)分大小寫
d. 當(dāng)tagName為*時(shí),表示選取所有元素(需遵從b.規(guī)則)
e. HTMLDocument會(huì)定義一些快捷屬性來訪問標(biāo)簽節(jié)點(diǎn)。如:document的images、forms、links屬性指向<img>、<form>、<a>標(biāo)簽元素集合,而document.body和document.head總是指向body和head標(biāo)簽(當(dāng)未顯示聲明head標(biāo)簽時(shí),瀏覽器也會(huì)創(chuàng)建document.head屬性)
4、通過CSS類選取元素(getElementsByClassName)
1)使用方法:element.getElementsByClassName("classNames")
其中,element是有效的DOM元素(包括document)
classNames是CSS類名稱的組合(多個(gè)類名之間用空格,可以是多個(gè)空格隔開),
如element.getElementsByClassName("class2 class1")將選取elements后代元素中同時(shí)應(yīng)用了class1和class2樣式的元素(樣式名稱不區(qū)分先后順序)
2)說明:a. 返回值是一個(gè)nodeList集合(區(qū)別于Array)
b. 該方法只能選取調(diào)用該方法的元素的后代元素。
3)兼容性:IE8及其以下版本的瀏覽器未實(shí)現(xiàn)getElementsByClassName方法
5、通過CSS選擇器選取元素
1)使用方法:document.querySelectorAll("selector")
其中,selector為合法的CSS選擇器
2)說明:a. 返回值是一個(gè)nodeList集合(區(qū)別于Array)
3)兼容性:IE8及其以下版本的瀏覽器只支持CSS2標(biāo)準(zhǔn)的選擇器語法
以上這篇JS選取DOM元素的簡(jiǎn)單方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 詳解JS獲取HTML DOM元素的8種方法
- JavaScript操作DOM元素的childNodes和children區(qū)別
- JavaScript獲取DOM元素的11種方法總結(jié)
- 通過JS動(dòng)態(tài)創(chuàng)建一個(gè)html DOM元素并顯示
- js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)
- JS動(dòng)態(tài)創(chuàng)建DOM元素的方法
- 用JavaScript獲取DOM元素位置和尺寸大小的方法
- 讓瀏覽器DOM元素最后加載的js方法
- JavaScript DOM元素尺寸和位置
- JS選取DOM元素常見操作方法實(shí)例分析
相關(guān)文章
JavaScript實(shí)現(xiàn)GriwView單列全選(自寫代碼)
在 GridView 里有一系列的 Checkbox ,要實(shí)現(xiàn)對(duì)其全選或全不選,二網(wǎng)上的都不否和要求,于是我自己寫了JavaScript 代碼,貼出來供大家參考2013-05-05
擁有一個(gè)屬于自己的javascript表單驗(yàn)證插件
這篇文章主要幫助大家擁有一個(gè)屬于自己的javascript表單驗(yàn)證插件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03
Javascript 遍歷對(duì)象中的子對(duì)象
昨天同事問我一個(gè)問題:“有一個(gè)JSON對(duì)象,其中有若干個(gè)子對(duì)象,如何遍歷這個(gè)對(duì)象中的子對(duì)象?”2009-07-07
JS將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換(最新推薦)
這篇文章主要介紹了JS如何將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
JavaScript中異步與回調(diào)的基本概念及回調(diào)地獄現(xiàn)象
這篇文章主要介紹了JavaScript中異步與回調(diào)的基本概念,以及回調(diào)地獄現(xiàn)象,本文主要介紹了異步和回調(diào)的基本概念,二者是JavaScript的核心內(nèi)容,需要所有熱愛JS的小伙伴深入了解,需要的朋友可以參考下2022-07-07
通用javascript代碼判斷版本號(hào)是否在版本范圍之間
通用判斷版本號(hào)是否在兩者之間,也可以搭配判斷是否大于某版本號(hào),小于取反即可,本文給大家介紹通用javascript代碼判斷版本號(hào)是否在版本范圍之間,需要的朋友參考下2015-11-11

