这样有什么好处吗?

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

如果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. ocp 1Z0-043 61-130题解析

    61. You are working in an online transaction processing (OLTP) environment. You realize that the sal ...

  2. Spring @PostConstruct and @PreDestroy example

    In Spring, you can either implements InitializingBean and DisposableBean interface or specify the in ...

  3. jquery easyui鼠标右击显示自定义的菜单

    1.datagrid表格中,对某一行鼠标右击,显示出如下的自定义的菜单: 在html页面中写: <div id="menu" class="easyui-menu& ...

  4. [iOS微博项目 - 1.7] - 版本新特性

    A.版本新特性 1.需求 第一次使用新版本的时候,不直接进入app,而是展示新特性界面 github: https://github.com/hellovoidworld/HVWWeibo       ...

  5. Codeforces Round #245 (Div. 1) B. Working out (简单DP)

    题目链接:http://codeforces.com/problemset/problem/429/B 给你一个矩阵,一个人从(1, 1) ->(n, m),只能向下或者向右: 一个人从(n, ...

  6. asp.net中使用swfupload上传大文件

    转载:http://www.cnblogs.com/niunan/archive/2012/01/12/2320705.html 花了一天多时间研究出来的,其实也就是网上下别人的代码然后再自己修修改改 ...

  7. squid添加用户名密码认证

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  8. extjs grid renderer用法【转载】

    今天在做项目时,需要在列表中的某列添加一个超链接,首先要取得当前选中行的数据,判断数据类型,然后链接到不同的页面,研究下.发现ExtJs提供了一个很强的方法如下: var cm = new Ext.g ...

  9. Meta键盘

    由于著名的编辑器Emacs中用到Meta键,但如今大多国人所用键盘上实际并无此键,想必多有不明之处,故多方收集资料撰写此文,简要描述了Meta键及相关键盘的发展始末,至于在Emacs上如何使用国人键盘 ...

  10. BZOJ 2763: [JLOI2011]飞行路线 最短路

    2763: [JLOI2011]飞行路线 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pr ...