大家好，我是蓝东，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
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
