javascript与dom编程（一）

一：Document Object Model

在DOM模型中，每一个元素（element）、属性（attribute）、文本（text）都可以看做是一个对象，javascript可以访问独立访问这些对象，用一些方法可以找到和改变这些对象。

DOM是这样规定的，每个HTML的标签是一个元素节点，包含在元素中的文本是文本节点，每一个HTML属性是一个属性节点。

二：访问DOM的节点

A：通过ID获取元素

var target = document.getElementById("berenger");

B：通过Tag Name获取元素

var listItems = document.getElementsByTagName("li");

listItems是一个类似数组的对象，可以用listItems.Length来获得对象的长度。

C：通过Class Name获取元素

大多数情况下使用className来获取元素比tag name要简便，但是dom没有提供相应的函数，所以我们要创建一个方法。

可以分解为以下三步：

1：搜索文档中的所有元素。

2：对每一个元素，把所属的class和所要找寻的class做比较。

3：如果相同，添加到list中。

js代码如下：

Var Core = {};

Core.getElementsByClass = function(theClass)

{

   var elementArray = [];

//IE中不支持getElementsByTagName("*")，用document.All。

   if (document.all)

   {

     elementArray = document.all;

   }

   else

   {

     elementArray = document.getElementsByTagName("*");

   }

   var matchedArray = [];

   var pattern = new RegExp("(^| )" + theClass + "( |$)");

   for (var i = 0; i < elementArray.length; i++)

   {

     if (pattern.test(elementArray[i].className))

     {

       matchedArray[matchedArray.length] = elementArray[i];

     }

   }

 

   return matchedArray;

};

三：操纵DOM树

parentNode：父元素。

childNodes：子元素。

firstChild：第一个节点。

lastChild：最后一个节点。

nextSibling：下一个同级节点。

previousSinbling：上一个同级节点。

 

四：属性

A：获得属性值（getAttribute）

<a id="koko" href = "http://www.163.com">163</a>

//js

var koko = document.getElementById("koko");

var kokoHref = koko.getAttribute("href");

注：getAttribute不能用document对象调用。

B：设置属性值（setAttribute）

setAttribute不但可以修改现有属性的值，而且可以添加新的属性，类似getAttribute，它不能通过document调用，只能通过元素节点来调用。需要传递两个参数：

obiect.setAttribute(attribute,value)

//例子

var koko = document.GetElementById("koko");

koko.setAttribute("title","web site in china");