首页 > 代码库 > 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