JavaScript的DOM概念和DHTML概念

一、DOM概述:

  1.DOM解释:DOM(Document Object Model(文档对象模型))。

    D(文档)可以理解为整个 Web 加载的网页文档即标记型文档

    O(对象)封装了属性和行为的实例,可以直接调用属性和方法

    M(模型)所有标记型文档都具备一些共性特征的一个体现,标记型文档(标签,属性,标签中封装的数据),也可以理解为网页文档的树型结构。

  2.DOM作用:

    用来将标记型文档封装成对象,并将标记型文档中所有内容(标签,文本,属性等)都封装成对象

    封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容,因为对象的出现就可以有属性和行为被调用。

    简单的说就是定义了访问和操作标记型文档的标准方法(只要是标记型文档DOM这种技术都可以进行操作)。

  3.DOM技术的解析方式:

    将标记型文档解析为一颗DOM树,并将树中的内容都封装成节点对象

    好处:可以对树中的节点进行任意的操作,比如增删改查

    弊端:这种解析需要将整个标记型文档加载进内存,意味着如果标记型文档的体积很大,比较浪费内存空间

    注:另一种解析方式:

      SAX,是由一些组织定义的一种民间常用的解析方式,并不是W3C的标准(DOM是W3C的标准),这种解析方式是基于事件驱动的解析,获取数据的速度很快,但是不能对标记进行增删改的动作

  4.DOM树:

    加载 HTML 页面时,Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成。

        技术分享

  5.节点的种类:

    •   整个文档是一个文档节点
    •   每个 HTML 标签是一个元素节点(常用)
    •   包含在 HTML 元素中的文本是文本节点(常用)
    •   每一个 HTML 属性是一个属性节点(常用)
    •   注释属于注释节点 

            技术分享

 

  6.DOM等级:DOM 有三个等级,分别是 DOM1、DOM2、DOM3
      DOM1 :将HTML文档封装成对象,在 1998 年 10 月成为W3C 标准。DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera1.7+。

    DOM2:在DOM1基础上加入了新功能,比如解析名称空间

    DOM3:将XML文档封装成了对象

    PS:IE 中的所有 DOM 对象都是以 COM 对象的形式实现的,这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异。

 

 

 

二、DHTML:动态的HTML

  不是一门语言,是多项技术综合体的简称,其中包含了HTML,CSS,DOM,JavaScript

  HTML,CSS,DOM,JavaScript这四门技术再动态html页面效果定义时,负责的职责:

    HTML:负责提供标签,对数据进行封装,目的是便于对该标签中的数据进行操作。简单说:用标签封装数据

    CSS:负责提供样式属性,对标签中的数据进行样式的定义。简单说:对数据进行样式定义

    DOM:负责将标记型文档以及文档胡总的所有内容进行解析,并封装成对象,在对象中定义了更多的属性和行为,便于对对象操作。简单说:将文档和标签以及其他内容变成对象

    JavaScript:负责提供程序设计语言,对页面中的对象进行逻辑的操作。简单说:负责页面的行为定义,就是页面的动态效果

    DHTML+XMLhttpRequest=AJAX

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。