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. 解决死锁SQL

    USE [master]GO/****** Object: StoredProcedure [dbo].[p_lockinfo] Script Date: 04/03/2014 15:12:40 ** ...

  2. bootstrap 分页

    1.背景: 前端页面使用bootstrap分页,同时与搜索条件联动: 2. jsp页面由服务端返回后, 异步请求动态创建表格, 分页的数据由服务端第一次返回后初始化, 以后每次异步请求再更新. jsp ...

  3. Dom4j 锁竞争性能低下解决

    在最近的项目中使用 Dom4j 解析 xml 发现性能低下,有锁竞争的情况,解决如下: SAXParserFactory factory = new org.apache.xerces.jaxp.SA ...

  4. 移位操作<<和>>，是逻辑数字上的移动（和大端小端无关）

    问题描述 这几天帮同事调试DSP TMS320F28335,这鬼东西蛋疼死了.char是16bit的,16位就是他的最小内存单元.但是PC机串口发过来的有8bit的数据,然后转换就出问题. 一开始不知 ...

  5. sqlserver 死锁原因及解决方法

    其实所有的死锁最深层的原因就是一个:资源竞争 表现一: 一个用户A 访问表A(锁住了表A),然后又访问表B,另一个用户B 访问表B(锁住了表B),然后企图访问表A,这时用户A由于用户B已经锁住表B,它 ...

  6. DataTable 转换为ArrayList 再转换成 json 格式

    //JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();        //javaScriptSeriali ...

  7. 文件快速搜索工具-Everything的使用（转）

    首先它是一款基于名称实时定位文件和目录的搜索工具,有以下几个优点: 快速文件索引 快速文件搜索 较低资源占用 轻松分享文件索引 实时跟踪文件更新 通过使用everything小工具,可以提高我们的工作 ...

  8. android Java BASE64编码和解码一：基础

    今天在做Android项目的时候遇到一个问题,需求是向服务器上传一张图片,要求把图片转化成图片流放在 json字符串里传输. 类似这样的: {"name":"jike&q ...

  9. 根据包名字符串跳转Activity

    /** * 跳转到对应activity */ public void toActivity(Context context,String fullName) { if (className != nu ...

  10. vi编辑器常用配置

    在终端下使用vim进行编辑时,默认情况下,编辑的界面上是没有显示行号.语法高亮度显示.智能缩进等功能的.为了更好的在vim下进行工作,需要手动设置一个配置文件:.vimrc. 在启动vim时,当前用户 ...