JS_DOM文档对象模型（节点篇）

想要知道什么是节点，首先要知道什么是DOM，DOM全称Document Object Model文档对象模型，JS中通过DOM来对HTML文档进行操作。

文档对象模型可以拆开三份进行理解，文档表示的就是整个HTML网页文档、对象表示的是将网页中的每一个部分都转换为了一个对象、模型表示的是使用模型来表示对象之间的关系。

在文档对象模型中最重要的就是“节点”，节点(Node)是构成网页的最基本的组成部分也是构成HTML文档最基本的单元。在网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点，虽然都是节点，但是实际上他们的具体类型是不同的，常用节点分为四类：“文档节点：整个HTML文档、元素节点：HTML文档中的HTML标签、属性节点：元素的属性、文本节点：HTML标签中的文本内容”。

下面重点说一下这四个类型的节点：

文档节点（document）：

- 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。

- document对象作为window对象的属性存在的，我们不用获取可以直接使用

- 通过该对象我们可以在整个文档访问内查找节点对象，

并可以通过该对象创建各种节点对象。

元素节点（Element）：

- HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。

- 浏览器会将页面中所有的标签都转换为一个元素节点，

  我们可以通过document的方法来获取元素节点。

文本节点（Text）：

- 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。

- 它包括可以字面解释的纯文本内容。

- 文本节点一般是作为元素节点的子节点存在的。

- 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。

属性节点（Attr）：

- 属性节点表示的是标签中的一个的属性，这里要注意的是属性节点并非是元素节点

的子节点，而是元素节点的一部分。

- 可以通过元素节点来获取指定的属性节点。

文档对象模型中还有一些节点的属性：

nodeName属性：节点的名称

nodeValue属性：节点的值

nodeType属性：节点的类型

下图是一个简单的案例，简单到只有创建节点和插入节点俩操作，鼠标点击创建按钮后创建一个红色方块形的div并插入body标签中。

                       

 

  首先写一个创建按钮并绑定点击事件，然后在事件中声明变量div为创建一个新的div节点，然后写入div的文本内容为“新创建的div元素节点”，最后将创建的div插入到body标签中，就搞定了。（document.createElement("标签名")为创建节点、父节点.appendChild(子节点)为插入节点）

 

    文档对象模型（节点部分）主要是理论，但要记的内容绝对不少比如节点的类型、节点类型的详细内容和后续节点的操作，所以文档对象模型必须要学会。