IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
在原生js中我們會(huì)經(jīng)常操作dom結(jié)構(gòu),通過獲取具體標(biāo)簽進(jìn)行操作,那我們知道常用的js獲取元素的方式有哪些嗎,并且這些方法之間的區(qū)別是什么呢,以及有哪些注意點(diǎn)呢!接下來我們就一起看一下吧!
JavaScript獲取元素的的幾種方式以及區(qū)別
(1) 通過ID名獲取getElementById(“id名”):
通過id名是獲取具體的實(shí)際的一個(gè)標(biāo)簽,是靜態(tài)獲取,即獲取的時(shí)候有就可以獲取得到,后續(xù)再添加該id名的標(biāo)簽也獲取不到了。為何會(huì)說通過id名獲取是靜態(tài)獲取呢,我們通過具體的例子來看:
- <ul id="list"></ul>
Js代碼為:
- var oUl = document.getElementById("list");
- var byId = document.getElementById("h");
- console.log(byId);
- //在ul中添加一個(gè)li
- oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>";
- console.log(byId);
最后的結(jié)果為:null null
可以得出結(jié)論通過id名的獲取是靜態(tài)獲取,在后期添加的獲取不到
注意:
① 上下文必須是document,至于原因我們留到最后再解釋;
② 通過id只獲取到一個(gè)元素,畢竟id是獨(dú)一無二的;
③ 通過id獲取是靜態(tài)獲取;
(2) 通過name屬性獲取 getElementsByName('name屬性值')
當(dāng)我們的標(biāo)簽有name屬性時(shí),可以通過其name屬性來獲取標(biāo)簽,如在單選按鈕中
- <input type="radio" name='sex' >男
- <input type="radio" name='sex' checked>女
Js代碼為:
- var oSex = document.getElementsByName('sex');
- console.log(oSex);
結(jié)果如下圖是節(jié)點(diǎn)列表,為一個(gè)類數(shù)組:
注意:
① 上下文必須是document;
② 獲取的結(jié)果是一個(gè)類數(shù)組,不是一個(gè)真正的數(shù)組,有l(wèi)ength屬性,可以通過具體的下標(biāo)獲取對(duì)應(yīng)的元素;
(3) 通過標(biāo)簽名獲。篻etElementsByTagName('標(biāo)簽名')
通過標(biāo)簽名獲取的元素是一個(gè)元素集合,為類數(shù)組形式,有l(wèi)ength屬性;且通過標(biāo)簽名獲取為動(dòng)態(tài)獲取,即獲取的時(shí)候沒有該標(biāo)簽,若后續(xù)進(jìn)行手動(dòng)添加后也能獲取到。舉例:
- <ul id="list"></ul>
Js代碼如下:
- var oUl = document.document.getElementById("list");
- var byTagName = document.getElementsByTagName("li");
- console.log(byTagName);
- //在ul中添加一個(gè)li
- oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>";
- console.log(byTagName);
最后的結(jié)果為:
可以看到在手動(dòng)添加li標(biāo)簽之后,可以動(dòng)態(tài)地獲取到添加之后的標(biāo)簽,但是我們也看到了通過標(biāo)簽名獲取的元素是一個(gè)集合,就算只有一個(gè)元素也是一個(gè)集合,是以一個(gè)類數(shù)組的形式存在,并不是真正的數(shù)組。
注意:
① 上下文可以是document,也可以是一個(gè)父元素;
② 是一個(gè)類數(shù)組,有長度屬性,通過[]可以獲取具體的某一項(xiàng);
③ 在使用時(shí)要通過具體的下標(biāo),比如添加點(diǎn)擊事件時(shí);
(4) 通過類名獲取 getElementsByClassName(‘類名’)
通過類名獲取元素的方式與用法基本一樣,也是動(dòng)態(tài)獲取;
注意:
① 上下文可以是document,也可以是一個(gè)父元素;
② 是一個(gè)類數(shù)組,有長度屬性,通過[]可以獲取具體的某一項(xiàng);
③ 在使用時(shí)要通過具體的下標(biāo),比如添加點(diǎn)擊事件時(shí);
④ 注意單詞拼寫,因?yàn)閏lass是一個(gè)關(guān)鍵字,所以為getElementsByClassName
(5) 快速獲取html元素 document.documentElement
- document對(duì)象有一個(gè)documentElement屬性,該屬性始終指向HTML頁面中的<html>元素。
- var html = document.documentElement; //取得對(duì)<html>的引用
(6) 快速獲取body元素 document.body
- document 對(duì)象還有一個(gè) body 屬性,直接指向<body>元素。
- var body = document.body; //取得對(duì)<body>的引用
(7) 通過選擇器獲取一個(gè)元素 querySelector("css選擇器")
該方法接收一個(gè) CSS 選擇符,返回與該模式匹配的第一個(gè)元素。
注意:
① 上下文可以是document,也可以是一個(gè)父元素;
② 參數(shù)是選擇器,如“div .active”;
③ 返回值只能獲取到第一個(gè)元素;
④ 與通過id獲取的方式一樣為靜態(tài)獲取;
⑤ Ie8以下存在兼容問題;
(8) 通過選擇器獲取一組元素 querySelectorAll("css選擇器")
該方法接收一個(gè) CSS 選擇符,返回的是所有匹配的元素而不僅僅是一個(gè)元素。其結(jié)果為一個(gè)節(jié)點(diǎn)列表。
注意:
① 上下文可以是document,也可以是一個(gè)父元素;
② 參數(shù)是選擇器,如“div .active”;
③ 返回值為一組節(jié)點(diǎn)列表,是一個(gè)類數(shù)組;
④ 與通過id獲取的方式一樣為靜態(tài)獲取;
⑤ Ie8以下存在兼容問題;
使用原生JS獲取DOM元素的8個(gè)方法講完了,接下來在講一下為什么有的方法只能在document上使用。
拿div舉例子,div是HTMLDivElement類的一個(gè)實(shí)例,document是HTMLDocument 的實(shí)例。
他們的繼承關(guān)系:
HTMLDivElement > HTMLElement > Element > Node > EventTarget
HTMLDocument > Document > Node > EventTarget
我們都知道子類繼承父類,子類就可以使用父類的屬性和方法。他們相同的繼承關(guān)系是Node和EventTarget,也就是說他們都可以使用Node和EventTarget上的方法。
如Node上的nodeName、parentNode等,和EventTarget上的addEventListener等。
getElementById只在Document類的原型上,HTMLDivElement 沒有繼承Document類,所以div不能使用getElementById方法。
getElementsByTagName即在Document類的原型上也在Element類的原型上,所以div和document都可以使用getElementsByTagName方法。其它同理。
更多內(nèi)容
>>本文地址:http://hqfphsz.com/zhuanye/2021/70199.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個(gè)方向的工作?