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

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

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

手機(jī)端入口

在原生js中我們會(huì)經(jīng)常操作dom結(jié)構(gòu)，通過(guò)獲取具體標(biāo)簽進(jìn)行操作，那我們知道常用的js獲取元素的方式有哪些嗎，并且這些方法之間的區(qū)別是什么呢，以及有哪些注意點(diǎn)呢!接下來(lái)我們就一起看一下吧!

JavaScript獲取元素的的幾種方式以及區(qū)別

(1) 通過(guò)ID名獲取getElementById(“id名”)：

通過(guò)id名是獲取具體的實(shí)際的一個(gè)標(biāo)簽，是靜態(tài)獲取，即獲取的時(shí)候有就可以獲取得到，后續(xù)再添加該id名的標(biāo)簽也獲取不到了。為何會(huì)說(shuō)通過(guò)id名獲取是靜態(tài)獲取呢，我們通過(guò)具體的例子來(lá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é)論通過(guò)id名的獲取是靜態(tài)獲取，在后期添加的獲取不到

注意：

①　上下文必須是document，至于原因我們留到最后再解釋;

②　通過(guò)id只獲取到一個(gè)元素，畢竟id是獨(dú)一無(wú)二的;

③　通過(guò)id獲取是靜態(tài)獲取;

(2) 通過(guò)name屬性獲取 getElementsByName('name屬性值')

當(dāng)我們的標(biāo)簽有name屬性時(shí)，可以通過(guò)其name屬性來(lái)獲取標(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è)類(lèi)數(shù)組：

注意：

①　上下文必須是document;

②　獲取的結(jié)果是一個(gè)類(lèi)數(shù)組，不是一個(gè)真正的數(shù)組，有l(wèi)ength屬性，可以通過(guò)具體的下標(biāo)獲取對(duì)應(yīng)的元素;

(3) 通過(guò)標(biāo)簽名獲�。篻etElementsByTagName('標(biāo)簽名')

通過(guò)標(biāo)簽名獲取的元素是一個(gè)元素集合，為類(lèi)數(shù)組形式，有l(wèi)ength屬性;且通過(guò)標(biāo)簽名獲取為動(dòng)態(tài)獲取，即獲取的時(shí)候沒(méi)有該標(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)簽，但是我們也看到了通過(guò)標(biāo)簽名獲取的元素是一個(gè)集合，就算只有一個(gè)元素也是一個(gè)集合，是以一個(gè)類(lèi)數(shù)組的形式存在，并不是真正的數(shù)組。

注意：

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

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

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

(4) 通過(guò)類(lèi)名獲取 getElementsByClassName(‘類(lèi)名’)

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

注意：

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

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

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

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

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

document對(duì)象有一個(gè)documentElement屬性，該屬性始終指向HTML頁(yè)面中的<html>元素。

var html = document.documentElement; //取得對(duì)<html>的引用

(6) 快速獲取body元素 document.body

document 對(duì)象還有一個(gè) body 屬性，直接指向<body>元素。

var body = document.body; //取得對(duì)<body>的引用

(7) 通過(guò)選擇器獲取一個(gè)元素 querySelector("css選擇器")

該方法接收一個(gè) CSS 選擇符，返回與該模式匹配的第一個(gè)元素。

注意：

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

②　參數(shù)是選擇器，如“div .active”;

③　返回值只能獲取到第一個(gè)元素;

④　與通過(guò)id獲取的方式一樣為靜態(tài)獲取;

⑤　Ie8以下存在兼容問(wèn)題;

(8) 通過(guò)選擇器獲取一組元素 querySelectorAll("css選擇器")

該方法接收一個(gè) CSS 選擇符，返回的是所有匹配的元素而不僅僅是一個(gè)元素。其結(jié)果為一個(gè)節(jié)點(diǎn)列表。

注意：

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

②　參數(shù)是選擇器，如“div .active”;

③　返回值為一組節(jié)點(diǎn)列表，是一個(gè)類(lèi)數(shù)組;

④　與通過(guò)id獲取的方式一樣為靜態(tài)獲取;

⑤　Ie8以下存在兼容問(wèn)題;

使用原生JS獲取DOM元素的8個(gè)方法講完了，接下來(lái)在講一下為什么有的方法只能在document上使用。

拿div舉例子，div是HTMLDivElement類(lèi)的一個(gè)實(shí)例，document是HTMLDocument 的實(shí)例。

他們的繼承關(guān)系：

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

我們都知道子類(lèi)繼承父類(lèi)，子類(lèi)就可以使用父類(lèi)的屬性和方法。他們相同的繼承關(guān)系是Node和EventTarget，也就是說(shuō)他們都可以使用Node和EventTarget上的方法。

如Node上的nodeName、parentNode等，和EventTarget上的addEventListener等。

getElementById只在Document類(lèi)的原型上，HTMLDivElement 沒(méi)有繼承Document類(lèi)，所以div不能使用getElementById方法。

getElementsByTagName即在Document類(lèi)的原型上也在Element類(lèi)的原型上，所以div和document都可以使用getElementsByTagName方法。其它同理。

文章“【W(wǎng)eb前端基礎(chǔ)知識(shí)】dom獲取元素的方式”已幫助人

更多內(nèi)容

Web前端基礎(chǔ)知識(shí)

>>本文地址：http://www.yiyunku.cn/zhuanye/2021/70199.html

THE END

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有，未經(jīng)許可不得擅自轉(zhuǎn)載。

精品h动漫无遮挡在线看中文 _国产精品r级在线_免费观看无遮挡www的视频_乱子伦av无码中文字幕_樱桃视频小蝌蚪视频榴莲视频秋葵视频

IT培訓(xùn)

關(guān)注我們

熱門(mén)課程更多 >

關(guān)注我們

中公教育 IT 培訓(xùn) 品牌

專(zhuān)注于職業(yè)教育的A股上市公司

證券代碼：002607

首頁(yè)

IT培訓(xùn)課程

IT培訓(xùn)班型

在線網(wǎng)課

企商培訓(xùn)

教學(xué)服務(wù)

就業(yè)服務(wù)

學(xué)員薪資

師資團(tuán)隊(duì)

關(guān)于我們

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

推薦閱讀

快速通道fast track

近期開(kāi)班時(shí)間TIME

優(yōu)就業(yè)——中公教育旗下IT培訓(xùn)品牌

IT培訓(xùn)

關(guān)注我們

熱門(mén)課程 更多 >

關(guān)注我們

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

推薦閱讀

快速通道fast track

近期開(kāi)班時(shí)間TIME

優(yōu)就業(yè)——中公教育旗下IT培訓(xùn)品牌

熱門(mén)課程更多 >