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");