JS DOM基础 DOM介绍 旧的DOM用法 快速查找节点 ES6 关系查找节点 节点操作 文本内容操作
什么是DOM
DOM 不是对象，也不是方法
DOM 的全称是 Document Object Model，译为文档对象模型,它是 W3C 制定的一套书写 HTML 分析器的标准接口规范。
DOM是文档对象模型，模型将整个文档看成是一个对象，而该对象又是由一个个节点对象组成的。
DOM就是用节点来构建整个页面，HTML里面的所有东西，都是节点。
说的通俗一点，DOM 就是为 HTML 文档提供的一个API（接口）。该API提供了对HTML 文档中元素，属性和文本的一系列操作方法和属性。
DOM的版本
DOM0（非标准，仅仅是历史上的一个参考点）
DOM1：1998 年 10 月 01 日（由dom核心，和dom html 两部分组成）
DOM2：2000 年 11 月 13 日（增加了对鼠标和用户事件，范围，遍历和层叠样式表的支持，同时对1级核心进行了扩展）
DOM3：2004 年 04 月 07 日（引入统一的载入/保存文档和验证方法，对dom进行进一步扩展）
DOM4：2015 年 11 月 19 日（强化3级，和加入一些新特性）
DOM历史发展将其分为DOM0到DOM4级。
非标准，意思是没有统一标准，没有特别的提出来“DOM”概念。一般不说版本多少多少，一般都是说的DOM2或DOM0。
DOM0级提供了一些快速访问页面中常用元素节点的属性，绑定事件用 on，只能绑一个事件。
DOM2级开始，提供了许多查找元素节点的方法，绑定事件用 addEventListener，可以绑多个。
DOM2级之前通常通过元素节点之间的关系来查找元素节点。
DOM节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
1、文档是一个文档节点(document)。
2、所有的HTML元素都是元素节点(elementNode)。
3、所有 HTML 属性都是属性节点(attributeNode)。
4、文本插入到 HTML 元素是文本节点(textNode)。
5、注释是注释节点。
一般我们用的节点可以大致分为：元素节点，属性节点，文本节点。
注意：在 DOM 树结构中，属性节点比较特殊，它并不是元素节点的子节点。
| 节点类型 | nodeName | nodeType | nodeValue |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
注：nodeName获取的标签名是纯大写的。
一些老的查找节点的属性（集合）：
document.body 返回文档的body元素
document.images 返回所有的images对象的引用
document.links 返回所有的Area和links对象的引用
document.anchors 返回所有的Anchors对象的引用
document.forms 返回所有的forms对象的引用
现在常用的查找元素节点的方法：
ES5：
document上独有的两个：
document.getElementById("字符串的id值"); 返回一个dom元素节点
document.getElementsByName("字符串的name属性值"); 返回一个dom元素节点的伪数组
通用的：
parentNode.getElementsByTagName("字符串的标签名"); 返回一个dom元素节点的伪数组
parentNode.getElementsByClassName("字符串的类名"); 返回一个dom元素节点的伪数组
ES6(通用)：
parentNode.querySelector("选择器字符串"); 通过选择器来获取，永远只获取第一个元素
parentNode.querySelectorAll("选择器字符串") 通过选择器来获取，得到一个伪数组
常用的查找节点的属性：
两种方式，见名思意。
元素节点： 普通节点(会找到文本、属性节点，很乱)：
element.parentElement element.parentNode
element.firstElementChild element.firstChild
element.lastElementChild element.lastChild
element.children element.childNodes
element.previousElementSibling node.previousSibling
element.nextElementSibling node.nextSibling
注：伪数组对象：选中的不是单个节点的时候，返回就是伪数组对象。
有两种类型：htmlCollectionList NodeList
但是用起来是一样的，用变量接住用就是了。
元素节点的操作：
创建节点：
document.createElement(tagString) 用指定的标签名称创建一个空的标签
注意：只能document调用，并且返回值仅仅是创建了一个元素节点对象，没有添加到html文档中。
添加节点：
parentElement.appendChild(newChildNode) 向某个父节点添加最后一个子节点
parentElement.insertBefore(newChildNode，oldChildNode) 在指定的已有的子节点之前插入新节点
删除节点：
parentElement.removeChild(ChildNode) 从元素中移除子节点
Element.remove(Node) 移除节点
替换节点（改）：
parentElement.replaceChild(newnode,oldnode) 替换元素中的子节点
克隆节点：
element.cloneNode(boolean) 克隆节点
注意：返回值是克隆的节点，且未加入html文档。
元素节点的增删改查是它的常用操作，DOM提供了大量的方法来实现这些操作
文本节点的操作：
文本节点内容的获取：
textNode.nodeValue
注意：一般我们操作文本节点中的内容时是不需要获取文本节点的，而是直接通过元素节点拿到文本的值，所以该方法很少使用。
只获取文本节点的内容：
elementNode.innerText 单单只是一个字符串文本
获取元素节点下面所有的内容：
elementNode.innerHTML 此方法，字符串会被解析，可以写标签、属性、都认识
注意：两个属性都是可读可写的，其值为字符串，可直接用于内容的获取或者修改。
文本的节点的操作一般都是通过元素节点来完成的，包括属性innnerHTML和innerText。
节点是唯一的，并且只有在dom树上的节点才会渲染。
