小編給大家分享一下JavaScript中HTML元素操作的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有佛山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

一、獲取操作的元素

document對(duì)象的方法和屬性

document對(duì)象提供了一些用于查找元素的方法，利用這些方法可以根據(jù)元素的id、name和class屬性以及標(biāo)簽名稱(chēng)的方式獲取操作的元素。

總結(jié)

除了document.getElementById()方法返回的是擁有指定id的元素外，其他方法返回的都是符合要求的一個(gè)集合。若要獲取其中一個(gè)對(duì)象，可以通過(guò)下標(biāo)的方式獲取，默認(rèn)從0開(kāi)始。

document對(duì)象提供一些屬性，可用于獲取文檔中的元素。例如，獲取所有表單標(biāo)簽、圖片標(biāo)簽等。

• document對(duì)象的body屬性用于返回body元素。

• document對(duì)象的documentElement屬性用于返回HTML文檔的根節(jié)點(diǎn)html元素。

注意

通過(guò)document對(duì)象的方法與document對(duì)象的屬性獲取的操作元素表示的都是同一對(duì)象。如document.getElementsByTagName(‘body’)[0]與document.body全等。

HTML5新增的document對(duì)象方法

HTML5中為更方便獲取操作的元素，為document對(duì)象新增了兩個(gè)方法，分別為querySelector()和querySelectorAll()。

• querySelector()方法用于返回文檔中匹配到指定的元素或CSS選擇器的第1個(gè)對(duì)象的引用。

• querySelectorAll()方法用于返回文檔中匹配到指定的元素或CSS選擇器的對(duì)象集合。

由于這兩個(gè)方法的使用方式相同，下面以document.querySelector()方法為例演示。

Element對(duì)象的方法和屬性

在DOM操作中，元素對(duì)象也提供了獲取某個(gè)元素內(nèi)指定元素的方法，常用的兩個(gè)方法分別為getElementsByClassName()和getElementsByTagName()。它們的使用方式與document對(duì)象中同名方法相同。

除此之外，元素對(duì)象還提供了children屬性用來(lái)獲取指定元素的子元素。例如，獲取上述示例中ul的子元素。

• 元素對(duì)象的children屬性返回的也是對(duì)象集合，若要獲取其中一個(gè)對(duì)象，也需通過(guò)下標(biāo)的方式獲取，默認(rèn)從0開(kāi)始。

• 另外，document對(duì)象中也有children屬性，它的第一個(gè)子元素通常是html元素。

HTMLCollection對(duì)象

• HTMLCollection對(duì)象：通過(guò)document對(duì)象或Element對(duì)象調(diào)用getElementsByClassName()方法、getElementsByTagName()方法、children屬性等返回的對(duì)象集。

• NodeList對(duì)象：document對(duì)象調(diào)用getElementsByName()方法在Chrome和FireFox瀏覽器中返回的是NodeList對(duì)象，IE11返回的是HTMLCollection對(duì)象。

HTMLCollection與NodeList對(duì)象的區(qū)別：

• HTMLCollection對(duì)象用于元素操作。

• NodeList對(duì)象用于節(jié)點(diǎn)操作。

提示：對(duì)于getElementsByClassName()方法、getElementsByTagName()方法和children屬性返回的集合中可以將id和name自動(dòng)轉(zhuǎn)換為一個(gè)屬性。

二、元素內(nèi)容

JavaScript中，若要對(duì)獲取的元素內(nèi)容進(jìn)行操作，則可以利用DOM提供的屬性和方法實(shí)現(xiàn)。

• 屬性屬于Element對(duì)象，方法屬于document對(duì)象。

• innerHTML在使用時(shí)會(huì)保持編寫(xiě)的格式以及標(biāo)簽樣式。

• innerText則是去掉所有格式以及標(biāo)簽的純文本內(nèi)容。

• textContent屬性在去掉標(biāo)簽后會(huì)保留文本格式。

舉個(gè)例子

代碼實(shí)現(xiàn)

	
	
	
	
	
	
	
	
	The first paragraph...
	

	The second paragraph...
	third
	
	

	
	
	

注意

innerText屬性在使用時(shí)可能會(huì)出現(xiàn)瀏覽器兼容的問(wèn)題。因此，推薦在

開(kāi)發(fā)時(shí)盡可能的使用innerHTML獲取或設(shè)置元素的文本內(nèi)容。同時(shí)，innerHTML屬性和document.write()方法在設(shè)置內(nèi)容時(shí)有一定的區(qū)別，前者作用于指定的元素，后者則是重構(gòu)整個(gè)HTML文檔頁(yè)面。因此，讀者在開(kāi)發(fā)中要根據(jù)實(shí)際的需要選擇合適的實(shí)現(xiàn)方式

【案例】改變盒子大小

代碼實(shí)現(xiàn)思路：

① 編寫(xiě)HTML，設(shè)置p的大小。

② 根據(jù)用戶(hù)的點(diǎn)擊次數(shù)完成盒子大小的改變。

③ 單擊的次數(shù)為奇數(shù)時(shí)，盒子都變大，單擊次數(shù)為偶數(shù)時(shí)，盒子都變小。

代碼實(shí)現(xiàn)

三、元素屬性

在DOM中，為了方便JavaScript獲取、修改和遍歷指定HTML元素的相關(guān)屬性，提供了操作的屬性和方法。

利用attributes屬性可以獲取一個(gè)HTML元素的所有屬性，以及所有屬性的個(gè)數(shù)length。

舉個(gè)例子

代碼實(shí)現(xiàn)

	
	
	
	
	
	
	
	
	
test word.
	
	
	

四、元素樣式

回顧：通過(guò)元素屬性的操作修改樣式。

元素樣式語(yǔ)法：style.屬性名稱(chēng)。

要求：需要去掉CSS樣式名里的中橫線(xiàn)“-”，并將第二個(gè)英文首字母大寫(xiě)。

舉例：設(shè)置背景顏色的background-color，在style屬性操作中，需要修改為backgroundColor。

注意

CSS中的float樣式與JavaScript的保留字沖突，在解決方案上不同的瀏覽器

存在分歧。例如IE9——11、Chrome、FireFox可以使用“float”和“cssFloat”，Safari瀏覽器使用“float”，IE6~8則使用“styleFloat”。

問(wèn)題：一個(gè)元素的類(lèi)選擇器可以有多個(gè)，在開(kāi)發(fā)中如何對(duì)選擇器列表進(jìn)行操作？

原來(lái)的解決方案：利用元素對(duì)象的className屬性獲取，獲取的結(jié)果是字符型，然后再根據(jù)實(shí)際情況對(duì)字符串進(jìn)行處理。

HTML5提供的辦法：新增的classList（只讀）元素的類(lèi)選擇器列表。

舉例：若一個(gè)p元素的class值為“box header navlist title”，如何刪除header？

HTML5解決方案：p元素對(duì)象.classList.toggle(“header”);

舉個(gè)例子

代碼實(shí)現(xiàn)

	
	
	
	
	
	
	
	
	

	
PHP
	JavaScript
	
C++
	
Java
	
	
	
	
	

除此之外，classList屬性還提供了許多其他相關(guān)操作的方法和屬性。

五、【案例】標(biāo)簽欄切換效果

代碼實(shí)現(xiàn)思路：

• ① 編寫(xiě)HTML，實(shí)現(xiàn)標(biāo)簽欄的結(jié)構(gòu)與樣式的設(shè)計(jì)，其中class等于current表示當(dāng)前顯示的標(biāo)簽，默認(rèn)是第一個(gè)標(biāo)簽。

• ② 獲取所有的標(biāo)簽與標(biāo)簽對(duì)應(yīng)的顯示內(nèi)容。

• ③ 遍歷并為每個(gè)標(biāo)簽添加鼠標(biāo)滑過(guò)事件，在事件的處理函數(shù)中，遍歷標(biāo)簽對(duì)應(yīng)的所有顯示內(nèi)容，當(dāng)鼠標(biāo)滑過(guò)標(biāo)簽時(shí)，通過(guò)classList的add()方法添加current，否則通過(guò)remove()方法移出current。

代碼實(shí)現(xiàn)

	
	
	
	
	
	
	
	
	
	
	標(biāo)簽一

	標(biāo)簽二

	標(biāo)簽三

	標(biāo)簽四

	

	
	
	 1 

	 2 

	 3 

	 4 

	

	

	
	
	

以上是“JavaScript中HTML元素操作的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！