这样有什么好处吗?

一但这些东西变成了节点对象,意味着每一个节点对象都会有很多属性和行为提供出来。

如果div是一个对象,那么就可以针对这个对象调用其中的一些方法,对div操作。

这个操作可以包括,比如,想把div删除,想加一个div,想在dl中加一个dt。

到底是删除还是添加,我对外提供 一个按钮,点击按钮进行删除还是添加,由用户来决定,这样就动态了文档。

只有把HTML中的标签变活了才能操作,否则是死的,无法操作。

这就是DOM中最核心的,把文档以及文档中所有的内容变成了对象。

DOM:Document Object Model(文档对象模型)

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

封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。

因为对象的出现就可以有属性和行为被调用。

文档对象模型

文档:标记型文档。

对象:封装了属性和行为的实例,可以被直接调用。

模型:所有标记型文档都具备一些共性特征的一个体现。

标记型文档(标签,属性,标签中封装的数据).

只要是标记型文档,DOM这种技术都可以对其进行操作。

常见的标记型文档:html  xml

DOM这种技术是如何对标记型文档机型操作的呢?

要操作标记型文档必须对其进行解析。

DOM技术的解析方式:将标记型文档解析一棵DOM树,并将树中的内容都封装成节点对象。

注意:这个DOM解析方式的好处:可以对树中的节点进行任意操作,比如:增删改查。

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

简介另一种解析方式:SAX:是由一些组织定义的一种民间常用的解析方式,并不是w3c标准,而DOM是W3C的标准。

SAX解析的方式:基于事件驱动的解析。获取数据的速度很快,但是不能对标记进行增删改。

现在很多应用软件既有DOM又有SAX。

DOM模型有三种:

DOM level 1:将html文档封装成对象。

DOM level 2:在leve 1基础上加入了新功能,比如解析名称空间。

DOM level 3:将xml文档封装成了对象。

DHTML:动态的HTML。不是一门语言:是多项技术综合体的简称。

其中包含了HTML,CSS,DOM,Javascript。

这四个技术在动态html页面效果定义时,都处于什么样角色呢?负责什么样的职责呢?

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

简单说:用标签封装数据。

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

简单说:对数据进行样式定义

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

简单说:将文档和标签以及其他内容变成对象。

JS:负责提供程序设计语言,对页面中的对象进行逻辑操作。

简单说:负责页面的行为定义。就是页面的动态效果。

所以javascript是动态效果的主力编程语言。

DHTML+XMLhttpRequest = AJAX

BOM:Browser Object Model 浏览器对象模型。

这个模型方便于操作浏览器。

浏览器对应的对象就是window对象。这个可以通过查阅dhtml api获得。

-->

[未完成]关于DOM的总结的更多相关文章

  1. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  2. DOM的认识以及一些节点的应用

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...

  3. 《JavaScript DOM编程艺术》学习笔记(三)

    终于要完成这最后一部分了,距离第二部分已经过去五天了,一直想早点写的,但还是拖到今天了………… 34.position属性的和法制:static是position属性的默认值,意思是有关元素将按照它们 ...

  4. 优化--前端(全占课,未完成作业:);CDN; Http/2的设置(未完成)

    前端效能: 关键渲染路径:Google 文档 JavaScript 加载最佳化 让html和javascript同时渲染: 设置<script>的async或者defer属性(boolea ...

  5. react之四种组件中DOM样式设置方式

    1.行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现 行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方 例如:render函数里.组件原型上.外链js文件 ...

  6. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  7. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  8. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  9. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

随机推荐

  1. HDU 5680 zxa and set (数学 推导结论)

    zxa and set 题目链接: http://acm.hust.edu.cn/vjudge/contest/121332#problem/G Description zxa has a set , ...

  2. Test Spring el with ExpressionParser

    Spring expression language (SpEL) supports many functionality, and you can test those expression fea ...

  3. codeforces 630B Moore's Law

    B. Moore's Law time limit per test 0.5 seconds memory limit per test 64 megabytes input standard inp ...

  4. [iOS基础控件 - 6.10.7] UIWindow

    A.UIWindow概念 1.继承UIView,是一种特殊的UIView 2.通常一个APP只有一个UIWindow 3.iOS程序启动后,创建的第一个视图就是UIWindow 4.没有UIWindo ...

  5. ASP.NET WebForm中前台代码如何绑定后台变量

    转载自 http://www.cnblogs.com/lerit/archive/2010/10/22/1858007.html 经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有& ...

  6. POJ1189钉子和小球(DP)

    对钉子DP,如果钉子存在DP[i+1][j]+=DP[i][j]; DP[i+1][j+1]+=DP[i][j]; 如果不存在DP[i+2][j+1]+=4*DP[i][j]; 见代码:(有一个比较坑 ...

  7. ORACLE R12 MOAC

    MOAC简介 MOAC(Multi-Org Access Control)为多组织访问控制,是Oracle EBS R12的重要新功能.它可以实现在一个Responsibility下对多个OU(Ope ...

  8. Mybatis学习之配置文件

    Mybatis也是ORM框架的一种,与Hibernate框架的不同就是Hibernate框架是实体与表的映射,是一种全自动的ORM实现,而Mybatis是实体与sql语句的映射,是一种半自动的ORM映 ...

  9. UML图示与代码对照

    本文转载:http://www.cnblogs.com/iamlilinfeng/archive/2012/08/29/2662740.html 一.类继承 1 public class Father ...

  10. PIL在windwos系统下Image.show无法显示图片问题的解决方法

    环境:1.win7 64位 2.python 2.7.8 3.PIL-1.1.7.win32-py2.7 在运行一下例子时候出现问题: #-*-coding:utf-8-*- __author__ = ...