dom对象模型的第二层（DOM/BOM的核心操作）

本文目录

• DOM/BOM的核心操作
• 什么是DOM（DocumentObjectModel）文档对象模型_DOM
• 程序员总说的DOM到底是什么
• 在DOM对象模型中，什么对象位于DOM对象模型的第二层

DOM/BOM的核心操作

文档对象模型(Document Object Model,简称DOM),描述了处理网页内容的方法和接口。最根本对象是document（window.document）。
DOM就是我们日常对Html所有文本节点，元素，属性等操作，访问，修改等，都在dom的范畴。 其中，我们日常用的HTML DOM，他包括HTML的标准对象模型，W3C 标准等规范。

节点层次图如下：

getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

浏览器对象模型（Browser Object Model），描述了与浏览器进行交互的方法和接口。由navigator、history、screen、location、window五个对象组成的，最根本对象是window。

BOM，就是跟浏览器有关的相关是属性，如浏览器的窗口呀，浏览器的页面跳转等。

Location的属性

Location的方法

什么是DOM（DocumentObjectModel）文档对象模型_DOM

D:document 文档 浏览器加载的页面
DOM O:object 对象 页面及页面中的任何元素都是对象
M:module 模型 页面中的元素的组织形式
DOM被W3C组织设计为一种平台无关、语言无关的API，程序或脚本通过其动态访问、修改文档的内容、样式、结构。
DOM是web 浏览器的运行规范，javascript借助DOM成就了其web标准语言的地位，在web领域实现了所谓“一次编写到处运行”的目标。
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。
脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。object这个词在台湾通常翻译成“物件”）。网页上的标签是一层层嵌套的，最外面的一层是，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是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.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.href
href 是 DOM1 HTML 规范中定义的 HTMLAnchorElement 接口的属性，返回链接（）元素的href属性的值。
在此我们用了像anchorTags这样的用法，这和JavaScript里访问第i个数组项的语法是一样的。语言中性（language-neutral，与具体语言无关）的所谓“DOM方式”访问某个节点列表中的一个项目的办法是使用在NodeList接口中定义的item() 方法：anchorTags.item(1).href。但是大多数JavaScript实现程序都允许你使用这种简单的类似于数组的语法，而这也是大多数人实际在用的方式。
+ "\n");
又一个字符串连接。在字符串的末尾加入一个回车符。
}
“for循环”结束。

程序员总说的DOM到底是什么

大家好，有些词儿，程序员之间虽然天天说，彼此之间心照不宣，但是在面对一些非技术的产品同学的时候，对方却不一定能一下子就get到点。这个系列的文章就是为了解决这种尴尬的，理想的效果是，只要一提起这些词儿，你脑海中就会出现一幅图或者一段精妙的解释，那我们就成功了。

今天Java培训班讲解的词儿是DOM，是程序员里面最基础、最常用的一个东西。它的全称是文档对象模型(DocumentObjectModel)，光看名字太抽象，简单解释一下。我们知道，一个网页，其实就是一个html文件，经过浏览器的解析，最终呈现在用户面前。html语言我们也讲过，是由很多标签组成的，像这样：

里面的head、body就是标签。这些标签不是随意摆放的，他们有自己的规则。首先它们是嵌套的，一层套一层，比如html套body，body又套p标签。其次，每一层，可以同时存在很多标签，比如head和body就是一层的，他们被外面的html套着。这样的结构很像我们电脑里的文件夹，「我的电脑」是最外面的一层，里面套着CDEF盘，每个盘里又有很多文件夹，文件夹里又有文件夹，最后才是很多具体的文件。

为什么要按照这种结构来组织呢?其实就是方便解析和查询。解析的时候，从外到里，循序渐进，好比按照图纸盖房子，先盖围墙，再盖走廊，最后才是卧室。查询的时候，会有一条明确的路线，比如D盘--》岛国文化交流--》影视作品--》苍老师.avi，这样一层一层的缩小范围，查找效率会非常高。

所以，浏览器在解析html文档的时候，会把每个标签抽象成代码里的对象，然后按照这种层次分明的结构组织起来，这就是文档对象模型，DOM了。画个图表示一下就是这样的：

这就是数据结构里典型的「树」了。所以大家经常说DOM树，其实是一个意思。浏览器在解析html的时候，会在它的内部构建这样一棵DOM树，然后按照这棵树上的层次顺序，依次来解析每个标签。标签解析完了，用户就看到了网页的内容。

但是，事情到这里还远远没有结束，因为还有javascript。浏览器解析完了html，然后就要开始解析html里的javascript代码了。我们知道，程序员可以通过javascript代码来实现一些动态的网页效果，比如去服务器拉取一段数据来展示，再比如说做一个酷炫的动画效果，这些，都还要用到DOM。

举个简单的例子，现在javascript想要在网页里显示一行字“thisisfromjavascript”。要做的第一步，就是找到那个可以显示文字的标签。这是非常容易的，因为浏览器已经把DOM都交给javascript了。DOM里的对象，正好就是javascript语言里的对象。于是，通过下面的方法，javascript可以修改DOM树上的标签对象。

随着前端知识的深入，你会发现javascript操纵DOM是非常普遍事情。比如很多网页，一开始加载出来只是个架子，只有一个loading在转圈，只有等javascript从服务器上请求到真正的数据之后，操纵DOM来显示数据，才能看到内容，这就是典型的异步加载。再比如html5的游戏，里面的人物要随着手势或鼠标来运动，多半也是javascript操纵DOM改变元素的位置来实现的。可以说，有了DOM，才使得javascript在前端世界里几乎无所不能。

但是，有一点要注意，就是操纵DOM本身是一件效率非常低的事情。因为一个网页往往是很复杂的，浏览器构造出来的DOM树往往也是很庞大的，有的甚至有几千个节点。在这样庞大的一棵树上，进行频繁的改动，对浏览器尤其是移动浏览器来说是一个不小的工作量，稍一不注意就卡了。

有人就发明了一种便捷的方法，叫虚拟DOM。简单来说就是用javascript又模拟了一棵简单的DOM树，然后所有的DOM操作都在这上面演练，这个效率是很高的。等时机成熟的时候，再把虚拟DOM树和真正的浏览器的DOM树做对比，算出差异，一次性的去改变真正的DOM树，这个效率也很高。经过这两个步骤，从整体上大大提高了javascript操纵DOM树的效率。

在DOM对象模型中，什么对象位于DOM对象模型的第二层

针对于 JavaScript 中提到的 DOM 对象模型， 更确切的说是 HTML 文档对象模型。 DOM 对象模型是
类似于 “树状结构的”。 在 “树”结构的顶层是 window对象，它是最基层的唯一的对象； 位于第二层
不仅有 document 对象，还有 location 和 另一个(记不清了，呵呵)。