JavaScript DOM总结（文档节点）

一、DOM 概述

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model，简称DOM）

HTML DOM 模型被结构化为 对象树 。DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

DOM是W3C组织制定的一套处理 html和xml文档的规范。

所有的浏览器都遵循了这套标准。

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
 

二、DOM文档节点

1、节点概述

         节点（Node），是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。节点构成HTML文档最基本的单元。

比如：html标签、属性、文本、注释、整个文档等都是一个节点。虽然都是节点，但是实际上它们的具体类型是不同的。

比如：标签我们称为元素节点、属性称为属性节点、文本称为 文本节点、文档称为文档节点。

节点的类型不同，属性和方法也都不尽相同。

  常用节点分为四类：

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

 2、节点属性

3、文档节点

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

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

      (2)   通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种                  节点对象。

4、元素节点

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

       浏览器会将页面中所有的标签都转换为一个元素节点， 我们可以通过document的方法来获取元素节点。

       例如：document.getElementById()，根据id属性值获取一个元素节点对象。

5、属性节点

           属性节点（Attribute）表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。可以通过元素节点来获取指定的属性节点。

例如：元素节点.getAttributeNode("属性名")，根据元素节点的属性名获取一个属性节点对象。

 注意：我们一般不使用属性节点。

6、文本节点

       文本节点（Text）表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点，它包括可以字面解释的纯文本内容。文本节点一般是作为元素节点的子节点存在的。获取文本节点时，一般先要获取元素节点，在通过元素节点获取文本节点。

例如：元素节点.firstChild;，获取元素节点的第一个子节点，一般为文本节点。