《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 元素屬性操作

元素屬性操作元素屬性操作在一個(gè)功能完善的頁面中，交互效果往往多種多樣，僅通過操作元素的內(nèi)容和樣式并不能滿足開發(fā)條件，我們還需要學(xué)習(xí)如何操作元素屬性。在DOM中，我們可以操作property屬性、attribute屬性和data-*屬性。例如，img元素、input元素常用的property屬性如下。img元素：src、title屬性。input元素：disabled、checked和selected屬性。1操作property屬性操作attribute屬性的方式如下。設(shè)置屬性：通過元素對象的setAttribute()方法可以設(shè)置屬性。獲取屬性值：通過元素對象的getAttribute()方法可以獲取屬性值。移除屬性：通過元素對象的removeAttribute()方法可以移除屬性。2操作attribute屬性element.setAttribute('屬性','值');element.getAttribute('屬性');element.removeAttribute('屬性');Tab欄在網(wǎng)站中的使用非常普遍，它的優(yōu)勢在于可以在有限的空間內(nèi)展示多塊的內(nèi)容，用戶可以通過單擊標(biāo)簽項(xiàng)在多個(gè)內(nèi)容塊之間進(jìn)行切換。3【案例】Tab欄切換3【案例】Tab欄切換編寫HTML頁面Tab欄由上、下兩部分結(jié)構(gòu)組成，上半部分是Tab欄的標(biāo)簽結(jié)構(gòu)，用于展示標(biāo)簽項(xiàng)；下半部分是Tab欄的內(nèi)容區(qū)，用于展示內(nèi)容項(xiàng)。每個(gè)標(biāo)簽項(xiàng)都有相對應(yīng)的內(nèi)容項(xiàng)，通過鼠標(biāo)單擊Tab欄的標(biāo)簽項(xiàng)可以實(shí)現(xiàn)對應(yīng)內(nèi)容項(xiàng)的切換。3【案例】Tab欄切換通過JavaScript實(shí)現(xiàn)Tab欄的切換效果首先需要獲取目標(biāo)元素，然后通過for語句為每個(gè)元素對象注冊單擊事件，最后實(shí)現(xiàn)Tab欄的切換效果。3【案例】Tab欄切換通過JavaScript實(shí)現(xiàn)內(nèi)容區(qū)的展示效果內(nèi)容區(qū)展示的內(nèi)容隨標(biāo)簽項(xiàng)的切換而切換，我們可以通過操作attribute屬性來完成。4動手實(shí)踐：顯示和隱藏密碼隱藏密碼的效果圖顯示密碼的效果圖案例需求：使用兩張不同狀態(tài)的“眼睛”圖片充當(dāng)按鈕功能。圖片中“眼睛”睜開時(shí)密碼顯示，閉合時(shí)密碼隱藏。默認(rèn)情況下，輸入的密碼是隱藏的，對應(yīng)閉合狀態(tài)的“眼睛”。案例實(shí)現(xiàn)思路首先通過img和input等元素搭建密碼結(jié)構(gòu)，然后通過JavaScript操作元素的屬性，通過更改input元素的ty