您所在的位置：首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識(shí)】dom獲取元素的方式

【W(wǎng)eb前端基礎(chǔ)知識(shí)】dom獲取元素的方式

發(fā)布： Web前端培訓(xùn)
來源：優(yōu)就業(yè)
2021-09-28 14:22:04
閱讀()
分享

手機(jī)端入口

在原生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ù)組，有長(zhǎng)度屬性，通過[]可以獲取具體的某一項(xiàng);

③　在使用時(shí)要通過具體的下標(biāo)，比如添加點(diǎn)擊事件時(shí);

(4) 通過類名獲取 getElementsByClassName(‘類名’)

通過類名獲取元素的方式與用法基本一樣，也是動(dòng)態(tài)獲取;

注意：

①　上下文可以是document，也可以是一個(gè)父元素;

②　是一個(gè)類數(shù)組，有長(zhǎng)度屬性，通過[]可以獲取具體的某一項(xiàng);

③　在使用時(shí)要通過具體的下標(biāo)，比如添加點(diǎn)擊事件時(shí);

④　注意單詞拼寫，因?yàn)閏lass是一個(gè)關(guān)鍵字，所以為getElementsByClassName

(5) 快速獲取html元素 document.documentElement