一、什么是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事件   

至此。