这样有什么好处吗?

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

如果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. homework_08

    一.C++变量的作用域和生命周期 上面的程序中第一个正整数a的作用域是整个程序,而第二个正整数a的作用域是大括号内,除了大括号它的生命周期就结束了.因此先输出的是2,而后输出的是1. 二.理解堆和栈, ...

  2. homework-05 GoldNumberServer

    作业要求 这次作业要求实现一个黄金数游戏服务器,游戏流程如下,每个client向服务器提交一个有理数,服务器接收到所有客户端的提交后计算这些数字的平均数,再将其乘以黄金分割得到一个GoldNumber ...

  3. JDBC学习笔记(10)——调用函数&存储过程

    如何使用JDBC调用存储在数据库中的函数或存储过程: * 1.通过COnnection对象的prepareCall()方法创建一个CallableStatement *    对象的实例,在使用Con ...

  4. C++中#include包含头文件带 .h 和不带 .h 的区别

    C++中#include包含头文件带 .h 和不带 .h 的区别? 如 #include <iostream> 和 #include <iostream.h> 包含的东西有哪些 ...

  5. 关于CoreData和SQLite多线程访问时的线程安全问题

    数据库读取操作一般都是多线程访问的.在对数据进行读取时,我们要保证其当前状态不能被修改,即读取时加锁,否则就会出现数据错误混乱.IOS中常用的两种数据持久化存储方式:CoreData和SQLite,两 ...

  6. HL7及PIX相关的测试工具

    最近在开发PIX项目时需要一些工具, 比如PIX各个Actor的测试工具, HL7消息的验证工具等等. 下面列下我找见的几个 必备工具. 1. http://hit-testing.nist.gov: ...

  7. POJ 3671 Dining Cows (DP,LIS, 暴力)

    题意:给定 n 个数,让你修改最少的数,使得这是一个不下降序列. 析:和3670一思路,就是一个LIS,也可以直接暴力,因为只有两个数,所以可以枚举在哪分界,左边是1,右边是2,更新答案. 代码如下: ...

  8. 关于session更新的问题

    最近在学习用ssh框架做一个实习生招聘系统,已经做了大半.今天突然想到一个问题,在登录的时候我把用户的所有信息放到session中去,那么我不同用户同时登录的时候session中的信息是否会被覆盖掉( ...

  9. VHDL TestBench基础(转)

    TestBench的主要目标是: 实例化DUT-Design Under Test 为DUT产生激励波形 产生参考输出,并将DUT的输出与参考输出进行比较 提供测试通过或失败的指示 TestBench ...

  10. [原]使用node-mapnik和openstreetmap数据初步搭建瓦片服务

    最近依然还是有点小忙,只能挤点时间来学习点,先解决有没有的问题,再解决好不好的问题:) 本文将承接上文<使用node-mapnik生成openstreetmap-carto风格的瓦片>的内 ...