摘要:DOM:Document Object Model,即文檔對(duì)象模型。DOM指的是當(dāng)前要操作的文檔內(nèi)容,在很多時(shí)候,我們需要獲取文檔中的元素,而使用DOM方法無(wú)疑會(huì)更規(guī)范且方便。在DOM中可以獲取元素,主要有這五種常見(jiàn)的方法:1. 根據(jù)id選擇元素;2. 根據(jù)name屬性來(lái)獲取元素
DOM:Document Object Model,即文檔對(duì)象模型。DOM指的是當(dāng)前要操作的文檔內(nèi)容,在很多時(shí)候,我們需要獲取文檔中的元素,而使用DOM方法無(wú)疑會(huì)更規(guī)范且方便。
在DOM中可以獲取元素,主要有這五種常見(jiàn)的方法:
1. 根據(jù)id選擇元素;
2. 根據(jù)name屬性來(lái)獲取元素;
3. 根據(jù)標(biāo)簽名Tag來(lái)獲取元素;
4. 通過(guò)class屬性選取元素;
5. 使用css選擇器來(lái)獲取元素。
由id選擇元素時(shí),可以使用id屬性獲取元素。給一帶有id的標(biāo)簽,通過(guò)document.getElementById('id名')的方式來(lái)獲取元素,為簡(jiǎn)化操作可以將之存放于一個(gè)自己設(shè)置的變量中,可以直接對(duì)從存放此id的變量進(jìn)行樣式的設(shè)計(jì)來(lái)控制相應(yīng)的功能樣式。若需要使用多個(gè)id來(lái)獲取元素,可以通過(guò)函數(shù)來(lái)簡(jiǎn)化操作。
由name屬性來(lái)獲取元素時(shí),因?yàn)閾碛衝ame屬性的元素最常見(jiàn)的就是表單以及表單中的元素,再就是圖像和內(nèi)聯(lián)框架。在表單中給對(duì)應(yīng)標(biāo)簽相關(guān)的name名,同樣先創(chuàng)建一個(gè)變量名,具體寫(xiě)法是let 變量1 = document.getElementsByName('name名')[0],這樣可以返回一個(gè)NodeList節(jié)點(diǎn)列表,不只是一個(gè)元素。還可以將name屬性的值,當(dāng)作docuemtn對(duì)象的屬性來(lái)用,返回唯一元素。寫(xiě)法為let 變量2 = document.name值,再通過(guò)對(duì)變量2的控制以達(dá)到對(duì)相關(guān)元素的控制。
根據(jù)標(biāo)簽名Tag來(lái)獲取元素使用getElementsByTagName()的方式,這樣會(huì)返回一個(gè)元素集合,有l(wèi)ength屬性,可以當(dāng)數(shù)組來(lái)訪(fǎng)問(wèn)。元素集合是一個(gè)對(duì)象,可以用item()方法獲取指定元素。getElementsByTagName()不僅在document對(duì)象上有定義,在Element元素對(duì)象上也有定義??梢栽诟讣?jí)元素調(diào)用該方法,獲取自己元素并控制其功能。
使用標(biāo)簽名和name屬性選擇有幾種快捷方式,僅用于極少數(shù)標(biāo)簽,有images標(biāo)簽、forms標(biāo)簽、a 鏈接、body、head、html以及doctype。可以直接在用如document.images[0].style.color= 'pink';的方式,這樣特殊的標(biāo)簽使用這樣的快捷方式會(huì)更簡(jiǎn)單。
通過(guò)class屬性選取元素時(shí),可以通過(guò)document.getElementsByClassName('class名')的方式獲取元素。返回一個(gè)html元素集合,與根據(jù)標(biāo)簽名獲取的返回?cái)?shù)據(jù)類(lèi)型完全一樣。該方法也支持在父元素上調(diào)用也同樣支持多個(gè)class屬性值。
由使用css選擇器來(lái)獲取元素時(shí),在選擇頁(yè)面的時(shí)候,很多時(shí)候使用css選擇器獲取元素,使用querySelector返回第一個(gè)元素和querySelectorAll返回節(jié)點(diǎn)列表數(shù)組的方式獲得相關(guān)元素,這種方法也可以在元素中調(diào)用,類(lèi)似與根據(jù)標(biāo)簽和class名獲取元素。
批改老師:查無(wú)此人批改時(shí)間:2019-03-14 09:18:33
老師總結(jié):寫(xiě)的不錯(cuò)。js一定要學(xué)扎實(shí),因?yàn)椴还芮岸诉€是后端工程師,基本都要用。繼續(xù)加油