大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

.什么是DOM DOM 是 Document Object Model（文档对象模型）的缩写。 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。

2.知识剖析

1.什么是DOM节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点。

2.常见的DOM属性 属性是节点（HTML 元素）的值，您能够获取或设置。 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.参考文献

课后提问环节：

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.怎么获取节点名称？张雪飞

5.onmouseover和hover有什莫区别？伊文秋

onmouseover可以实现hover的一切效果，并且因为他是执行一个函数，可以写出很多hover做不到的东西，例如onmouseover以后添加一个div盒子之类的。

6.为什么提取dom节点需要写document？韩筠宜

document是文档本身，一切的节点提取都是在提取document的内容。

7.用jquery写?王振

可以看这个里面的jquery写法。

鸣谢

感谢大家观看

BY : 陈尚欢 | 韩阳| 杨纲

ppt链接：

视频链接：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！

猛戳这里