JavaScript高级程序设计21.pdf

时间:2022-04-18 18:13:44

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