DOM
DOM可以用一个家谱树来形容它,当然,把文档称为“节点树”大概会更准确
(一)节点
1.元素节点(element node)
a)标签的名字就是元素的名字,比如p,ul等等
b)html元素是我们节点树的根元素
2.文本节点(text node)
顾名思义,就是包含文本内容的一种节点,被元素节点包含
3.属性节点
属性节点用来对元素做出更具体的描述。并非所有的元素都包含属性,但所有的属性都被元素包含。
(二)DOM方法:获取元素
1.getElementById()
返回一个与那个有着给定id属性值的元素节点对应的对象
它是document对象特有的函数,且只有id参数,id值必须放在引号里
如:document.getElementById(“purchases”)
2.getElementsByTagName()
返回一个对象数组,它的参数是标签的名字
如:document.getElementByTaName(“li”)
可以用length属性查出这个数组的元素个数
因此也可以用alert(document.getElementsByTagName(“*”).length);来查看文档中有多少元素节点
3.getElementsByClassName()
可以通过该方法用class属性中的类名来访问元素,不过由于该方法比较新,某些DOM实现里可能还没有,因此在使用的时候要当心。
举个栗子:
alert(document.getElementsByClassName(“important sale”).length);
我们会看到结果显示为1,表示只有一个元素匹配,而事实上,class名没有important sale,但有sale important。
由此可见,该方法中的类名实际顺序不重要。
由于方法较新,为了让老浏览器也能有类似该方法的功能,于是有了类似函数
function getElementsByClassName(node,classname){ //node为DOM中的搜索起点,classname为搜索类名
if(node.getElementsByClassName){
return node. getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node. getElementsByTagName(*);
for (var i = 0; i<elems.length;i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
(三)DOM方法:获取和设置属性
1.getAttribure
是个函数,但只有一个参数——我们打算查询的属性的名字,可以和getElementsByTagName方法连用
如:object.getAttribute(attribute)
举个栗子:
var paras = document.getElementsByTagName(“p”);
for(var i =0; i<paras.length;i++){
alert(paras[i].getAttribute(“title”));
}
若没有相关属性则返回null值,若想让它只有在属性有值的情况下才弹出消息,则:
var paras = document.getElementsByTagName(“p”);
for (var i = 0;i< paras.length;i++){
var title_text = paras[i].getAttribute(“title”);
if(title_text ) alert(title_text);
}
2.setAttribute
允许我们对属性节点的值做出修改,也只能用于元素节点。当修改后,在浏览器的源代码查看里看到的仍将是改变前的属性值,这种表里不一的现象源自于DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。
如:object.setAttribute(attribute,value)
举个栗子:既可以增加属性值,也可以修改已有属性值,后者可用if(有值的属性节点)
var shopping = document.getElementById(“purchases”);
alert(shopping.getAttribute(“title”)); //修改前为空白
shopping.setAttribute(“title”,”a list of goods”);
alert(shopping.getAttribute(“title”)); //修改后将显示”a list of goods”消息