DOM

223 阅读3分钟

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点数,允许开发人员添加、移除和修改页面的某一部分。

一、节点层次

DOM可以将任何HTML或XML描绘成一个由多层次节点构成的机构。节点分为几种不同的类型,每种类型都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。

//例子1
<html>
    <head>
        <title>SamplePage</title>
    </head>
    <body>
        <p>HelloWorld!</p>
    </body>
</html>

//树形结构
Douument //文档节点
    Element html //文档元素
        Element head
            Element title
                Text SamplePage
    Element body
        Element p
            Text HelloWorld!


文档节点是每个文档的根节点。在例子1中,文档节点只有一个子节点,即<html>元素,称之为文档元素。文档元素是文档最外层元素,文档中的所有元素都包含在文档元素中。每个文档只能有一个文档元素。在XML中,没有预定义的元素,因此任何元素都有可能成为文档元素。

每一段标记都可以通过树中的一个节点来表示:HTML元素通过元素节点表示,特性(attribute)通过特性节点表示,文档类型通过文档类型节点表示,而注释则通过注释节点表示。总共有12种节点类型,这些类型都继承自一个基类型。

二、Node类型

DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的。JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。 

2.1 nodeTpe

每个节点都有一个nodeType属性,用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示,任何节点类型必居其一:

  • Node.ELEMENT_NODE(1);//元素节点
  • Node.ATTRIBUTE_NODE(2);//特性节
  • Node.TEXT_NODE(3);//文档节点
  • Node.CDATA_SECTION_NODE(4);
  • Node.ENTITY_REFERENCE_NODE(5);
  • Node.ENTITY_NODE(6);  
  • Node.PROCESSING_INSTRUCTION_NODE(7);
  • Node.COMMENT_NODE(8);//注释节点
  • Node.DOCUMENT_NODE(9);//Document类型
  • Node.DOCUMENT_TYPE_NODE(10);
  • Node.DOCUMENT_FRAGMENT_NODE(11);
  • Node.NOTATION_NODE(12)。

通过比较上面这些常量,可以很容易地确定节点的类型,例如:
if (someNode.nodeType == Node.ELEMENT_NODE){
    console.log('node is a element.')   
}

2.2 nodeName 和 nodeValue 属性

要了解节点的具体信息,可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。

//在使用这两个值以前,最好先检测一下节点类型

if (someNode.nodeType == 1) {
    value = someNode.nodeName;
}

首先检查节点类型,看它是不是一个元素。如果是,则取得并保存nodeName的值。对于元素节点,nodeName中保存的始终都是元素的标签名,而nodeValue的值则始终为null。  

节点关系

每个节点都有一个childNodes属性,其中保存着一个NodeList对象。。NodeList是一种类数组对象。NodeList对象是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映在NodeList对象中。  

// 访问 NodeList中的 节点
var firstChild = someNode.childNodes[0];
var secondChid = someNode.childNodes.item(1)

每个节点都有一个parentNode属性,该属性指向文档树中的父节点。 包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。  父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点。

操作节点