大家好，我是藍東，IT修真院成都分院的學員，一枚正直純潔善良的web程序員。
今天給大家分享一下，修真院官網JS任務2，常見的dom操作有哪些？如何使用？
HTML DOM (文檔對象模型)
在javascript中，操作dom是算常用并且必備的技能，我們的日常開發都離不開dom
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）
DOM 是 Document Object Model（文檔對象模型）的縮寫。
DOM是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
在 HTML DOM中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。
DOM能夠做什么？
能夠改變頁面中的所有 HTML 元素
能夠改變頁面中的所有 HTML 屬性
能夠改變頁面中的所有 CSS 樣式
能夠對頁面中的所有事件做出反應
實例講解：
例如當我們創建了id為demo1的p標簽時，我們如何操作dom來更改p標簽當中的內容呢？
document.getElementById("demo1").innerHTML能夠獲取id為demo1的元素。
那么如果我們想獲取同名的類，該如何操作呢？
其實也很簡單：
document.getElementsByClassName("demo1")更多方法
還有個問題：如果我們不光光是想更改元素，我們想要更改元素的樣式屬性，我們該如何操作呢？
document.getElementById("p2").style.color="blue";
有很多對于元素的dom操作，更多可以多參考菜鳥教程的demo菜鳥教程
JavaScript HTML DOM 事件
允許 JavaScript 對 HTML 事件作出反應
onclick 事件——當用戶點擊時
oninput 事件在用戶輸入時觸發。
onblur 事件失去焦點時觸發
onmouseover事件——鼠標移入
onmouseout事件——鼠標移出
onmousedown事件——鼠標按下
onmouseup 事件——鼠標抬起更多事件
對于dom事件：HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。
事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。
結合上面的例子，我們不想直接更改，我們想用按鈕觸發這個js文件中的更改樣式的函數。
這就會用到dom中的事件了，上面的onclick，顧名思義click點擊就是點擊來觸發。
舉個栗子：
<p id="demo">hello world</p>p標簽當中有個id為demo
我們現在"點擊"更改p標簽中的樣式：
document.getElementById("demo").style.color="red";
我們先寫個按鈕再把onclick加入按鈕里面
<button onclick="myfunction()"></button>而myfunction函數內容當中寫我們的獲取id的dom操作即可。
參考文獻：菜鳥教程
視頻鏈接：騰訊視頻
ppt：PPT
感謝大家觀看
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
