DOM
3.1 文档:DOM的D
当创建了一个网页并把它加载到web浏览器中时,DOM就在幕后自动生成,它把你编写的网页文档转换成一个文档对象。
3.2 对象:DOM的O
在JS中,Object分为三种:user-defined object, native object, host object.
在JS最初时,有些宿主对象就已经可用了,最基础的时window对象。
window对象对应着浏览器窗口本身,这个对象的属性和方法统称为BOM(浏览器对象模型),但是称为Window Object Model也许更贴切。BOM 提供来window.open和window.blur等方法,这两个方法时各种弹出窗口和下拉菜单的根源。对于Window对象,应把注意力集中在浏览器窗口内的网页内容上。document对象的主要功能就是处理网页内容。
3.3 模型:DOM的M
模型的含义是某种事物的表现形式。就像一列火车模型代表一列真正的火车。一张地图代表一个城市,DOM代表加载到浏览器窗口的当前网页。浏览器提供了网页的地图(或者说模型),而我们可以通过JS来读取这张地图。
DOM把一份文件表示为一棵树(tree),有父,子,兄弟节点(parent,child,sibling)。一位特定的家族成员既是某些成员的父辈,优势另一位成员的子辈,同时还是另一位成员的兄弟。
图3-1
Shopping what to buy
dont forget to but this stuff.
- a tin of beans
- cheese
- milk
图3-2
分析下刚才的HTML文件:
<html>
标签表示整个文档的开始,所有的其他元素都包含在内,表示它至少是一个父节点(parent)。如果这是一颗树,这个<html>
标签就是树根(根元素) 接下来深入一层,有两个分枝<head>
和<body>
。他们位于统一层次,且互不包含,所以时兄弟关系。他们有着共同的父节点<html>
,但又有各自的子元素,所以他们本身又是其他一些元素的父元素。<head>
元素有两个子元素<meta>
和<title>
(兄弟关系),<body>
有三个子元素:<h1>,<p>,<ul>
(兄弟关系)。 3.4 节点
在DOM中,文档是由节点构成的结合,这些节点是文档树上的树枝和树叶而已。
DOM里有许多不同类型的节点,有很多类型的DOM节点包含着其他类型的节点,其中有三种:元素节点,文本节点,属性节点。3.4.1 元素节点
DOM的原子是元素节点(element node)。他们是最低级别的节点,如<body>,<p>,<ul>
之类的元素。这些元素在文档中的布局形成了文档的结构。
3.4.2 文本节点
在互联网上,绝大多数内容都是由文本提供的。上例中<p>
包含着文本‘dont forget to buy this stuff’。它是一个文本节点。在XHTML中,文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。
3.4.3 属性节点
属性节点用来对元素做出更具体的描述,例如几乎所有元素都有一个title属性,可以利用这个属性对包含在元素离的东西做出准确的描述。
dont forget to but this stuff
3.4.4 CSS
DOM并不是与网页结构打交道的唯一技术,CSS(层叠样式表)告诉浏览器应该如何显示一份文档的内容。
类似JS脚本,对样式的声明既可以在<head>
部分(<style>
标签之间),也可以放在另外的一个样式表文件里。 CSS声明元素样式的语法与JS的函数定义语法类似: selector{ property:value; }
举例;
p{ color:yellow; font-family:"arial",sans-serif; font-size:1.2em; }