AJAX步步精心系列（二）DOM基础

ゞ浴缸里的玫瑰 2022-09-19 15:23 181阅读 0赞

>   
> 
> 
> # 一 概念 #
> 
> ## 1、DOM定义 ##
> 
>     DOM（Document Object Model）文档对象模型，它是语言和平台中立的接口，允许程序和脚本动态访问和更新文档的内容，结构和风格。
> 
> ## 2、DOM作用 ##
> 
> **    通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。**
> 
>     要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
> 
>     DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 
> 
> ## 3、DOM分类 ##

> > DOM 被分为不同的部分（核心、XML及HTML）和级别（DOMLevel 1/2/3）：
> 
> > > Core DOM ：定义了一套标准的针对任何结构化文档的对象。
> 
> > > XML  DOM ：定义了一套标准的针对 XML 文档的对象
> 
> > > HTML DOM ：定义了一套标准的针对 HTML 文档的对象。

>  
> 
> # 二 DOM如何看待HTML文档 #
> 
> ## 1、对象树 ##
> 
>     DOM 将 HTML 文档表达为树结构。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

> >  ![SouthEast][]

> > DOM将每一个HTML或XML的文档都看待成内存中的一个对象树。
> 
> > 浏览器中的一个页面对应一个HTML文档，因此有一颗与之对应的HTML的DOM树。
> 
> > 浏览器中的一个页面可能处理很多个XML的文档，因此可能有多颗XML的DOM树。

> ###  IE和Firefox的DOM对象树差异： ###

> > ![SouthEast 1][]  
> >

>  
> 
> ## 2、常用节点 ##

> > **根节点**：表示整个文档的根，不对应文档中的任何内容。
> 
> > **    注意：**在JavaScript中有一个特殊的对象document，表示当前HTML页面的根节点。
> 
> > **元素节点**：对应HTML或XML文档中的标签<body><input><div>
> 
> > **属性节点**：一个元素节点上定义的某个属性。如<input type=””>中的type。
> 
> > **文本节点**：对应文档中的一段文字信息。如：123
> 
> > **注释节点**：对应文档中的注释信息，如<!—Comment Message-->

> > >  ![SouthEast 2][]

>  
> 
>  
> 
> ## 3、编程接口 ##
> 
>     可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
> 
>     所有 HTML 元素被定义为**对象**，而**编程接口**则是对象方法和对象属性。

> > **方法：**是您能够在节点（HTML 元素）执行的动作（比如添加或修改元素）。
> 
> > **属性：**是您能够获取或设置的值（比如节点的名称或内容）
> > 
> >   
> >

> ### 知识扩展：API和DOM的关系： ###
> 
>     API（Application Programming Interface）应用程序接口，就是一堆能实现某些功能的函数、对象、方法、类的集合。编程时如果要使用这些功能，API里如果已经有了就可以直接拿来用，不用自己编了。借用百科的定义“根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API）。”就是说DOM是一种具体的API，是个函数集合。作用就是通过它里面的方法能够操作HTML、XML、XHTML。
> 
>   
> 
> 
> 本文并没有对DOM节点的操作做具体介绍，详细信息请参见[《HTML DOM教程》][HTML DOM]。
> 
>   
> 
> 
> **总结：通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。而DOM为JavaScript提供了一个获得对HTML文档中所有元素访问的入口。**
> 
>   
> 
> 
>   
> 
> 
>   
>

[SouthEast]: /images/20220828/412b43ab28474bf6a66d634503a29d71.png
[SouthEast 1]: /images/20220828/7410c1d552e24b12802d0adc0fc02ad8.png
[SouthEast 2]: /images/20220828/0cdb1ed7fe724be0b85d09ec00e2a405.png
[HTML DOM]: http://www.w3school.com.cn/htmldom/