首页 > 代码库 > DOM

DOM

D:文档document

O:对象

js语言中的对象可以分为三类:

①用户定义的对象(user-defined object):由程序员自行创建的对象。

②内建对象(native object):内建在js语言里的对象

③宿主对象(host object):由浏览器提供的对象

windows对象对应着浏览器窗口本身,这个对象的属性和方法统称为BOM(浏览器对象模型)

document对象的主要功能就是处理网页内容

M:Model(模型):某种事物的表现形式

节点包括:元素节点、文本节点、属性节点

在XHTML中,文本节点总是包含在元素节点中,但并非所有的元素节点都包含文本节点。

属性节点用来对元素做出更具体的描述。属性节点总是被包含在元素节点中。并非所有的元素都包含着属性,但所有的属性都被元素包含。

 

typeOf操作符返回的操作数类型:字符串、数值、函数、布尔值、对象

文档中的每一个元素都是对象

DOM方法获取元素节点:

①通过元素ID

getElementById

alert(typeOf document.getElementById("purchases"));

返回一个对象

②通过标签名字

getElementsByTagName方法返回一个对象数组

element.getElementsByTagName(tag)//只接受一个参数

alert(document.getElementsByTagName(li).length);

即使整个文档这个标签只有一个元素,也会返回一个数组,此时数组的长度为1

getElementsByTagName允许把通配符作为它的参数,通配符*号必须放在引号里。

③通过类名字

getElementsByClassName(class)

返回一个具有相同雷鸣的元素的数组

指定多个类名,只需在字符串参数中用空格分隔类名即可。

 

获取和设置属性:只能用于元素节点

获取属性

getAttribute是个函数,只有一个参数

getAttribute方法不属于document对象,不能通过document对象调用,只能通过元素节点对象调用。

如:获取每个p元素的title属性

var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
    alert(paras[i].getAttribute("title"));
}

如果上述代码的文档中有更多个p元素,并且它们都没有title值,那么此方法会返回null值,在js中,null的含义是“没有值”

上述代码中,检查title为null的就不返回:

var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
    var text=paras[i].getAttribute("title");
    if(text) alert(text);//如果text存在,即text不为空,即title存在
}

设置属性:

setAttribute()

它允许我们对属性节点的值做出修改

var shopping=document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");

setAttribute()可以完成两项操作:先创建这个属性,然后设置它的值。如果用在一个本身就有这个属性的元素节点上,这个属性原来的值就会被覆盖掉。

DOM