大家好，我是IT修真院北京分院web第31期学员金立剑
【js-6】DOM有哪些操作
1.背景介绍
什么是DOM？
DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。
在Chrome浏览器端，单击右键打开View Page Source展示文档结构。通过这种方式可以直观的看到文档当前的内容和结构。DOM则不同，它是提供一个API给编程语言，比如Javascript，通过一系列抽象的方法操作文档的内容，结构和样式。
DOM的组成
对于XML应用开发来说，DOM就是一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范。
DOM定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据。
作为W3C的标准接口规范，目前，DOM由三部分组成，包括：核心（core）、HTML接口和XML接口。
核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。
HTML接口和XML接口两部分则是专为操作具体HTML文档和XML文档所提供的高级接口。
DOM树
2.知识剖析
DOM的四个基本接口
在DOM接口规范中，有四个基本的接口：Document, Node, NodeList, NamedNodeMap。
Document:Document接口是对文档进行操作的入口，它是从Node接口继承过来的。
Node:Node接口是其他大多数接口的父类。 在DOM树中，Node接口代表了树中的一个节点。
常见的DOM操作
1.查找节点
document.getElementById('id属性值'); 返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值'); 返回拥有指定class的对象集合
document/element.getElementsByTagName('标签名'); 返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素
document.documentElement; 获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all['']; 获取页面中的所有元素节点的对象集合型
2.创建节点
document.createElement('元素名'); 创建新的元素节点
document.createAttribute('属性名'); 创建新的属性节点
document.createTextNode('文本内容'); 创建新的文本节点
document.createComment('注释节点'); 创建新的注释节点
document.createDocumentFragment( ); 创建文档片段节点
3.删除节点
parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性
4.修改节点
parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName );若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的目的
5.插入节点
parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );给元素增加属性节点
element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值
6.设置样式
ele.style.styleName = styleValue;设置ele元素的CSS样式
3.常见问题
DOM 和 HTML是一回事吗？
DOM 和 JavaScript什么关系？
书写细节
4.解决方案
DOM 和 HTML是一回事吗？
就像很多人把JQuery和Javascript的本质搞混一样，DOM和HTML也完全不是一回事，DOM是一个API，HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。
但是前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过script标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。
DOM 和 JAVASCRIPT什么关系？
Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。
书写细节
只有查找ID时element不加s，对新人来说要是不注意细节很可能会书写错误，导致一时半会儿找不到错误所在
getElementById
getElementsByClassName
5.代码实战
6.拓展思考
如何简化写法？
新人可能要思考一些时间，对于我们已经入门的来说通过jQuery即可简化写法。
7.参考文献
参考一:JavaScript高级程序设计
8.更多讨论
①鼠标事件有哪些？
1、onclick 事件——当用户点击时
2、onload 事件——用户进入
3、onunload 事件——用户离开，如刷新页面，提交表单，关闭窗口，关闭浏览器时触发（这个事件在Chrome和Opera浏览器里并不支持）
4、onmouseover事件——鼠标移入
5、onmouseout事件——鼠标移出
6、onmousedown事件——鼠标按下
7、onmouseup 事件——鼠标抬起
②如何获取相邻的节点？
neborNode.previousSibling :获取已知节点的相邻的上一个节点
nerbourNode.nextSlbling: 获取已知节点的下一个节点
③可以复制节点么？
cloneNode(true | false);复制某个节点
参数：是否复制原节点的所有属性
网友评论