DOM（Document Object Model，文档对象模型）允许我们用 JavaScript 来探查和操作 HTML 文档里的内容。它对于创建丰富性内容而言是必不可少的一组功能。

1. 理解文档对象模型

DOM 是一组对象的集合，这些对象代表了HTML文档里的各个元素。顾名思义，DOM就像一个模型，它由代表文档的众多对象组成。

先来个简单的HTML文档的例子：

<!DOCTYPE html>

<html>

<head>

    <meta name="author" content="Luka" />

    <meta name="description" content="A simple example" />

    <title>Example</title>

</head>

<body>

<p>

    你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。

    <span>IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span>

</p>

<p>

    15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。

    什么都可以从头再来，只有青春不能。

    那么多事情，跟青春绑在一起就是美好，离开青春，就是傻冒。

</p>

</body>

</html>

从下图可以看到浏览器是如何显示上述示例HTML文档的：

作为显示HTML文档过程中的一个步骤，浏览器会解析HTML并创建一个模型。这个模型保存了各个HTML元素之间的层级关系（如下图所示），每个元素都由一个 JavaScript 对象表示。

你可以用DOM来获取文档信息，也可以对其进行修改。这是现代Web应用程序的基础。

模型里的每个对象都由若干个属性和方法。当你用它们来修改对象的状态时，浏览器会让这些改动反映到对应的HTML元素上，并更新文档。

所有代表元素的DOM对象都支持同一组基本功能：HTMLElement 对象和其定义的核心功能始终是可用的，无论对象代表何种元素都是如此。另外，某些对象会定义一些额外的功能。这些操作反映了特定HTML元素的独一无二的特性。文档模型里任何代表某个元素的对象都至少能支持HTMLElement 功能，其中一些还支持额外的功能。

不是所有可供使用的对象都代表了HTML元素。一些对象代表元素的集合，另一些则代表DOM自身的信息，当然还有Document这个镀锡，它是我们探索DOM的入口。

2. 理解 DOM Level和兼容性

DOM Level是标准化过程中的版本号，在大多数情况下应该忽略它们。

DOM 的标准化并不是完全成功的，每一个DOM Level都有描述它的标准和文档，但它们并没有完整地实现，浏览器只是简单的挑选了其中的有用功能，而忽略了其他的。更糟的是，已经实现的功能还存在某种程度的不一致性。

部分问题在于，DOM规范与HTML标准过去是分别开发的。HTML5试图通过包含一组必须实现的DOM核心功能来解决这个问题。然而这种做法尚未见效，碎片化仍然存在。

有多种方式可用来实现DOM功能的多变性。第一种方式是使用某个JavaScript库（比如jQuery），它消除了浏览器之间实现方式的差别。使用库的有点在于其一致性，但缺点是只能用库支持的那些功能。如果想突破原有功能的局限，就只能转回到直接操作DOM上，并重新面对之前的问题。

第二种是保守方式：只使用所知的被广泛支持的那些功能。这种方式一般来说是最明智的，不过它需要仔细而全面的测试。不仅如此，还必须测试新版的浏览器确保对这些功能的支持没有发生编号或者被移除。

测试DOM功能

第三张方式是测试与某一功能相关的DOM对象属性或方法是否存在。下面是一个简单的例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Example</title>

</head>

<body>

<p id="sentence">

    <img src="imgs/apple.png" alt="apple" />

</p>

<script>

    var images;

    if(document.querySelectorAll){

        images = document.querySelectorAll("#sentence > img");

    }else{

        images = document.getElementById("sentence").getElementsByTagName("img");

    }

    for (var i = 0; i < images.length; i++){

        images[i].style.border = "thick solid black";

        images[i].style.padding = "4px";

    }

</script>

</body>

</html>

此例中，脚本使用一条 if 语句来判断 document 对象是否定义了一个名为 querySelectorAll 的方法。如果这条语句的计算结果是 true，那么浏览器是支持这一功能的，我们就可以开始使用它。如果该语句的计算结果是 false，那么可以换一种方式来达到同样的目的。

谈到DOM时，经常看到的就是刚才这种建议，但它过于草率，没有指出其中的缺陷，而这些缺陷有可能很严重。

第一个缺陷在于，并不总是存在另一种方式能实现某个给定功能的效果。此例代码能顺利功能是因为测试的功能是其他函数的一种便利性加强形式，但情况并不总是如此。

第二个缺陷是只测试了该功能是否存在，而不是它的实现质量和一致性。许多功能（特别是新功能）需要多个版本的浏览器才能稳定下来并实现一致性。虽然这个问题不像以前那样严重，但也许很容易就遇到意料之外 的结果，因为依赖的浏览器功能实现方式存在差别。

第三个缺陷是必须测试每一种所依赖的功能。这么做需要耗费大量的精力，而且产生的代码充斥着无穷无尽的测试。这里并不是说它不是一种有用的测试，而是它存在缺陷，不应该取代恰当的测试。

来源：《HTML5权威指南》(《The Definitive Guide to HTML5》)

【温故而知新-Javascript】理解 DOM的更多相关文章

  1. javascript:理解DOM事件

    首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...

  2. JavaScript:理解worker事件api

    如果你不是很了解Event事件,建议先看我上一篇随文javascript:理解DOM事件.或者直接看下文worker api. hack 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的 ...

  3. 深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...

  4. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  5. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  6. 【温故而知新-Javascript】使用canvas元素（第一部分）

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  7. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  8. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  9. 第一百一十六节，JavaScript，DOM操作样式

    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

随机推荐

  1. 论httpclient上传带参数【commons-httpclient和apache httpclient区别】

    需要做一个httpclient上传,然后啪啪啪网上找资料 1.首先以前系统中用到的了commons-httpclient上传,找了资料后一顿乱改,然后测试 PostMethod filePost = ...

  2. 阿里云主机上安装jdk

    今天继续安装jdk到阿里云服务上,大家要看一下阿里云是32位还是64位的,如果是32位下载32位的包,如果是64位的下载64位的包 我的就是64位的,开始我还不知道是怎么区分32/64位的,原来X64 ...

  3. Android笔记——Android中数据的存储方式（二）

    我们在实际开发中,有的时候需要储存或者备份比较复杂的数据.这些数据的特点是,内容多.结构大,比如短信备份等.我们知道SharedPreferences和Files(文本文件)储存这种数据会非常的没有效 ...

  4. Java正则表达式实用教程

    java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包.java.util.regex包主要包括以下三个类:Pattern.Matcher和PatternSynta ...

  5. iOS 杂笔-21（self.name = “object” 和 _name =”object” 有什么不同？）

    iOS 杂笔-21(self.name = "object" 和 _name ="object" 有什么不同?) 问题如题,这是考察对属性与变量的了解而已. s ...

  6. iOS多线程-05-多图下载

    效果图 常见问题及解决方法 图片重复下载 将内存保存在内存或沙盒中. 若下载的图片量较大,则会出现UI界面不流畅的现象 在子线程中执行下载操作,然后回到主线程成中进行UI界面的刷新. 由于cell的循 ...

  7. NSTimer定时器的使用

    前言:这是关于NSTimer的学习笔记. 正文内容大纲: 1.关于计时器NSTimer的一个被添加进NSRunLoop的使用细节 2.关于NSTimer常用方法的使用 3.关于NSTimer的类别工具 ...

  8. TXT记事本转换PDF文件

    使用的方式为,读取TXT记事本的内容,然后写入创建的PDF文件. static void Main(string[] args) { const string txtFile = "D:\\ ...

  9. Weblogic11g下调WebService出现的一系列问题

    Weblogic11g下调WebService出现的一系列问题 今天在远程测试机上测试前天写的调用WebService接口方法,遇到的问题还真多啊! 首先说明一下weblogic加载jar包的顺序: ...

  10. Effective Java 73 Avoid thread groups

    Thread groups were originally envisioned as a mechanism for isolating applets for security purposes. ...