第3章 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charaset="utf-8"/>
<title>Shopping</title>
</head>
<body>
<h1>what to buy</h1>
<p title="a gentle reminder">dont forget to but this stuff.</p>
<ul id="purchases">
<li>a tin of beans</li>
<li clase="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
</body>
</html>
图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>之类的元素。这些元素在文档中的布局形成了文档的结构。
元素的名字就是节点的名字，文本段落是p,无序清单元素的名字是ul,列表项元素的名字是li。
3.4.2 文本节点###
在互联网上，绝大多数内容都是由文本提供的。上例中<p>包含着文本‘dont forget to buy this stuff’。它是一个文本节点。在XHTML中，文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。
3.4.3 属性节点###
属性节点用来对元素做出更具体的描述，例如几乎所有元素都有一个title属性，可以利用这个属性对包含在元素离的东西做出准确的描述。
<p title="a gentle reminder">dont forget to but this stuff</p>
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;
}
网友评论