大家好，我是藍(lán)東，IT修真院成都分院的學(xué)員，一枚正直純潔善良的web程序員。

今天給大家分享一下，修真院官網(wǎng)JS任務(wù)2，常見的dom操作有哪些？如何使用？

HTML DOM (文檔對(duì)象模型)

在javascript中，操作dom是算常用并且必備的技能，我們的日常開發(fā)都離不開dom

當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）

DOM 是 Document Object Model（文檔對(duì)象模型）的縮寫。

DOM是中立于平臺(tái)和語言的接口，它允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。

在 HTML DOM中，所有事物都是節(jié)點(diǎn)。DOM 是被視為節(jié)點(diǎn)樹的 HTML。

通過可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動(dòng)態(tài)的 HTML。

DOM能夠做什么？

能夠改變頁面中的所有 HTML 元素

能夠改變頁面中的所有 HTML 屬性

能夠改變頁面中的所有 CSS 樣式

能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

實(shí)例講解：

例如當(dāng)我們創(chuàng)建了id為demo1的p標(biāo)簽時(shí)，我們?nèi)绾尾僮鱠om來更改p標(biāo)簽當(dāng)中的內(nèi)容呢？

document.getElementById("demo1").innerHTML能夠獲取id為demo1的元素。

那么如果我們想獲取同名的類，該如何操作呢？

其實(shí)也很簡(jiǎn)單：

document.getElementsByClassName("demo1")更多方法

還有個(gè)問題：如果我們不光光是想更改元素，我們想要更改元素的樣式屬性，我們?cè)撊绾尾僮髂兀?/p>

document.getElementById("p2").style.color="blue";

有很多對(duì)于元素的dom操作，更多可以多參考菜鳥教程的demo菜鳥教程

JavaScript HTML DOM 事件

允許 JavaScript 對(duì) HTML 事件作出反應(yīng)

onclick 事件——當(dāng)用戶點(diǎn)擊時(shí)

oninput 事件在用戶輸入時(shí)觸發(fā)。

onblur 事件失去焦點(diǎn)時(shí)觸發(fā)

onmouseover事件——鼠標(biāo)移入

onmouseout事件——鼠標(biāo)移出

onmousedown事件——鼠標(biāo)按下

onmouseup 事件——鼠標(biāo)抬起更多事件

對(duì)于dom事件：HTML DOM 事件允許Javascript在HTML文檔元素中注冊(cè)不同事件處理程序。

事件通常與函數(shù)結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！ (如用戶點(diǎn)擊按鈕)。

結(jié)合上面的例子，我們不想直接更改，我們想用按鈕觸發(fā)這個(gè)js文件中的更改樣式的函數(shù)。

這就會(huì)用到dom中的事件了，上面的onclick，顧名思義click點(diǎn)擊就是點(diǎn)擊來觸發(fā)。

舉個(gè)栗子：

<p id="demo">hello world</p>p標(biāo)簽當(dāng)中有個(gè)id為demo

我們現(xiàn)在"點(diǎn)擊"更改p標(biāo)簽中的樣式：

document.getElementById("demo").style.color="red";

我們先寫個(gè)按鈕再把onclick加入按鈕里面

<button onclick="myfunction()"></button>而myfunction函數(shù)內(nèi)容當(dāng)中寫我們的獲取id的dom操作即可。

參考文獻(xiàn)：菜鳥教程

視頻鏈接：騰訊視頻

ppt：PPT

感謝大家觀看

今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~