一、什么是DOM？

? ? ? ?1、通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。

? ? ? ?2、當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）

二、操作DOM

? ? ? ? 1、在操作DOM之前，我們需要先獲取到被操作的對象屬性，然后再操作

? ? ? ? ? ? ? a、通過 id 找到 HTML 元素? ? ?document.getElementById()

? ? ? ? ? ? ? b、通過 類名?找到 HTML 元素? ? ?document.getElementClassName()

? ? ? ? ? ? ? c、通過? 標簽名?找到 HTML 元素? ? ?getElementsByTagName

? ? ? ? ? ? ? d、匹配指定 CSS 選擇器的一個元素? ??document.querySelector()

? ? ? ? ? ? ? e、獲取文檔中某個元素的匹配列表? ?document.querySelectorAll()

? ? ? ? 2、創建一個DOM

? ? ? ? ? ? ? 例：頁面上添加一個“你好”????????

<div><h1>Hello, world!</h1>
</div>
<script>const title = document.createElement('h1');//添加一個h1標簽title.textContent = '你好';//設置h1標簽的文本內容document.querySelector('div').appendChild(title);//將h1標簽添加到div標簽中
</script>

????????

? ? ? ? 此時會發現該標簽已經添加成功，原理就是先通過選擇器找到div，然后再給div添加一個h1標簽節點

? ? ? ? 3、通過選擇器修改某個元素的屬性

? ? ? ? ? ? ? 例：修改div標簽的樣式屬性

<div class="box"></div><script>const box = document.querySelector('.box');//通過class類獲取屬性名為box的div元素的屬性box.style.backgroundColor = 'blue';//修改box操作對象的backgroundColor屬性box.style.width = '300px';//寬度屬性</script><style>.box {width: 200px;height: 200px;background-color: red;}</style>

? ? 運行之后在頁面或者元素操作臺可以看到：? ? ? ? ? ??

? ? ? ? 4、通過選擇器給元素添加方法

? ? ? ? ? ? ? 例：給div添加一個點擊事件

? ? ? ? ? ? ??

? ? ? ? ? ? ?在頁面點擊或者事件偵聽器上看到click事件? ?

至此。