《Javascript_DOM编程艺术研究》由会员分享，可在线阅读，更多相关《Javascript_DOM编程艺术研究（83页珍藏版）》请在金锄头文库上搜索。
1、编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第1页 共1页n更多企业学院： 中小企业管理全能版183套讲座+89700份资料总经理、高层管理49套讲座+16388份资料中层管理学院46套讲座+6020份资料国学智慧、易经46套讲座人力资源学院56套讲座+27123份资料各阶段员工培训学院77套讲座+ 324份资料员工管理企业学院67套讲座+ 8720份资料工厂生产管理学院52套讲座+ 13920份资料财务管理学院53套讲座+ 17945份资料销售经理学院56套讲座+ 14350份资料销售人员培训学院72套讲座+ 4879份资料n更多企业学院： 中小企业管理全能版183套讲
2、座+89700份资料总经理、高层管理49套讲座+16388份资料中层管理学院46套讲座+6020份资料国学智慧、易经46套讲座人力资源学院56套讲座+27123份资料各阶段员工培训学院77套讲座+ 324份资料员工管理企业学院67套讲座+ 8720份资料工厂生产管理学院52套讲座+ 13920份资料财务管理学院53套讲座+ 17945份资料销售经理学院56套讲座+ 14350份资料销售人员培训学院72套讲座+ 4879份资料第3章 DOM本章内容 节点的概念四个非常实用的DOM方法：getElementById、getElementsByTagName、getAttribute和setAttr
3、ibute终于要与DOM面对面了。能够向大家介绍DOM是笔者的荣幸，我非常乐于带领大家通过DOM的眼睛去看世界。3.1文档：DOM中的“D”DOM是“Document Object Model”（文档对象模型）的首字母缩写。如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。在人类语言中，“对象”这个词的含义往往不那么明确和具体，它几乎可以用来称呼任何一种客观存在的事物。但在程序设计语言中，“对象”这个词的含义非常明确和具体。3.2对象：DOM中的“O”在上一章的末尾，我们向大家展
4、示了几个JavaScript对象的例子。你们应该还记得，“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定对象去调用的函数被称为这个对象的方法。JavaScript语言里的对象可以分为三种类型：真的不掉线吗？、？用户定义对象（user-defined object）：由程序员自行创建的对象。本书不讨论这种对象。内建对象（native object）：内建在JavaScript语言里的对象，如Array、Math和Date等。宿主对象（host object）：由浏览器提供的对象。在JavaScript语言的发展初期，程序员在编写JavaScript脚
5、本时经常需要用到一些非常重要的宿主对象，它们当中最基础的是window对象。window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器对象模型）但我觉得称之为Window Object Model（窗口对象模型）更为贴切。BOM向程序员提供了window.open和window.blur等方法，你们在上网冲浪时看到的各种弹出窗口和下拉菜单其数量之多已经到了泛滥成灾的地步几乎都是由这些方法负责创建和处理的。难怪JavaScript会有一个不好的名声！值得庆幸的是，在这本书里我们不需要与BOM打太多的交道。我们将把注意力集中在浏览器窗口的内部而不是浏览器窗口本身。我们将着
6、重探讨如何对网页的内容进行处理，而用来实现这一目标的载体就是document对象。在本书的后续内容里，我们将尽可能地只讨论document对象的属性和方法。现在，我们已经对DOM中的字母“D”（document，文档）和字母“O”（object，对象）做了解释，那么字母“M”又代表着什么呢？3.3模型：DOM中的“M”DOM中的“M”代表着“Model”（模型），但说它代表着“Map”（地图）也未尝不可。模型也好，地图也罢，它们的含义都是某种事物的表现形式。就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个实际存在的城市那样，DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们
7、提供了当前网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。真的不掉线吗？、？既然是地图，就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图，就必须知道这些记号的含义和用途这个道理同样适用于DOM。要想从DOM获得信息，我们必须先把各种用来表示和描述一份文档的记号弄明白。DOM把一份文档表示为一棵树（这里所说的“树”是数学意义上的概念），这是我们理解和运用这一模型的关键。更具体地说，DOM把文档表示为一棵家谱树。家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系并使用parent（父）、child（子）、sibling（兄弟）等记号来表明家族
8、成员之间的关系。家谱树可以把一些相当复杂的关系简明地表示出来：一位特定的家族成员既是某些成员的父辈，又是另一位成员的子辈，同时还是另一位成员的兄弟。类似于人类家族谱系的情况，家谱树模型也非常适合用来表示一份用(X)HTML语言编写出来的文档。请看下面这份非常基本的网页，它的内容是一份购物清单。这份文档可以用图3-1中的模型来表示。我们来分析一下这个网页的结构。这种分析不仅可以让我们了解它是由哪些元素构成的，还可以让我们了解为什么图3-1中的模型可以如此完美地把它表示出来。在对Doctype做出声明后，这份文档首先打开了一个标签，而这个网页里的所有其他元素都包含在这个元素里。因为所有其他的元素都
9、包含在其内部，所以这个标签既没有父辈，也没有兄弟。如果这是一棵真正的树的话，这个真的不掉线吗？、？标签显然就是树根。图3-1 把网页中的元素表示为一棵家谱树这正是图3-1中的家谱树以html为根元素的原因。毫无疑问，html元素完全可以代表整个文档。如果在这份文档里更深入一层，我们将发现和两个分枝。它们存在于同一层次且互不包含，所以它们是兄弟关系。它们有着共同的父元素，但又各有各的子元素，所以它们本身又是其他一些元素的父元素。元素有两个子元素：和（这两个元素是兄弟关系）。元素有三个子元素：、和（这三个元素是兄弟关系）。如果继续深入下去，我们将发现也是一个父元素。它有三个子元素，它们都是元素。利
10、用这种简单的家谱关系记号，我们可以把各元素之间的关系简明清晰地表达出来。例如，和之间是什么关系？答案是它们是兄弟关系。那么和之间又是什么关系？是的父元素，是的一个子元素。如果把各种文档元素想像成一棵家谱树上的各个节点的话，我们就可以用同样的记号来描述DOM。不过，与使用“家谱树”这个术语相比，把一份文档称为一棵“节点树”更准确。3.3.1节点节点（node）这个名词来自网络理论，它代表着网络中的一个连接点。网络是由节点构成的集合。在现实世界里，一切事物都由原子构成。原子是现实世界的节点。但原子本身还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样是节点。DOM也是同样的情况。文档也是由节
11、点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。真的不掉线吗？、？在DOM里存在着许多不同类型的节点。就像原子包含着亚原子微粒那样，有些DOM节点类型还包含着其他类型的节点。1. 元素节点DOM的原子是元素节点（element node）。在描述刚才那份“购物清单”文档时，我们使用了诸如、和之类的元素。如果把Web上的文档比作一座大厦，元素就是建造这座大厦的砖块，这些元素在文档中的布局形成了文档的结构。各种标签提供了元素的名字。文本段落元素的名字是“p”，无序清单元素的名字是“ul”，列表项元素的名字是“li”。元素可以包含其他的元素。在我们的“购物清单”文档里，所有的列表项元素都包
12、含在一个无序清单元素的内部。事实上，没有被包含在其他元素里的唯一元素是元素。它是我们的节点树的根元素。2文本节点元素只是不同节点类型中的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。在网上，内容决定着一切，没有内容的文档是没有任何价值的，而绝大多数内容都是由文本提供的。在“购物清单”例子里，元素包含着文本“Dont forget to buy this stuff.”。它是一个文本节点（text node）。在XHTML文档里，文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。在“购物清单”文档里，元素没有直接包含任何文本节
13、点它包含着其他的元素节点（一些元素），后者包含着文本节点。3属性节点还存在着其他一些节点类型。例如，注释就是另外一种节点类型。但我们这里还想向大家再多介绍一种节点类型。真的不掉线吗？、？元素都或多或少地有一些属性，属性的作用是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：在DOM中，title=a gentle reminder是一个属性节点（attribute node），如图3-2所示。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点当中。并非所有的元素都包含着属性，但所有的属性都会被包含在元素里
14、。图3-2 一个元素节点，它包含着一个属性节点和一个文本节点在前面的“购物清单”示例文档里，我们可以清楚地看到那个无序清单元素（）有个id属性。如果曾经使用过CSS，你们对id和class之类的属性应该不会感到陌生。不过，为了照顾那些对CSS还不太熟悉的读者，我们下面将简要地重温几个最基本的CSS概念。4CSS：层叠样式表DOM并不是人们与网页的结构打交道的唯一手段。我们还可以通过CSS（层叠样式表）告诉浏览器应该如何显示一份文档的内容。类似于JavaScript脚本，对样式的声明既可以嵌在文档的部分（这需要用到标签），也可以放在另外一个样式表文件里。利用CSS对某个元素的样式做出声明的语法与JavaScript函数的定义语法很相似：在样真的不掉线吗？、？式声明里，我们可以对浏览器在显示各有关元素时使用的颜色、字体和字号做出定义，如下所示：继承（inheritance）是CSS技术中的一项强大功能。类似于DOM，CSS也把文档的内容视为一棵节点树。节点树上的各个元素将继承其父元素的样
