JavaScript|JavaScript之DOM增删改查(重点) css3|html5|html|css|javascript

目录
DOM
DOM操作
DOM操作之事件
DOM操作之查询
查询方法
查询属性
其他
DOM操作之增加
DOM操作之删除
DOM操作之修改
DOM操作回调函数的优化???????
DOM??????? 文档模型对象(Document Object Model):通过DOM可以来任意修改网页的各个内容。
文档：文档指的是网页，一个网页就是一个文档。
对象：对象指将网页中的每一个节点都转换为对象，转换完对象以后，就可以以一种纯面向对象的形式来操作网页了。
模型：模型用来表示节点和节点之间的关系，方便操作页面。
节点（Node）：节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
虽然都是节点，但是节点的类型却是不同的。
常用的节点分为以下几种：

节点种类	描述
文档节点（Document）	代表整个网页
元素节点（Element）	代表网页中的标签
属性节点（Attribute）	代表标签中的属性
文本节点（Text）	代表网页中的文本内容

DOM操作一般DOM操纵增删改查等，都需要和事件以及按钮(或其他)进行绑定，如果是按钮，点击页面某个按钮，则会执行对应绑定好的回调函数，通过在回调函数里面进行增删改查是个不错的选择。所以，本总结将DOM操作从事件、查、增、删、改来进行总结。
DOM操作之事件事件指的是用户和浏览器之间的交互行为。比如点击按钮等，可以为事件来绑定回调函数来响应事件。
绑定事件的方法主要有两种：
1.可以在标签的事件属性中设置相应的JS代码

2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件

注意细节：
上述第二种方式操作时会存在一定问题，因为浏览器在加载页面的时候，是自上而下的顺序加载的，加载一行执行一行，如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，此时将会无法正常获取到DOM对象，导致DOM操作失败。
解决办法：
1.可以将JS代码编写到body的下边。
2.将js代码编写到window.onload = function(){}中，window.onload 对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，DOM对象已经加载完毕了

DOM操作之查询在网页中浏览器已经为我们提供了document对象，其代表的是整个网页，是window对象的属性，可以在页面中直接使用。
查询方法查询方法如下所示：

方法	描述
document.getElementById(“id属性值”);	根据元素的id属性查询一个元素节点对象
document.getElementsByName(“name属性值”);	根据元素的name属性值查询一组元素节点对象
document.getElementsByTagName(“标签名”);	根据标签名来查询一组元素节点对象

查询属性查询元素的属性：
语法：

元素.属性名

示例：ele.id、ele.value等
注意细节：class属性不能采用这种方式，读取class属性时需要使用元素.className
修改元素的属性：

元素.属性名 = 属性值

查询节点元素的方式一般是通过具体的元素节点来查询，通过标签名查询当前元素的指定后代元素。
查询的方式有：

方式	描述
元素.childNodes	获取当前元素的所有子节点，但是会获取到空白的文本子节点
元素.children	获取当前元素的所有子元素
元素.firstChild	获取当前元素的第一个子节点，但会获取到空白的文本子节点
元素.lastChild	获取当前元素的最后一个子节点
元素.parentNode	获取当前元素的父元素
元素.previousSibling	获取当前元素的前一个兄弟节点
元素.nextSibling	获取当前元素的后一个兄弟节点
firstElementChild	获取当前元素的第一个子元素
元素.firstChild.nodeValue	读取第一个子节点的文本内容

注意细节：

childNodes属性会获取包括文本节点在呢的所有节点，根据DOM标签标签间空白也会当成文本节点。在IE8及以下的浏览器中，不会将空白文本当成子节点。
previousElementSibling获取前一个兄弟元素，IE8及以下不支持。
firstElementChild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用。

其他此外，document对象的其他属性和方法有：

属性或方法	描述
document.all	获取页面中的所有元素，相当于document.getElementsByTagName(“*”);
document.documentElement	获取页面中html根元素
document.body	获取页面中的body元素
document.getElementsByClassName()	根据元素的class属性值查询一组元素节点对象（这个方法不支持IE8及以下的浏览器）
document.querySelector()	根据CSS选择器去页面中查询一个元素（如果匹配到的元素有多个，则它会返回查询到的第一个元素）
document.querySelectorAll()	根据CSS选择器去页面中查询一组元素（会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个，也是返回数组。使用则需要通过操作数组方式来使用）

DOM操作之增加增加操作需要从以下几步进行：

创建好一个元素节点对象。
为元素节点创建一个文本节点对象。
再将文本节点对象绑定给元素节点。
找到增加节点的目标位置的父节点对象。
通过父节点对象增加子节点对象的方式进行添加。

注意细节：

document.createElement(“TagName”)用于创建一个元素节点对象。（TagName是创建元素节点的标签名字）
document.createTextNode(“textContent”)用于创建一个文本节点对象。
元素节点.appendChild(文本节点对象)用于将文本信息添加到元素节点对象中去。

代码示例：

DOM-添加#divMain { location: center; position: relative; } #div1 { position:absolute; width: 200px; height: 500px; margin-left: 200px; } #divB { position: absolute; width: 100px; height: 300px; } button { margin: 10px; width: 100px; height: 40px; text-align: center; background-color: pink; } li1 li2 li3

DOM操作之删除 DOM删除，常规主要有以下步骤：

获取父节点对象
获取子节点对象
通过父节点对象来删除子节点对象

注意细节：

删除子节点方式：父节点.removeChild(子节点对象)
代码中，优化情况主要是通过子节点自身的属性parentNode，来获取到父节点，然后再调用removeChild()来讲目标子节点进行删除。

代码示例：

DOM-添加#divMain { location: center; position: relative; } #div1 { position:absolute; width: 200px; height: 500px; margin-left: 200px; } #divB { position: absolute; width: 100px; height: 300px; } button { margin: 10px; width: 100px; height: 40px; text-align: center; background-color: pink; } li1 li2 li3

DOM操作之修改 DOM修改，主要有以下步骤：（修改也可以理解为替换操作）

创建好一个元素节点对象。
为元素节点创建一个文本节点对象。
再将文本节点对象绑定给元素节点。
获取父节点对象。
将目标节点替换成网页中（必须是父元素的子元素）的已存在子元素节点。

注意细节：

修改（替换）是通过：父元素对象.replaceChild(旧节点,新节点)

代码示例：

DOM-添加#divMain { location: center; position: relative; } #div1 { position:absolute; width: 200px; height: 500px; margin-left: 200px; } #divB { position: absolute; width: 100px; height: 300px; } button { margin: 10px; width: 100px; height: 40px; text-align: center; background-color: pink; } li1 li2 li3

DOM操作回调函数的优化但增删改查操作一旦变多之后，这需要写大量的重复代码，这时候可以将重复代码整理成一个函数模型，直接拿来调用即可。这样可以简化代码。
直接上代码：