第10章 DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)
IE中所有DOM对象都是以COM对象的形式实现的,这意味着IE中的对象与原生JavaScript对象行为不一致
节点层次
总共有12种节点类型,这些类型都继承自一个基类型
Node类型
DOM1级定义了一个Node接口,该接口将由DOM中所有节点类型实现。除了IE以外其他浏览器都可以访问到这个类型,JavaScript中所有节点类型都继承自Node类型,共享着相同的基本属性和方法
if(someNode.nodeType==Node.ELEMENT_NODE){ //在IE中无效
alert("Node is an element.");
}
为了跨浏览器兼容,最好将nodeType属性与数字值进行比较
if(someNode.nodeType==1){ //适用所有浏览器
alert("Node is an element.");
}
nodeName和nodeValue属性
对于元素节点,nodeName中保存的始终是元素的标签名,nodeValue的值始终是null
节点关系
节点的各种关系可以用传统家族关系来描述
每个节点都有一个childNodes属性,其中保存着一个NodeList对象,它是一种类数组对象,可以通过方括号、item()方法来访问
var firstChild=someNode.childNodes[0];
var secondChild=someNode.childNodes.item(1);
var count=someNode.childNodes.length;
前面提到过对arguments对象使用Array.prototype.slice()方法可以将其转换为数组,而采用同样的方法,也可以将NodeList对象转换为数组
//在IE8及之前版本无效
var arrayOfNodes=Array.prototype.slice.call(someNode.childNodes,0)
由于IE8及更早版本将NodeList实现为一个COM对象,所以我们不能像使用JScript对象那样使用这种对象
function convertToArray(nodes){
var array=null;
try{
array=Array.prototype.slice.call(nodes,0);
}catch(ex){
array=new Array();
for(var i=0,len=nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
return array;
}
每个节点都有一个parentNode属性,指向文档树中的父节点
previousSibling和nextSibling属性访问其他兄弟节点,第一个节点的previousSibling为null,最后一个节点nextSibling为null
hasChildNodes()在节点包含一个或多个子节点时返回true
ownerDocument属性指向表示整个文档的文档节点