常见的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，通过一系列抽象的方法操作文档的内容，结构和样式。

官方介绍结束，现在用人话来理解：

在现实世界里，我们对所谓的’世界对象模型’都不会陌生，例如，当用’汽车’、'房子’和’树’等名词来称呼日常生活环境里的事物时，我们都可以百分百的肯定对方知道我们说的是什么，这是因为人们在对这些名词所代表的的东西有着相同的认知。于是，当对别人说"汽车停在车库里"时，可以断定他们不会理解为"小鸟关在壁橱里"等别的含义。

我们的"世界对象模型"不进可以用来描述客观存在的事物，还可以同来描述抽象概念。

例如，假设有个人想我问路，而我给出的答案是"左边第三栋房子"，这个答案有没有意义取决于那个人能够理解"左边"和"第三"的含义。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会有任何的帮助。在现实世界中，正是因为大家对抽象的"世界对象模型"有着基本的共识，人们才能用非常简单的话来表达出复杂的含义并得到对方的理解。

2.知识剖析
刚刚提到了节点。那么节点这个到底又是什么？

节点这个词是一个网络用语，代表了网络中的一个连接点。一个网络就是由一些节点构成的集合。

在现实世界中，一切事物都由原子构成。原子就是现实世界的节点。但是原子同样还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样也是节点。

DOM也是同样的情况。文档是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。

在DOM中有许多不同类型的节点。就像原子包含着亚原子微粒那样，也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：元素节点、文本节点和属性节点。

那么，DOM是由什么组成？

对于XML应用开发来说，DOM就是一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范。

DOM定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据。

作为W3C的标准接口规范，目前，DOM由三部分组成，包括：核心（core）、HTML接口和XML接口。（至于XML和HTML区别是啥，你可以理解为两种不同的语言，但是很相似。作用不一样。XML更多用于数据传输设计，HTML更多用于数据的展示模块）

核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何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样式

7.更多讨论

(1)鼠标事件有哪些？

1、onclick 事件——当用户点击时

2、onload 事件——用户进入

3、onunload 事件——用户离开，如刷新页面，提交表单，关闭窗口，关闭浏览器时触发（这个事件在Chrome和Opera浏览器里并不支持）

4、onmouseover事件——鼠标移入

5、onmouseout事件——鼠标移出

6、onmousedown事件——鼠标按下

7、onmouseup 事件——鼠标抬起

(2)如何获取相邻的节点？

neborNode.previousSibling :获取已知节点的相邻的上一个节点

nerbourNode.nextSlbling: 获取已知节点的下一个节点

(3)可以复制节点么？

cloneNode(true | false);复制某个节点

参数：是否复制原节点的所有属性