大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。今天给大家分享一下，常见Dom操作有哪些?
分享人：郭婷婷
1.背景介绍
DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描
绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于
Netscape 及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。
2.知识剖析
DOM是什么？
DOM 是 Document Object Model（文档对象模型）的缩写。DOM就是一个编程接口，就是一套API，是针对HTML文档、XML等文档的一套API。
DOM用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。JavaScript 可以通过 DOM 来访问和操作HTML文档所有的元素。JavaScript是一种脚本语言，DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。
什么是DOM节点？
HTML 文档中的所有内容都是节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
上图是一个html文件，也就是网页的结构。
html标签是一个节点（Node）。
head、title、body、p标签都是节点。
嵌套其他节点的节点叫做父节点。
被嵌套的节点叫做子节点。
同一个父节点下的节点叫做兄弟节点。
父亲的父亲以及上溯十八代祖宗叫做祖先节点。
儿子的儿子以及子子孙孙无穷匮也叫做后代节点。
3.常见问题
常见的DOM操作有哪些？
1.查找节点
2.新建节点
3.添加新节点
4.删除节点
5.修改节点
4.解决方案
Document
当浏览器下载到一个网页，通常是 HTML，这个 HTML 就叫 document（当然，这也是 DOM 树中的一个 node），
从上图可以看到，document 通常是整个 DOM 树的根节点。这个 document 包含了标题（document.title）、URL（document.URL）等属性，可以直接在 JS 中访问到。
在 JS 中，可以通过 document 访问其子节点（其实任何节点都可以），如
document.body;
document.getElementById('xxx');
常用的查找节点的方法有：
document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
常用的新建节点的方法有：
document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
常用的添加新节点的方法有：
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
1)parent.appendChild( 创建的新节点 );向父节点的最后一个子节点后追加新节点
2)parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点
常用的删除节点的方法有：
parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点
常用的修改节点的方法有：
parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点
element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值(若原元素已有该节点，此操作能达到修改该属性值的目的)
element.setAttributeNode( attributeName );给元素增加属性节点(若原元素已有该节点，此操作能达到修改该属性值的目的)
5.编码实战
6.更多讨论
常见的DOM - 事件又哪些？
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
HTML DOM 事件
7.参考文献
DOM, DOCUMENT, BOM, WINDOW 有什么区别?
8、更多讨论
1、DOM和BOM有什么区别？
DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。
2、所有节点都有子节点吗？
这个不一定，比如文本节点。
3、getElementById()、querySelector()、querySelectorAll()获取节点的方法有什么区别？
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。querySelector()是用于接收一个CSS选择符，返回与该模式匹配的第一个元素；querySelectorAll()用于选择匹配到的所有元素。
鸣谢
感谢大家观看
BY :|黄源志|郭婷婷
PPT链接：https://ptteng.github.io/PPT/PPT/js-02-DOM.html#/
视频链接: https://v.qq.com/x/page/i0513cuidb0.html
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论