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. JPA(5)使用二级缓存

    jpa的缓存分为一级缓存和二级缓存,一级缓存值得是会话级别的,而二级缓存是跨会话级别的. 使用二级缓存,使用到了Ehcache,首先第一步需要在配置文件中配置使用了二级缓存 <shared-ca ...

  2. JPA学习(1)基础认知

    JPA 是什么 Java Persistence API:用于对象持久化的API. Java EE 5.0 平台标准的 ORM 规范,使得应用程序以统一的方式访问持久层: JPA和Hibernate的 ...

  3. ASP.NET Web API 通过Authentication特性来实现身份认证

    using System; using System.Collections.Generic; using System.Net.Http.Headers; using System.Security ...

  4. Android的新虚拟机ART

  5. Thumbnailator压缩图片

    Thumbnailator是一款不可多得的处理图片的第三方工具包,它写法简单到让人无法相信,Java本身也有处理图片压缩的方法,但是代码冗长到让人痛不欲生,在篇末会给出Java本身的实现方式,做下对比 ...

  6. mvc项目架构分享系列之架构搭建之Repository和Service

    项目架构搭建之Repository和Service的搭建 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4. ...

  7. mysql实时同步到mssql的解决方案

    数据库在应用程序中是必不可少的部分,mysql是开源的,所以很多人它,mssql是微软的,用在windows平台上是非常方便的,所以也有很多人用它.现在问题来了,如何将这两个数据库同步,即数据内容保持 ...

  8. 用R语言分析我的fitbit计步数据

    目标:把fitbit的每日运动记录导入到R语言中进行分析,画出统计图表来 已有原始数据:fitbit2014年每日的记录电子表格文件,全部数据点此下载,示例如下: 日期 消耗卡路里数 步 距离 攀爬楼 ...

  9. FileReader和FileWriter

    FileReader和FileWriter 使用fileoutputstream类向文件写入数据与使用fileinputstream类从文件中将内容读取出来,存在不足,就是中文占两个字节, 搞不好就会 ...

  10. 安卓开发_浅谈ListView（SimpleAdapter数组适配器）

    安卓开发_浅谈ListView(ArrayAdapter数组适配器) 学习使用ListView组件和SimapleAdapter适配器实现一个带图标的ListView列表 总共3部分 一.MainAc ...