javascript学习笔记（第三章DOM–初步理解）
在前面的笔记中我们提到过宿主对象document(文档)，其实是为了本章的学习开了一个小小的头，本章我们将对这个宿主对象的功能进行详细的说明。下面我们就开始详细解释一下DOM的含义：
一、D（文档）：document(文档)是DOM的基础，当我们创建了一个网页把它加载进游览器中，这个DOM就把我们创建了的网页文档转换成了一个文档对象。
二、O（对象）：在我们人类的世界里对象这个概念是模糊的，任何一个事物我们都可以称为对象，但是在程序世界里，对象这个概念是非常明确的。在我们上一章的结尾部分我们谈到了几个对象的使用方法，从中我们得知对象是一个自包含的数据类型，有与之相关联的变量我们称为属性，还有特定对象才能够调用的函数，我们称为方法。在javascript中对象有三类：
2.1用户自定义对象（user-defined object）：由程序员根据需要自己定义对象，包括对象的属性和方法。
2.2内建对象（native object）：javascript中自有的对象，包括Array,Math,Date等。
2.3宿主对象（host object）：由游览器中存在的对象，这里我们先来说一下最基本的宿主对象window对象。
window对象对应着浏览器窗口本身，这个对象的属性和方法统称为BOM（浏览器对象模型），也就是window object model（窗口对象模型），BOM提供了window.open和window.blur等方法，负责弹出窗口和下拉菜单。
三、M（模型）：说到模型我们应该都不陌生，我们小时候玩过的汽车模型，飞机模型，其实就是用一个与对象本身相似的东西来代替对象本身，但是我们的玩具模型有时可以完成实物的功能有的却不能完成，这就是说我们的模型到底是拿来用的还是仅仅用来观赏。显然对于程序语言中的模型必须是能够完成一定功能的，那么我们又该如何使用模型来完成功能呢？这里就涉及到我们对模型内部元素的理解程度，就好比你要读懂一幅地图就需要搞清楚它的图例一样。在DOM模型中通常把一份文档表示成一棵树，这里涉及到的树可以参考数据结构里的树来进行理解。
树的根节点，只有直接后继没有直接前驱；
树的孩子节点，孩子节点也可以作为父节点，下有孩子节点；
这里就不再多说，不懂的话去看看数据结构。那么我们怎么用树的观念去理解脚本呢？下面我们看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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 class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
</body>
</html>
以上代码运行结果如下图：
下面我们就来理解一下上面的代码：
首先用树来分析一下代码的结构，如下图：
通过这个图我们能很清楚的看出代码的结构，可以分析出树的根节点，孩子节点等信息，这里我们引入一个新概念“节点树”。文档是由节点构成的，在DOM中有许多不同类型的节点，我们分别介绍一下：
3.1元素节点（element node）
各种标签的即元素，标签的名字就是元素的名字，比如上面的例子，我们的节点树中的每一个节点就是一个元素。
3.2文本节点（text node）
通常你来说文本节点包含在元素节点里，简单理解就是由一系列的文本组成的节点就是文本节点，文本节点本身不会包含什么内容。
3.3属性节点（attribute node）
属性节点是对元素节点更加具体的描述，就是说明这个元素节点是干嘛的，有啥作用，所以属性节点一定被包含在元素节点里。
3.4CSS（层叠样式表）
CSS是另一种网页结构技术，它会告诉浏览器如何显示一份文档的内容。在CSS中声明元素的样式与函数的定义很相似，例：（定义在浏览器显示的元素时的颜色，字体，字号等）
p
{
color:red;
font-faimly:"arial",sans-serif;
font-size:1.2em;
}
在CSS中有一个强大的功能——继承。节点树的各个元素可以继承其父元素的属性。假设我们定义了父元素的颜色字体，那么不仅父元素会显示定义的样式而且它下面包含的子元素也将显示同样的颜色和字体。这个继承在某些情况下符合我们的需求，但当我们想要把定义的样式应用于指定的元素时就不能满足要求，那么我们该怎么避免继承带来的麻烦呢？这里我们引入两个可以把不同元素区分开来的属性：
1.class属性：在任意元素上都可以应用，例:
<p class="special">this paragraph has the special class</p>
<h2 class="special">so does this headline</h2>
若我们想要给class属性值相同的元素定义为同一个样式，我们可以这样操作：
p.special
{font-style:italic;}
若我们想给一种特定类型的元素定义一种特定的样式，我们可以这样操作：
h2.special
{text-transform:uppercase;}
2.id属性：可以给网页元素加上特定的标识，例：
<ul id="purchases">
我们为具有id属性值的元素设定一种样式：
#purchases
{
border:1px solid white;
background-color:#333;
color:#ccc;
padding:1em;
}
id本身只能使用一次，但我们可以id属性为包含在特定元素内的其他元素定义样式：
#purchases li
{
font-weight:bold;
}