1.背景介绍
.什么是DOM DOM 是 Document Object Model（文档对象模型）的缩写。 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。
2.知识剖析
1.什么是DOM节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点。 http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_nodename
2.常见的DOM属性 属性是节点（HTML 元素）的值，您能够获取或设置。 innerHTML http://www.w3school.com.cn/tiy/t.asp?f=hdom_tablerow_innerhtml 属性 nodeName 属性 nodeName 属性规定节点的名称 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document
nodeValue 属性 nodeValue 属性规定节点的值。 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValue 是文本本身 属性节点的 nodeValue 是属性值
三、常见问题
常见的DOM操作有哪些？
4.解决方案
1.访问元素的方法 通过使用 getElementById() 方法 通过使用 getElementsByTagName() 方法 通过使用 getElementsByClassName() 方法
2.修改元素的方法 改变 HTML 内容 document.getElementById("p1").innerHTML="New text!"改变 CSS 样式 document.getElementById("p2").style.color="blue"改html和css
追加子元素的方法 首先必须创建该元素（元素节点），然后把它追加到已有的元素上。var para=document.createElement("p")创建新的 HTML 元素 - appendChild() 在父元素的最后追加 创建新的 HTML 元素-element.insertBefore(para,child)在指定位置给父级追加子元素 删除 HTML 元素，您必须清楚该元素的父元素：parent.removeChild(child)替换 HTML 元素:parent.replaceChild(para,child)方法
5.编码实战
6.更多讨论
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
7.参考文献
http://www.runoob.com/jsref/dom-obj-document.html
课后提问环节：
1.onmouseover和onmousemove的区别？婷婷
onmouseover是在鼠标放到上面的时候就触发一次函数，onmousemove是在目标上面每移动一点都会触发一次函数。
2.什么是attribute？杨梦桐
attribute是元素的属性，
比如这个
它的a.getAttribute("target")=_blank
3.获取id和class的区别？李仁
document.getElementById("p1")
返回的是一个唯一的值，可以对id为p1的元素直接进行修改；
document.getElementsByClassName("p2")
返回的是一串数组，数组包含了所有className为p2的元素，想要对其中一项进行修改，必须加上[数字]，比如下面
sbox[i].style.backgroundColor="#ffa500"
4.怎么获取节点名称？张雪飞
http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_nodename
5.onmouseover和hover有什莫区别？伊文秋
onmouseover可以实现hover的一切效果，并且因为他是执行一个函数，可以写出很多hover做不到的东西，例如onmouseover以后添加一个div盒子之类的。
6.为什么提取dom节点需要写document？韩筠宜
document是文档本身，一切的节点提取都是在提取document的内容。
7.用jquery写?王振
可以看这个里面的jquery写法。http://www.jquerycn.cn/a_4561
鸣谢
感谢大家观看
BY : 陈尚欢 | 韩阳| 杨纲
ppt链接：https://ptteng.github.io/PPT/PPT/js-02-DOM-manipulation.html#/
视频链接：https://v.qq.com/x/page/r0527rq9x36.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
猛戳这里
DOM：DOM（Document Object Model）文档对象模型 是用来呈现以及与任意 HTML 或 XML文档交互的API
作用：1.实现网页特效
2.实现用户交互
DOM树：1.将 HTML 文档以树状结构直观的表现出来
2.作用：文档树直观的体现了标签与标签之间的关系
DOM对象：浏览器根据html标签生成的 JS对象
DOM的核心思想：把网页内容当做对象来处理
演示其他获取元素语法（了解）
通过id名来获取
document.getElementById('box')
通过类名来获取
document.getElementsByClassName('box')
通过标签名来获取
document.getElementsByTagName('ul')
1.innerText
2.innerHTML
细节：innerText 与 innerHTML 设置内容的时候，会覆盖原有的内容
如何实现把原本的内容也带上？
1.设置/修改元素常用属性（src 、title等属性）
语法：对象.属性 = 值
2.通过类名操作CSS
注意说明：
1. 在JS中使用className表示类名，因为class在js中是个关键字在标签上，class属性表示类名，但在js中使用className表示类名
2. 使用className有 覆盖 问题
3.通过style控制样式属性
语法：对象.style.样式属性名 = 值
通过style操作样式 本质上 设置行内样式
4.表单的属性设置 （value、type、disabled、checked、selected）
语法
获取： 对象.属性名
设置： 对象.属性名 = 值
定时器函数
作用: 每隔一段时间，就会来调用函数
注意易错
如下写法，会将fn() 立即调用，就没有了定时效果
setInterval(fn(), 1000) // 错误效果
