JavaScript —DOM

DOM

“D”，document，DOM会把编写的网页文档转换为一个文档对象
“O”，object，Javascript中对象可以分为三类
1.用户定义对象 （user-defined object)：由程序员自行创建的对象。
2.口内建对象（native object)：内建在JavaScript语言里的对象，如Array、Math和Date等。
3.宿主对象(host object)：由浏览器提供的对象。
“M”，model，即表现形式

节点

节点有元素节点、文本节点和属性节点等

1. 元素节点，是DOM的原子，标签的名字就是元素的名字。文本段落元素的名字是“p”，是节点树的根元素。
2. 文本节点，总是被包含在元素节点的内部，比如

   元素包含着文本"Don’t forget to buy this stuff. "。

3. 属性结点，用来对元素做出更具体的描述。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。比如

<p title="a gentle reminder">Don't forget to buy this stuff. </p>

CSS

1. class属性，可以在所有的元素上任意应用class属性

<p class = "special">This paragraph has the special class</p>
<h2 class = "special">So does this headline</h2>

在样式表里，可以像下面这样为class属性值相同的所有元素定义同一种样式：

.special {
	font-style: italic;
}

还可以像下面这样利用class属性为一种特定类型的元素定义一种特定的样式：

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;
}

获取元素

有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名字和通过类名字来获取。

1. getElementById，返回一个与那个有着给定id属性值的元素节点对应的对象。（document.getElementById(id)）
2. getElementsByTagName，返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。（element.getElementsByTagName(tag)）
3. getElementsByClassName，通过class属性中的类名访问元素，返回一个具有相同类名的元素的数组。（getElementsByClassName(class)）

获取和设置属性

得到需要的元素以后，可以用getAttribute方法获取它的各个属性，用setAttribute方法更改属性节点的值。

1. getAttribute，只能通过元素节点对象调用（object.getAttribute(attribute)）
2. setAttribute，也只能用于元素节点（object.setAttribute(attribute, value)）

var shopping = document.getElementById("purchases");//得到id是purchas的元素
shopping.setAttribute("title", "a list of goods");//把这个元素的title属性值设置为a list of goods