javascript与dom编程(一)

来源:互联网 发布:javascript 替换 编辑:程序博客网 时间:2024/06/16 06:32

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

原创粉丝点击