大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。
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 元素）的值，您能够获取或设置。 innerHTMLhttp://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 : 陈尚欢 | 韩阳| 杨纲
DOM常见的操作方式有哪些？_腾讯视频
ppt链接：https://ptteng.github.io/PPT/PPT/js-02-DOM-manipulation.html#/
视频链接：https://v.qq.com/x/page/r0527rq9x36.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论