AJAX步步精心系列(二)DOM基础

前端之家收集整理的这篇文章主要介绍了AJAX步步精心系列(二)DOM基础前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


一 概念

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 元素(节点)均可被修改,也可以创建或删除节点。

DOM将每一个HTML或XML的文档都看待成内存中的一个对象树。

浏览器中的一个页面对应一个HTML文档,因此有一颗与之对应的HTML的DOM树。

浏览器中的一个页面可能处理很多个XML的文档,因此可能有多颗XML的DOM树。

IE和Firefox的DOM对象树差异:


2、常用节点

根节点:表示整个文档的根,不对应文档中的任何内容

注意:在JavaScript中有一个特殊的对象document,表示当前HTML页面的根节点。

元素节点:对应HTML或XML文档中的标签<body><input><div>

属性节点:一个元素节点上定义的某个属性。如<input type=””>中的type。

文本节点:对应文档中的一段文字信息。如:123

注释节点:对应文档中的注释信息,如<!—Comment Message-->

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教程》


总结:通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。而DOM为JavaScript提供了一个获得对HTML文档中所有元素访问的入口。

猜你在找的Ajax相关文章