javascript基础之DOM
2016-08-08 21:00
218 查看
本文节选自《JavaScript DOM 编程艺术》(人民邮电出版社)第三章。部分内容有删改。早上起来中国队又夺得三枚金牌,中国队棒棒哒~ 然后我用尽了洪荒之力才将书中的一段给搬上来,码字不易,且看且珍惜哈~
四个非常使用的 DOM 方法:getElementById、getElementByTagName、getAttribute和setAttribute。
一、文档:DOM中的“D”
DOM是“Document Object Model”(文档对象模型)的首字母缩写。如果没有document(文档),DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。
在人类语言中,“对象”这个词的含义往往不那么明确和具体,它几乎可以用来称呼任何一种客观存在的事物。但在程序设计语言中,“对象”这个词的含义非常明确和具体。
二、对象:DOM中的“O”
“对象”是一个独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。
JavaScript语言里的对象可以分为三种类型:
① 用户定义对象(user-defined object): 由程序员自行创建的对象。
② 内建对象(native object): 内建在JavaScript 语言里的对象,如Array、Math、和Date等。
③ 宿主对象(host object): 由浏览器提供的对象。
window对象对应着浏览器窗口本身,这个对象的属性和方法通常被统称为BOM(浏览器对象模型)——但我觉得称之为Window Object Model(窗口对象模型)更为贴切。BOM向程序员提供了window.open和window.blur等方法,你们在上网冲浪时看到的各种弹窗窗口和下拉菜单——其数量之多已经到了泛滥成灾的地步——几乎都是由这种方法负责创建和处理的。难怪JavaScript会有一个不好的名声!
值得庆幸的是,在这本书里我们不需要与BOM打太多的交道。我们将把注意力集中在浏览器窗口的内部而不是浏览器窗口本身。我们将着重探讨如何对网页的内容进行处理,而用来实现这一目标的载体就是document对象。
现在,我们已经对DOM中的字母“B”(document,文档)和字母“O”(object,对象)做了解释,那么字母“M”又代表着什么呢?
三、模型:DOM中的“M”
DOM中的“M”代表着“Model”(模型),但说它代表着“Map”(地图)也未尝不可。模型也好,地图也罢,它们的含义都是某种事物的表现形式。就像一个模型火车代表着一辆真正的火车、一张城市街道图代表着一个实际存在的城市那样,DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说是模型),而我们通过JavaScript去读取这张地图。
既然是地图,就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图,就必须知道这些记号的含义和用途——这个道理同样适用于DOM。要想从DOM获得信息,我们必须先把各种用来表示和描述一份文档的记号弄明白。
DOM把一份文档表示为一棵树(这里所说的“树”是数学意义上的概念),这是我们理解和运用这一模型的关键。更具体地说,DOM把文档表示为一棵家谱树。
家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系并使用parent(父)、child(子)、sibling(兄弟)等记号来表示家族成员之间的关系。家谱树可以把相当复杂的关系简明地表示出来:一位特定的家族成员既是某些成员的父辈,又是另一些成员的子辈,同时还是另一些成员的兄弟。
类似于人类家族谱系的情况,家谱树模型也非常适合用来表示一份用(X)HTML语言编写出来的文档。
请看下面这项非常基本的网页,它的内容是一份购物清单。
我们来分析一下这个网页的结构。这种分析不仅可以让我们了解它是由哪些元素构成的,还可以让我们了解为什么图3-1中的模型可以如此完美地把它表示出来。在对Doctype做出声明后,这份文档首先打开了一个<html>标签,而这个网页里的所有其它元素都包含在这个元素里。因为所有其它的元素都包含在其内部,所以这个<html>标签既没有父辈,也没有兄弟。如果这是一个一棵真正的树的话,这个<html>标签显然就是树根。
这正是图3-1中的家谱树以html为根元素的原因。毫无疑问,html元素可以代表整个文档。
如果在这份文档里更深入一层,我们将发现<head>和<body>两个分支。它们存在于同一层次且互不包含,所以它们是兄弟关系。它们有着共同的父元素<html>,但又各有各的子元素,所以它们本身又是其他元素的父元素。
<head>元素有两个子元素:<meta>和<title>(这两个元素是兄弟元素)。<body>元素有三个子元素:<h1>、<p>和<ul>(这三个元素是兄弟关系)。如果继续深入下去,我们将发现<ul>也是一个父元素。它有三个子元素,它们都是<li>元素。
利用这种简单的家谱关系记号,我们可以把各元素之间的关系简明清晰地表达出来。
例如,<h1>和<ul>之间是什么关系?答案是它们是兄弟关系。
那么<body>和<ul>之间又是什么关系?<body>是<ul>的父元素,<ul>是<body>的一个子元素。
如果把这种文档元素想像成一棵家谱树上的各个节点的话,我们就可以用同样的记号来描述DOM。不过,与使用“家谱树”这个术语相比,把一份文档称为一棵“节点树”更准确。
四个非常使用的 DOM 方法:getElementById、getElementByTagName、getAttribute和setAttribute。
一、文档:DOM中的“D”
DOM是“Document Object Model”(文档对象模型)的首字母缩写。如果没有document(文档),DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。
在人类语言中,“对象”这个词的含义往往不那么明确和具体,它几乎可以用来称呼任何一种客观存在的事物。但在程序设计语言中,“对象”这个词的含义非常明确和具体。
二、对象:DOM中的“O”
“对象”是一个独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。
JavaScript语言里的对象可以分为三种类型:
① 用户定义对象(user-defined object): 由程序员自行创建的对象。
② 内建对象(native object): 内建在JavaScript 语言里的对象,如Array、Math、和Date等。
③ 宿主对象(host object): 由浏览器提供的对象。
window对象对应着浏览器窗口本身,这个对象的属性和方法通常被统称为BOM(浏览器对象模型)——但我觉得称之为Window Object Model(窗口对象模型)更为贴切。BOM向程序员提供了window.open和window.blur等方法,你们在上网冲浪时看到的各种弹窗窗口和下拉菜单——其数量之多已经到了泛滥成灾的地步——几乎都是由这种方法负责创建和处理的。难怪JavaScript会有一个不好的名声!
值得庆幸的是,在这本书里我们不需要与BOM打太多的交道。我们将把注意力集中在浏览器窗口的内部而不是浏览器窗口本身。我们将着重探讨如何对网页的内容进行处理,而用来实现这一目标的载体就是document对象。
现在,我们已经对DOM中的字母“B”(document,文档)和字母“O”(object,对象)做了解释,那么字母“M”又代表着什么呢?
三、模型:DOM中的“M”
DOM中的“M”代表着“Model”(模型),但说它代表着“Map”(地图)也未尝不可。模型也好,地图也罢,它们的含义都是某种事物的表现形式。就像一个模型火车代表着一辆真正的火车、一张城市街道图代表着一个实际存在的城市那样,DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说是模型),而我们通过JavaScript去读取这张地图。
既然是地图,就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图,就必须知道这些记号的含义和用途——这个道理同样适用于DOM。要想从DOM获得信息,我们必须先把各种用来表示和描述一份文档的记号弄明白。
DOM把一份文档表示为一棵树(这里所说的“树”是数学意义上的概念),这是我们理解和运用这一模型的关键。更具体地说,DOM把文档表示为一棵家谱树。
家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系并使用parent(父)、child(子)、sibling(兄弟)等记号来表示家族成员之间的关系。家谱树可以把相当复杂的关系简明地表示出来:一位特定的家族成员既是某些成员的父辈,又是另一些成员的子辈,同时还是另一些成员的兄弟。
类似于人类家族谱系的情况,家谱树模型也非常适合用来表示一份用(X)HTML语言编写出来的文档。
请看下面这项非常基本的网页,它的内容是一份购物清单。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Shopping list</title> </head> <body> <h1>What to buy</h1> <p title="a gentle reminder">Don't forget to buy this stuff.</p> <ul id="purchases"> <li>A tin of beans</li> <li>Cheese</li> <li>Milk</li> </ul> </body> </html>这份文档可以用图3-1中的模型来表示。
我们来分析一下这个网页的结构。这种分析不仅可以让我们了解它是由哪些元素构成的,还可以让我们了解为什么图3-1中的模型可以如此完美地把它表示出来。在对Doctype做出声明后,这份文档首先打开了一个<html>标签,而这个网页里的所有其它元素都包含在这个元素里。因为所有其它的元素都包含在其内部,所以这个<html>标签既没有父辈,也没有兄弟。如果这是一个一棵真正的树的话,这个<html>标签显然就是树根。
这正是图3-1中的家谱树以html为根元素的原因。毫无疑问,html元素可以代表整个文档。
如果在这份文档里更深入一层,我们将发现<head>和<body>两个分支。它们存在于同一层次且互不包含,所以它们是兄弟关系。它们有着共同的父元素<html>,但又各有各的子元素,所以它们本身又是其他元素的父元素。
<head>元素有两个子元素:<meta>和<title>(这两个元素是兄弟元素)。<body>元素有三个子元素:<h1>、<p>和<ul>(这三个元素是兄弟关系)。如果继续深入下去,我们将发现<ul>也是一个父元素。它有三个子元素,它们都是<li>元素。
利用这种简单的家谱关系记号,我们可以把各元素之间的关系简明清晰地表达出来。
例如,<h1>和<ul>之间是什么关系?答案是它们是兄弟关系。
那么<body>和<ul>之间又是什么关系?<body>是<ul>的父元素,<ul>是<body>的一个子元素。
如果把这种文档元素想像成一棵家谱树上的各个节点的话,我们就可以用同样的记号来描述DOM。不过,与使用“家谱树”这个术语相比,把一份文档称为一棵“节点树”更准确。
相关文章推荐
- javascript实现DOM(基础)
- Javascript & DHTML DOM基础和基本API第1/5页
- 重拾Javascript基础(三) - DOM属性&方法
- JavaScript-需要的基础DOM特性
- JavaScript DOM 基础
- Javascript & DHTML 实例编程(教程)DOM基础和基本API
- javascript基础二JavaScript DOM编程
- JavaScript-DOM操作基础部分的内容
- javascript基础。dom操作
- JavaScript中DOM基础
- JavaScript程序设计——第6章 DOM基础
- JavaScript - JavaScript/CSS/DOM基础- [精通JavaScript+jQuery]视频教程
- Javascript DOM基础
- javascript DOM操作基础
- javascript DOM操作基础
- Javascript & DHTML DOM基础和基本API第1/5页
- javascript &DOM基础(一)
- javascript DOM 操作基础知识小结
- javascript dom基础
- javascript基础二JavaScript DOM编程