JavaScript高级程序设计21.pdf

第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属性指向表示整个文档的文档节点