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. js倒计时防页面刷新

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 程序设计模式 —— State 状态模式

    我应该如何阅读? 本文将使用优雅的文字风格来告诉你什么是状态模式. 注意: 1.在阅读本文之前请保证你已经掌控了 面对对象的思想与 多态的基本概念,否则将难以理解. 2.本文实现将用C++实现,你不一 ...

  3. 记录php日志

    1.记录PHP错误日志 display_errors与log_errors的区别 display_errors 错误回显,一般常用于开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴 ...

  4. C++ 面向对象的三个特点--继承与封装（一）

    面试的时候经常会有很多概念性的东西,许久不用都会很生疏,特意整理一下方便自己以后不记得了可以查看一下,也顺便帮助自己复习一下. 概念 继承是面向对象程序设计的一个重要特性,它允许在既有类的基础上创建新 ...

  5. .net经验积累

    希望对.net编程者有所帮助 1.学会配置环境变量  1.我的电脑-属性-环境变量-双击下面的path-粘贴路径  2.ctrl+r 输入软件名字按回车 2.常用vs2010快捷键  代码格式化:ct ...

  6. sqlserver允许远程连接的配置

    如果无法通过IP地址远程连接你服务器上的SQL Server服务器,可以参考下面的内容进行设置 在进行下述设置之前,应该确保你的网络已经安装设置完毕,服务器已经正常连接到网络中. 1.单击Window ...

  7. Engine中如何更改矢量图层字段别名？

    [解决办法]:使用IClassSchemaEdit.AlterFieldAliasName方法可以更改数据源的别名,如果想在图层的属性中更改显示的别名需要使用ITableFields.FieldInf ...

  8. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q100-Q103)

    Question 100You create a Web Part.You need to display the number of visits to a SharePoint site coll ...

  9. win-tc图形库编程

    本文地址:http://www.cnblogs.com/archimedes/p/win-tc-graphics-use.html,转载请注明源地址. 由于最近接到一个紧急任务,需要实现一个程序,显示 ...

  10. iOS之 kamailio-4.3.4sip服务器搭建-mac

    如要转载请注明出处http://www.cnblogs.com/chengxiaoyu/p/5006352.html 1.安装MySQL 去http://www.mysql.com/下载最新版本的My ...