JS节点操作

原文链接：https://www.cnblogs.com/dalaoban/p/9498218.html

什么是DOM？

1. DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
2. DOM就是由节点组成的。

解析过程？

1. HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树状图？

上图可知，在HTML当中，一切都是节点：（非常重要）

1. 元素节点：HMTL标签
2. 文本节点：标签中的文字（比如标签之间的空格、换行）
3. 属性节点：：标签的属性。
4. 整个html文档就是一个文档节点。所有的节点都是Object。

DOM可以做什么

1. 找对象（元素节点）
2. 设置元素的属性值
3. 设置元素的样式
4. 动态创建和删除元素
5. 事件的触发响应：事件源、事件、事件的驱动程序

DOM获取节点

1. var div1 = document.getElementById(“box1”); //方式一：通过id获取单个标签

2. var arr1 = document.getElementsByTagName(“div1”); //方式通过 标签名 获得 标签数组，所以有s

3. var arr2 = document.getElementsByClassName(“hehe”); //方式通过 类名 获得 标签数组，所以有s

4. 既然2、3获取的是标签数组，那么习惯性是先遍历之后再使用。

5. 特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：

   document.getElementsByTagName(“div1”)[0]; //取数组中的第一个元素

   document.getElementsByClassName(“hehe”)[0]; //取数组中的第一个元素

DOM访问关系的获取

这里我们要重点知道parentNode和children这两个属性的用法。下面分别介绍。

获取父节点
调用者就是节点。一个节点只有一个父节点，调用方式就是

节点.parentNode

（1）nextSibling：

 指的是下一个节点（包括标签、空文档和换行节点）

火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。

IE678版本：指下一个元素节点（标签）。

（2）nextElementSibling：

火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
previous的中文是: 前一个

（1）previousSibling：

火狐、谷歌、IE9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。

IE678版本：指前一个元素节点（标签）。

（2）previousElementSibling：

火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。
总结：为了获取前一个元素节点，我们可以这样做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，综合这两个属性，可以这样写：

前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
3、补充：获得任意一个兄弟节点：

节点自己.parentNode.children[index]; //随意得到兄弟节点
获取单个的子节点
1、第一个子节点 | 第一个子元素节点：

（1）firstChild：

火狐、谷歌、IE9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。

IE678版本：指第一个子元素节点（标签）。

（2）firstElementChild：

火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。
总结：为了获取第一个子元素节点，我们可以这样做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，综合这两个属性，可以这样写：

第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
2、最后一个子节点 | 最后一个子元素节点：

（1）lastChild：

火狐、谷歌、IE9+版本：都指的是最后一个子节点（包括标签、空文档和换行节点）。

IE678版本：指最后一个子元素节点（标签）。

（2）lastElementChild：

火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。
总结：为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：

最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
获取所有的子节点
（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子。

火狐 谷歌等高本版会把换行也看做是子节点。（了解）
用法：

子节点数组 = 父节点.childNodes; //获取所有节点。
（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】

它只返回HTML节点，甚至不返回文本节点。
在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。
虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

用法：（用的最多）

子节点数组 = 父节点.children; //获取所有节点。用的最多。
nodeType
这里讲一下nodeType。

nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。

nodeType == 2 表示是属性节点 了解

nodeType == 3 是文本节点 了解