-
文档：DOM中的“D”
-
对象：DOM中的“O”
-
模型：DOM中的“M”
-
元素节点
<body> <p>和<ul>之类叫元素。元素中可以包含其他元素。
-
文本节点
文本内容
-
属性节点
<p title = "a gentle reminder">Don't forget to buy this stuff.</p>
title = "a gentle reminder"是一个属性节点。属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的元素都包含属性，但所有的属性都包含在元素内。
-
CSS（层叠样式表）
p
{
color：yellow；
font-family:"arial",sans-serif;
font-size:1.2em;
}在样式声明里我们可以定义浏览器在显示元素时使用的颜色、字体和字号。
继承(inheritance)是CSS技术中一项强大功能。类似于DOM，CSS也把文档的内容视为一个节点树。节点树上的各个元素将继承其父元素的样式属性。
例如我们在body元素定义了一些颜色字体，包含在body元素里的所有元素都将自动获得那些样式：
-
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;
}-
id属性
id属性的用途是给网页的某个元素加上独一无二的标识符，
<ul id = "purchases">在样式表里，可以像下面这样为有特定id属性值得元素定义一种独享的样式
#purchases{
border: 1px solid white;
background-color:#333;
color:#ccc;
padding:1em;
}尽管id本身只能使用一次，样式表还可以利用id属性为包含在该特定元素里的其他元素定样式。
#purchases li{
font-weight: bold;
}id属性就像是一个挂钩，它一头连着文档里的某个元素，另一头连着CSS样式表里的某个样式。DOM也可以使用这种挂钩。
-
获取元素
有三种DOM方法可获取元素节点，分别是通过元素ID、通过标签名字和通过类名字获取。
1.getElementById
返回一个与那个有着给定id属性值得元素节点对应的对象。
document.getElementById(id)
<!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>
<script>
alert(typeof document.getElementById("purchases"));
</script>
</body>
</html>
2.getElementByTagName
返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById，这个方法也是只有一个参数的函数，它的参数是标签的名字：
element.getElementsByTagName(tag)
<!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>
<script>
alert(document.getElementsByTagName("li").length);
</script>
</body>
</html>
getElementByTagName允许吧一个通配符作为它的参数，而这意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符（“*”）必须放在引号里面，这是为了让通配符与乘法操作符有所区别。如果你想知道某分文档里总共有多少个元素节点，像下面这样使用通配符即可：
alert(document.getElementsByTagName("*").length);
还可以把getElementById和getElementsByTagName结合起来运用。如果要想知道id属性值是purchase的元素包含着多少个列表项，必须通过一个更具体的对象去调用这个方法
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByTagName("*");
alert(items.length);
getElementsByClassName
通过class属性中的类的名来访问元素。
getElementsByClassName(class)
返回一个具有相同类名的元素的数组。
<!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>
<script>
alert(document.getElementsByClassName("important sale").length);
</script>
</body>
</html>
警告框提示中显示1，表示只有一个元素匹配，因为只有一个元素同事带important 和sale类名。注意：即使在元素的class属性中，类名的顺序是sale importent 而不是指定的 importent sale 也照样会匹配该元素。不仅类名的时机顺序不重要，就算元素还带有更多类名也没有关系。
与使用getElementsByTagName一样也可以组合使用getElementsByClassName和getElementById。
如果你想知道在id为purchase的元素中有多少类名包含sale列表项，可以先找到那个特定的对象，然后再调用getElementsByClassName
var shopping = document.getElementById("purchases");
var sales = shopping.getElementsByClassName("sale");
alert(sales.length);
sales数组中就只是位于purchases列表中带有sale类的元素。
getElementsByClassName方法非常有用但是只有较新的浏览器才支持它。为了弥补这一不足，DOM脚本程序员需要使已拥有的DOM方法来实现自己的getElementsByClassName。
<!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>
<script>
function getElementsByClassName(node,classname){
if(node.getElementsByClassName)
{
//使用现有方法
return node.getElementsByClassName(classname);
}else
{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i = 0; i<elems.length; i++)
{
if(elems.indexOf(classname) != -1)
{
return[results.length] = elems[i];
}
}
}
}
var shopping = document.getElementById("purchases");
var sales = getElementsByClassName(shopping,"sale");
alert(sales.length);
</script>
</body>
</html>
getElementsByClassName函数接受两个参数。第一个node表示DOM树中的搜索起点，第二个classname就是要搜索的类名了。
-
获取和设置属性
-
getAttribute
getAttribute是一个函数，它只有一个参数----你打算查询的属性的名字
object.getAttribute(attribute);getAttribute方法不同于document对象，所以不能通过document对象调用。它只能通过节点对象调用。例如合一与getElementsByTagName方法合用，获取每个<p>元素的title属性
var paras = document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++)
{
alert(paias[i].getAttribute("title"));
}
在购物清单文件里只有一个<p>元素，并且它有title属性。加入这份文档有更多个<p>元素，并且它们没有title属性，则getAttribute("title")方法会返回null值。在js里null意味着没有值。
将下面这段代码加入<p>标签后面
<p>this is just a test </p>重新加载界面会先看到左面的图再看到右边的图。
我们可以修改脚本，让它只在title属性有值时才弹出消息。我们增加一条if语句来检查getAttribute的返回值是不是null。
var paras = document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++)
{
var title_text = paras[i].getAttribute("title");
if(title_text != null)
{
alert(title_text);
}
}
-
setAttribute
允许我们对属性节点的值做出修改。与getAttribute一样，setAttribute也只能用于元素节点：
object.setAttribute(attribute,value)下面的例子里，第一条语句得到id是purchase的元素，第二条语句把这个元素的title属性值设置为a list of goods然后利用getAttribute来证明这个元素的title属性值发生了变化：
var shopping = document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));
如多这个属性原先并不存在，表明setAttribute实际上完成了两项操作：先创建这个属性，然后设置它的值。如果setAttribute用在一个本身就有这个属性的元素节点上，这个属性的值就会被覆盖掉。
注意：通过setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新的内容不影响文档的静态内容。DOM对页面进行刷新，却不需要在浏览器里刷新页面。