DOM是Document Object Model的缩写,意思是文档对象模型,是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API。比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记(Tag)。根据W3C DOM规范(http://www.w3.org/DOM),DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件。简单来说,DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突,给予了Web设计师和开发者一套标准的方法,让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。

XML与HTML相似,但两者是有区别。XML和HTML都来自于SGML,它们都含有标记,有着相似的语法,HTML和XML的最大区别在 于:HTML是一个定型的标记语言,用固定的标记来描述和显示数据,比如<h1>表示首行标题,有固定的尺寸;而XML没有固定的标记,只能通过自定义的标记来描述数据的形式和结构,而不能显示。HTML是将数据 和显示混在一起,而XML则是将数据和显示分开来。那为什么能使用DOM访问和操作HTML文档(即网页)呢?Web语义化的一个发展方向是将HTML逐 渐演变为更有语义、能将数据内容与现实分离的XML,但HTML不可能立即演变为XML,目前推荐使用的是一个过渡产物——XHTML。HTML与 XHTML网页形成的节点树(统称为HTML节点树)在结构上与XML节点树一样,可以看做是一个符合DOM的XML文档,因此可以使用实现了DOM的程 序语言(如JavaScript、PHP等)来访问和操作HTML文档,即访问和操作那些节点。

由于HTML与XML的相似性及差异,JavaScript不仅实现了标准的DOM方法和属性(即由W3C制定的),而且还实现了HTML特有的DOM方法和属性,前者称为DOM Core,并不专属于JavaScript,后者称为HTML-DOM。不管是DOM Core还是HTML-DOM,我们在使用JavaScript的时候要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样。 这里不详谈DOM Core和HTML-DOM,以及跨浏览器兼容性,教材上都有详细描述。但一般推荐使用DOM Core方法和属性,尽管稍显繁杂。

一般来说,DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。

DOM Core

DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,例如XML。

JavaScript中的getElmentByld()、getElementsByTagName()、getAttribute()和setAttribute()等方法,这些都是DOM Core的组成部分。

例如:

使用DOM Core来获取表单对象的方法:

1 document.getElementsByTagName("form");

使用DOM Core来获取某元素的src属性的方法:

1 element.getAttribute("src");

HTML-DOM

在使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性。HTML-DOM的出现甚至比DOM Core还要早,它提供了一些更简明的记号来描述各种HTML元素的属性。

例如:

使用HTML-DOM来获取表单对象的方法:

1 document.forms  //HTML-DOM提供了一个forms对象

使用HTML-DOM来获取某元素的src属性的方法:

1 element.src;

通过上面所说的方法,可以发现获取某些对象、属性既可以用DOM Core来实现,也可以使用HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简短,不过它只能用来处理Web文档。

CSS-DOM

CSS-DOM是针对CSS的操作。在JavaScript中,CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性,可以使网页呈现出各种不同的效果。

例如:设置某元素style对象字体颜色的方法:

1 element.style.color = "blue";

jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象的操作的特性,使开发人员能方便地操作DOM对象。

转载于:https://www.cnblogs.com/zqn518/archive/2012/02/10/2345626.html

关于DOM操作的几个类型相关推荐

  1. 关于 DOM 操作的几个类型

    DOM是Document Object Model的缩写,意思是文档对象模型,是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API.比如DO ...

  2. 为什么DOM操作很慢

    转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...

  3. 03-老马jQuery教程-DOM操作(上)

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  4. ihtml2document能不能根据id获取dom_回到基础:什么是DOM及DOM操作?

    译者:前端小智 来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...

  5. 应用DOM操作文档的一个实用例子

    DOM(Document Object Model)是表示文档(如HTML文档)和访问.操作说清楚文档的各种元素(如HTML标记和文本串)的应用程序接口(API).在DOM中,HTML文档中的各个节点 ...

  6. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  7. win32 htmlayout dom操作demo

    之前两篇关于win32 htmlayout博文,记载了一个实现了简单的点击按钮弹出新窗口的demo,之后实践中发现,图形界面开发,最重要的还是要实现响应用户操作,改变原有界面的功能.比如说,界面上有一 ...

  8. jQuery中的事件机制与DOM操作

    jQuery事件机制 jQuery的事件机制,指的是jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定.事件解绑.事件触发. 下面我们先来回顾一下事件的几种类型. 事件 描述 c ...

  9. JavaScript(五)—— Web APIs 简介/JavaScript 必须掌握的 DOM 操作 (丰富案例 + 思维导图)

    本篇为 JavaScript 系列笔记第五篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程 系列笔记: JavaScript(一)-- 初识JavaScript / ...

最新文章

  1. 重做日志和控制文件的多路复用
  2. elementui 响应式导航栏网站_什么是响应式网站?响应式网站的优势介绍
  3. SQL MIN() 函数
  4. 会议交流 | 人工智能与机器学习创新峰会 - 知识图谱与图神经网络分会
  5. oracle 减少回表,減少oracle sql回表次數 提高SQL查詢性能 | 學步園
  6. ARP,这个隐匿在计网背后的男人
  7. 回调函数(CALLBACK)学习总结
  8. win11中gpedit.msc找不到文件怎么办 windows11gepdit.msc找不到文件的解决方法
  9. windows 远程桌面mstsc的问题
  10. 拖动滑块css,基于JavaScript实现拖动滑块效果
  11. 社会学概论(本专)【2】
  12. 游戏开发中的物理之软体
  13. TensorFlow分类任务入门
  14. 【Eternallyc】函数PlaySound和sndPlaySound
  15. 搜狗百度seo推广优化需要注意的三大事项
  16. 共轭相似以及共轭对角化
  17. golang爬取免费代理IP
  18. java计算抛物线的标准方程_抛物线及其标准方程
  19. Android源码中的目录结构详解
  20. 【java之汉字转拼音】

热门文章

  1. KOFLive Beta Daily-Scrum 2
  2. (14)VHDL测试激励编写(时钟)
  3. java sound 数据处理_Java Sound API:捕获目标端口的声音输出
  4. 打印list_按之字形顺序打印二叉树
  5. 09.QT应用程序启动外部exe文件
  6. STM32F103_EXTI外部中断
  7. python中字典的value可以为任意对象_手把手教你学Python之字典
  8. linux虚拟机能通显卡吗,英伟达 GeForce 游戏显卡正式支持虚拟机传递功能,可以完全调用...
  9. ucore和linux区别,附录 - 附录A—ucore历史 - 《操作系统的基本原理与简单实现》 - 书栈网 · BookStack...
  10. 【LeetCode】【HOT】105. 从前序与中序遍历序列构造二叉树(哈希表+递归)