DOM简单介绍

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

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

   
       
   
   
       

What to buy

       

Don' forget to buy this stuff.

       

           
• A tin of beans

           
• Cheese

           
• Milk

       

   

节点概念：
  1，元素节点。
  如,

,

等等。
  2，文本节点

元素包含着文本“Don't forget to buy this stuff”,它是一个文本节点。文本节点常常被包含在元素节点中。
  3，属性节点。

其中title=....就是一个属性节点。因为属性总是被放置在起始标签中，所以属性节点总是被包含在元素节点中。

CSS：层叠样式表
  DOM并不是人们与网页打交道的唯一方式，还可以通过css告诉browser如何去显示一份文档内容。
  在以上的head标签中加入以下元素其中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属性值：
 

  This aragraph has the special class

 

So does the headLine

  定义样式：
  .special{
    font-style:italic;
  }
  或者h2.special{
     text-transform:uppercase;
  }
  ·id属性每个元素只有一个id属性值，不同元素必须有不同的id属性值。
 

  为具有某个id的元素定义样式：
  #purchases{
    border:1px solid white;
    background-color:#333;
    color:#ccc;
    padding:1em;
  }
 

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

...

            
    
...

  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      alert(paras[i].getAttribute("title"));
  }
  在.html文档中加入以下

This is just a test

，刷新页面，这时会弹出两个对话框。第二个对话框显示的是null。因为这个

是不带属性的标签。为了避免这种情况，对以上的代码作出修改：
  var paras=document.getElementsByTagName("p");
  for(var i=0;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    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"));