DOM（核心）（重點）

1. 什麼是DOM

文檔對象模型（ Document Object Model ，簡稱DOM），是W3C推薦的處理可擴展標記語言（ HTML或者XML ）的標準編程接口。

W3C已經定義了一系列的DOM接口，通過這些DOM接口可以改變網頁的內容，結構和樣式。

1. 對於JavaScript，爲了能夠使JavaScript操作HTML，JavaScript就有了一套自己的 dom 編程接口。
2. 對於HTML，dom使得html形成了一棵dom樹，包含文檔， 元素， 節點

• 文檔：一個頁面就是一個文檔，DOM中使用 document 表示
• 元素：頁面中的所有標籤都是元素，DOM中使用 element 表示
• 節點：網頁中的所有內容都是節點（標籤，屬性，文本，註釋等），DOM中使用node表示

3. 我們獲取的DOM元素是一個對象（object），所以稱爲文檔對象模型

2. 關於dom操作，我們主要針對元素的操作，主要有創建，增，刪，改，查，屬性操作，事件操作

2.1 創建

1. document.write()

2. element.innerHTML

3. document.createElement()

2.2 增

1. 父級.appendChild(變量);

2. 父級.insertBefore(變量, 父級.children[n])

2.3 刪

1. removeChild

2.4 改

2.5查

1. DOM 提供的API的方法：getElementById, getElementByTagName 古老用法不推薦

2. H5提供的新方法：qureySelector， qureySelectorAll 提倡

3. 利用節點操作獲取元素：父（parentNode），子（children），兄（previousElementSibling，nextElementSibling）提倡

2.6 屬性操作（自定義）

方法	作用
element.getAttribute(‘屬性’)	主要獲得自定義的屬性（標準）
element.setAttribute(‘屬性’, ‘屬性值’)	自定義屬性
element.removeAttribute(‘屬性’);	移除屬性

2.7 事件操作（基礎的，不全）

給元素註冊事件，採取 事件.事件類型=事件處理程序

鼠標事件	觸發條件
onclick	鼠標點擊左鍵觸發
onmouseover	鼠標經過觸發
onmouseout	鼠標離開觸發
onmousemove	鼠標移動觸發
onmouseenter	鼠標經過觸發
onmouseleave	鼠標離開觸發
onfocus	獲得鼠標焦點觸發
onblur	失去鼠標焦點觸發
onmouseup	鼠標彈起觸發
onmousedown	鼠標按下觸發

更細緻的學習 come on！！！https://blog.csdn.net/weixin_45773503/article/details/105948417