大家好，我是IT修真院武汉分院第11期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网js任务2，深度思考中的知识点——常见的Dom操作有哪些？
1.背景介绍
DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。
DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。
2.知识剖析
2.1DOM是什么？
DOM是Document Object Model（文档对象模型）的缩写。DOM就是一个编程接口，就是一套API，是针对HTML文档、XML等文档的一套API。
DOM用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。JavaScript可以通过DOM来访问和操作HTML文档所有的元素。JavaScript是一种脚本语言，DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。
2.2什么是DOM节点？
HTML文档中的所有内容都是节点
整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点
3.常见问题
常见的DOM操作有哪些？
4.解决方案
4.1常用的查找节点的方法有：
document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
4.2常用的新建节点的方法有：
document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
4.3常用的添加新节点的方法有：
1.element.setAttribute(attributeName, attributeValue );给元素增加指定属性，并设定属性值
2.element.setAttributeNode(attributeName );给元素增加属性节点
3.如需向HTML DOM添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
1)document.createTextNode('新增文本内容');创建新的文本节点
2)parent.appendChild(创建的新节点);向父节点的最后一个子节点后追加新节点，或使用parent.insertBefore(newChild, existingChild );向父节点的某个特定子节点之前插入新节点
4.4常用的删除节点的方法有：
parentNode.removeChild(existingChild );删除已有的子节点，返回值为删除节点
DOM需要清楚你需要删除的元素，以及它的父元素。常用的解决方案：找到你希望删除的子元素，然后使用其parentNode属性来找到父元素：
var child=document.getElementById("p1");child.parentNode.removeChild(child);
4.5常用的修改节点的方法有：
parentNode.replaceChild(newChild, existingChild );用新节点替换父节点中已有的子节点
element.setAttribute(attributeName, attributeValue );给元素增加指定属性，并设定属性值(若原元素已有该节点，此操作能达到修改该属性值的目的)
element.setAttributeNode(attributeName );给元素增加属性节点(若原元素已有该节点，此操作能达到修改该属性值的目的)
5.编码实战
6.拓展思考
常见的DOM -事件又哪些？
onclick事件——当用户点击时
onload事件——用户进入
onunload事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup事件——鼠标抬起
7.参考文献
8,更多讨论
1，JavaScript的BOM和DOM有什么区别？
BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。
DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。
2，DOM0级和DOM2级的区别？
0级DOM
主要分为2个：
一是在标签内写onclick事件
//直接写//调用 script 要写在前面
二是在js写onlicke=function(){}函数
document.getElementById("myButton").onclick =function(){ alert('thanks');}
2级DOM
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
addEventListener
removeEventListener
所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
第一个参数是事件名（如click）；
第二个参数是事件处理程序函数；
第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。
addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。
3，什么是DOM事件流？
DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
网友评论