DOM简单介绍

时间：2008-04-02 来源：biaoflying

本章内容
·节点的概念
·css的基本概念
·四个实用的方法，getElementById，getElementByTagName,getAttribte和setAttribute。

JavaScript中的对象可以分为三种类性：
1，用户定义对象
2，内建对象如，Array，Math，Date等
3，宿主对象，由浏览器提供的对象区分BOM和DOM：
BOM窗口对象模型，着重于窗口本身。javascript的不良名声就是由此而来的，网页中的弹出窗口泛滥成灾主要都是由BOM中的window对象的方法实现的，如其中的open，blur等方法。而DOM则不同。它着重的是窗口的内容而不是窗口的本身。

<html>
    <head>
        <title>Shopping List</title>
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don' forget to buy this stuff.</p>
        <ul id="purchase">

            <li>A tin of beans</li>
            <li>Cheese</li>
            <li>Milk</li>
        </ul>
    </body>
</html>
节点概念：
1，元素节点。
如<body>,<p>,<ul>等等。
2，文本节点<p>元素包含着文本“Don't forget to buy this stuff”,它是一个文本节点。文本节点常常被包含在元素节点中。
3，属性节点。<p title="a gentle reminder">其中title=....就是一个属性节点。因为属性总是被放置在起始标签中，所以属性节点总是被包含在元素节点中。

CSS：层叠样式表
DOM并不是人们与网页打交道的唯一方式，还可以通过css告诉browser如何去显示一份文档内容。
在以上的head标签中加入以下元素<link rel="stylesheet" href="fun.css" type="text/css"/>其中fun.css为css定义文件。
利用css对某个元素作出声明的语法与javascript函数定义的语法很相似：
selector{
    property:value;
}
如对以上的文档，
p{
    color:yellow;
    font-family:"arial",sans-serif;
    font-size:1.2em;
}
CSS中的继承
css把文档的内容定义为一颗节点树，节点树上的各个元素都将继承其父元素的样式属性。
body{
    color：white;
    back-ground: black;
}
这些颜色不仅会作用于包含于body标签中的内容，还将作用于那些嵌套在body元素内部的所有元素。
在有些场合，当把样式作用于一份文档时，我们只想让那些样式作用于某个特定的元素或某几个特定的元素，这时需要使用class属性或者id属性：
·class属性
所有的元素都有class属性，不同的元素可以有相同的class属性值：
<p class="special">
This aragraph has the special class</p>
<h2 class="special">So does the headLine</h2>
定义样式：
.special{
    font-style:italic;
}
或者h2.special{
     text-transform:uppercase;
}
·id属性每个元素只有一个id属性值，不同元素必须有不同的id属性值。
<ul id="purchases">
为具有某个id的元素定义样式：
#purchases{
    border:1px solid white;
    background-color:#333;
    color:#ccc;
    padding:1em;
}

四个常用方法的介绍
1，getElementById()方法
返回具有给定id的对象。注意javascript语言区分大小写。

...
</ul>

</body>
...

2,getElementsByTagName(tag)返回的是具有指定标签的数组。
     alert getElementsByTagName("li");
注意：该方法可以传入通配符作为参数。
     getElementsByTagName（“*”）将获取一个文档中所有的元素节点
（即标签数）。
     查看id属性值为puchases的元素具有多少个字节点：
   var shopping=document.getElementById("purchases");
     var items=shopping.getElementsByTagName("*");

3,getAttribute方法
找到相应的元素之后我们就可以使用getAttribute方法将它的各种属性的值查询出来。传入的参数为打算查询的属性的名字。
getAttribute方法不能通过document对象调用，只能通过一个元素节点对象调用。
var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("title"));
}
在.html文档中加入以下<p>This is just a test</p>，刷新页面，这时会弹出两个对话框。第二个对话框显示的是null。因为这个<p>是不带属性的标签。为了避免这种情况，对以上的代码作出修改：
var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
    var tmp=paras[i].getAttribute("title");
    if(tmp!=null)
    alert(tmp);
}
以上代码还可以更改为一种更为简洁的方式：
if(tmp)
    alert(tmp);//如果tmp为null(即不存在title属性)返回false；
4，setAttribute方法

var paras=document.
getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
   var title_text=paras[i].
getAttribute("title");
    //这里的分号是不可少的。或者将if语句注释掉
    if(title_text);
   //alert(title_text);
}
var para=document.
getElementById("purchases");
alert(para.getAttribute("title"));
para.setAttribute(
"title","a list of goods");
alert(para.getAttribute("title"));