版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
转自：http://madinsect.blogbus.com/logs/37339960.html
这个做了这么久的front-end了，这个问题还没有理解的这么深入，惭愧，惭愧。看看这篇文章吧
什么是DOM?
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。
脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。object这个词在台湾通常翻译成“物件”）。网页上的标签是一层层嵌套的，最外面的一层是<HTML>，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。
在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中，每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。
万维网协会（World Wide Web Consortium，W3C）已经给文档对象模型制定了一系列标准，并且正在制定更多的相关标准。当代的浏览器除支持其中的一部分标准之外，还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。也就是说现在浏览器使用的技术历史由来纷繁复杂，有些人们普遍使用的DOM技术并无标准可依。
我们将深入所有通用DOM的细节（包括IE浏览器中“与众不同”的某些技术），以全面掌握面向实践的技术。
DOM和JavaScript
我经常在QQ、MSN和email中被大家问到的“有关JavaScript”的问题，95%其实是DOM的问题。人们在习惯上不爱说DOM，要么就说 JavaScript，要么就扯到“Ajax”（一度火爆的“概念”，最近刚刚有所降温，一如上世纪末的“DHTML”那样。对于这些热点词汇的产生，我个人感到非常欣慰，因为每一次都带来人们对JavaScript技术的热捧。下一个热点词汇是什么？也许我们可以炮制一个也说不定……Pseudo- Mashup，如何？）。
我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话，就连妇孺皆知的document.write方法也找不到。
下面这段代码的作用是用一个提示框逐个显示网页中所有链接的网址，代码中被标为红色的部分就是DOM。
var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
alert("Href of this a element is : " + anchorTags[i].href + "\n");
}
这样一来哪些是核心JavaScript，哪些是DOM，各自起什么作用，就可以一目了然了。
var anchorTags =
创建了一个名为 anchorTags 的 JavaScript 变量。
document.getElementsByTagName("a")
Document接口是 DOM1核心（DOM1 Core）规范 中定义的第一个接口，而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。
DOM1核心 为Document 接口定义了 getElementsByTagName() 方法。这个方法返回一个节点列表（NodeList），也就是一种DOM特有的包含节点的数组，包含了所有符合匹配参数条件的标签，按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个节点列表。
;
分号是JavaScript里的语句结束符号。
for (var i = 0; i <
这是编程语言里典型的“for循环”。声明了循环变量i，逐个处理anchorTags节点列表里的每一个节点。这也是JavaScript的东西。
anchorTags.length
DOM1 核心 定义了NodeList接口的 length 属性。这个属性返回一个整数，就是节点列表里包含的节点数目。说起来JavaScript 的数组也有一个 length属性。
; i++) {
典型的JavaScript变量增1运算。
alert(
alert() 是一个DOM方法，弹出一个提示框，显示传递给该方法的参数（字符串）。话说这个东西是通称 0级DOM（DOM level 0）或DOM0的一些历史既成的编程接口当中的一员。DOM0 是一套“被某些浏览器所支持”的编程接口（事实上，市场上不存在不支持DOM0的浏览器，只有在某些软件爱好者的收藏品中才能见得到），不属于任何DOM 标准规范。
"Href of this a element is : " +
一个字符串字面量和一个字符串链接符。JavaScript的东西。
anchorTags[i].href
href 是 DOM1 HTML 规范中定义的 HTMLAnchorElement 接口的属性，返回链接（<a>）元素的href属性的值。
在此我们用了像anchorTags[i]这样的用法，这和JavaScript里访问第i个数组项的语法是一样的。语言中性（language- neutral，与具体语言无关）的所谓“DOM方式”访问某个节点列表中的一个项目的办法是使用在NodeList接口中定义的item() 方法：anchorTags.item(1).href。但是大多数JavaScript实现程序都允许你使用这种简单的类似于数组的语法，而这也是大多数人实际在用的方式。
+ "\n");
又一个字符串连接。在字符串的末尾加入一个回车符。
}
“for循环”结束
分享到：
相关推荐
《DOM Scripting: Web Design with JavaScript and the Document Object Model》是由Jeremy Keith撰写的一本关于JavaScript和DOM编程的经典著作。这本书深入浅出地介绍了如何利用JavaScript动态操控网页内容，提升...
JavaScript是Web开发中不可或缺的一部分，尤其在网页交互和动态效果实现上起着核心作用。"javascript案例--web页在线开发.rar"这个压缩包文件显然包含了关于JavaScript在网页在线开发中的应用实例。通过解压并查看...
dhtml_utopia__modern-web-design-using-javascript-and-dom_by_stuart-langridge
JavaScript-DOM编程艺术是关于如何...总之，JavaScript-DOM编程艺术涵盖了JavaScript语言基础和DOM操作技巧，是网页动态化和交互设计的重要组成部分。通过学习这部分内容，开发者可以创建更加生动、用户友好的Web界面。
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它允许我们通过编程方式与HTML或XML文档交互。DOM是一个标准，定义了如何表示和访问这些文档的结构化表示，将其作为一个可操作的对象树。本篇...
本书是超级畅销书的升级版，由倡导Web标准的领军人物执笔，揭示了前端开发的真谛，是学习JavaScript和DOM开发的必读之作。 本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页...
JavaScript是Web开发中不可或缺的一部分，尤其在前端领域，它提供了丰富的功能来操作和管理页面上的文档对象模型（DOM）。为了确保代码的质量和稳定性，开发者通常会进行单元测试、集成测试等，而`DOM测试工具`就是...
在网页开发中，有时我们需要对页面的某个特定DOM（文档对象模型）元素进行截图，例如为了分享、保存或分析特定内容。"WEB中截屏某一个DOM"的技术就是实现这一功能的方法。它允许我们捕获页面上指定ID或具有特定属性...
《Web前端开发手册》是一本综合性的资源，涵盖了JavaScript、CSS和DOM操作的关键知识点，旨在帮助开发者快速查询和理解这些核心技术。以下是对这些主题的详细解释： **JavaScript**： JavaScript是一种广泛应用于...
DOM是Web页面的结构模型，通过JavaScript与DOM的交互，开发者可以实现对网页内容的动态操作和控制。这本书深入浅出地讲解了如何使用JavaScript来操纵DOM，从而实现丰富的用户界面和动态效果。 书中首先介绍了...
通过阅读本书，开发者不仅可以掌握JavaScript与DOM的结合运用，还能了解到最佳实践和设计模式，提升自己的Web开发能力。 总而言之，《JavaScript.DOM编程艺术》是一本全方位指导JavaScript DOM编程的宝典，无论是...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍，它的源码提供了丰富的实例，帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM（Document Object Model）是HTML和XML文档的标准表示，它将...
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍，主要面向希望提升JavaScript客户端开发技能的程序员。DOM是Web页面的结构化表示，JavaScript通过DOM API可以...
JAVA、PHP、JS（JAVASCRIPT DOM）、HTML、XML、CSS、W3C、正则表达式、WEB开发人员必备CHM工具手册大全打包下载.rar 这里是我个人在WEB开发7年来，收集的CHM工具手册中精选出来的，每个都是精品中的精品，个人认为...
WorkerDOM 是一个JavaScript库，它的主要目标是将DOM API和框架功能带入Web Worker环境。在Web Worker中执行DOM操作可以显著提升Web应用的性能，因为它允许我们在后台线程处理复杂的计算任务，而不阻塞主线程，从而...
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它是HTML或XML文档的一种结构化表示，允许开发者通过编程方式来访问和修改页面内容。DOM是独立于语言的标准，但JavaScript是最常用来操作DOM的...
JavaScript-DOM-交互式和动态JavaScript JavaScript DOM的代码存储库-交互式和动态JavaScript，由Packt发布 JavaScript DOM-交互式和动态JavaScript 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的...
JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。;;API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发...
DOM（Document Object Model）和 BOM（Browser Object Model）是前端开发中两个基础概念。DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形结构，允许开发者通过 JavaScript 操作文档的内容和结构。BOM 则是...