这样有什么好处吗?

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

如果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. build.gradle 使用tips

    7.查看依赖 gradlew [你想查看的module]:dependencies >dependencies.txt 6.buildToolsVersion build tools版本号 co ...

  2. 【转】iOS 硬件授权检测:定位服务、通讯录、日历、提醒事项、照片、蓝牙共享、麦克风、相机等

    iOS系统版本的不断升级的前提,伴随着用户使用设备的安全性提升,iOS系统对于App需要使用的硬件限制也越来越严格,App处理稍有不妥,轻则造成功能不可用用户还不知道,重则会造成App Crash. ...

  3. SQL 错误1418

    1.一个或多个服务器网络地址缺少完全限定域名(FQDN).为每个服务器指定FQDN,然后再次单击“开始镜像”.2.服务器网络地址"TCP://primary.test.com:5022&qu ...

  4. delete数组引发的core分析

    delete [] ptr 引发了singnal 6 abort的core错误,跟踪过程发现写入ptr大量数据,引发内存越界,破坏了new数组的尾部数据保护,导致delete的时候core. 问题分析 ...

  5. JS 的点点滴滴

    1. ||含义 : 返回第一个有效值 eg : <script type="text/javascript"> var a=""; var c = ...

  6. freeRadius 基础配置及测试

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

  7. 检查dns服务器是否可用

    #%windir%\system32\WindowsPowerShell\v1.0\powershell.exe D:\PSScript\ERP_Production_Script\ERPRF_Upd ...

  8. [AngularJS] Directive with Transcluded Elements

    Create a wrapWith directive using advanced transclusion techniques. transclude - compile the content ...

  9. HDU 2037 今年暑假不AC (贪心)

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  10. 关于更改apache和mysql的路径的问题..

    1.禁用selinux 系统管理->selinux管理->enforing模式..改为disable..然后重启 2.修改httpd.conf的各个路径 索引后发现指向欢迎页面则注释下面这 ...