第九章 DOM
DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口)。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的一部分，DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML)，但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。
1.节点层次 :
DOM可以将任何HTML或XML文档描绘成一个由多层次节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点都有各自的特点，数据和方法，另外节点也与其他节点存在联系。节点之间构成了层次，而所有页面标记则表现为一个特定节点为根节点的树形结构。以下面HTML为例 :
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
可以将这个简单的HTML文档表示为一个层次结构。如图所示 :
node
文档节点是每个文档的根节点。在这个例子中，文档结点只有一个子节点，即 <html> 元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元索都包含在文档元素中。每个文档只能有一个文档元索。在HTML页面中，文档元索始终都是 <html> 元素。在XML中，没有预定义的元素，因此任何元素都可能成为文档元索。
每一段标记都可以通过树中的一个节点来表示HTML元索通过元素节点表示，特性(attribute) 通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有12种节点类型，这些类型都继承自一个基类型。
2. Node类型 :
JavaScript中所有的节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。
节点类型
每个节点都有一个 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);
- Node.DOCUMENT_TYPE_NODE(10);
- Node.DOCUMENT_FRAGMENT_NODE(11);
- Node.NOTATION_NODE(12);
通过比较上面这些常量，可以很容易的确定节点的类型，例如 :
if(someNode.nodeType == Node.ELEMENT_NODE) //在IE中无效
{
alert("Node is an element.");
}
由于IE没有公开 Node 类型的构造函数，因此上面的代码在IE中会导致错误。为确保跨浏览器兼容，最好还是和数值进行比较。
if(someNode.nodeType == 1) //适用于所有浏览器
{
alert("Node is an element.");
}
虽然 nodeType 属性有12个可取值，但是仅有3种具有使用价值：
- 元素节点 : nodeType 属性值1；
- 属性节点 : nodeType 属性值2；
- 文本节点 : nodeType 属性值3；
<p title = "firstEle">Don't forget to buy this stuff.</p>
下面我们来看看那在一段 HTML 文档里，三者的关系是怎样的：
node in html
NodeName和nodeValue属性
要了解节点的具体信息，可以使用 nodeName 和 nodeValue 这两个属性。这两个属性的值完全取决于节点的类型。在使用这两个值以前，最好是先检测一下节点的类型。
if(someNode.nodeType == 1)
{
value = someNode.nodeName; //nodeName的值是元素的标签名
}
nodeValue : 用来得到（和设定）一个节点的值。
在实际的使用过程中，如果我们想获得对象里的值（比如说是 p 标签，我们给它一个 id = “description”），下面这样做是不行的。
var des = description.nodeValue;
alert(des); //null
p 元素本身的 nodeValue 属性是一个空值，而你真正需要的是包含在 p 元素所包含的文本值。包含在 p 元素里的文本是另一种节点，它是 p 元素的第一个子节点。因此，你想要得到的其实是它的第一个子节点的 nodeValue 属性值。
alert(description.childNodes[0].nodeValue);
节点关系
文档中所有的节点之间都存在这样或那样的关系，节点间的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。在HTML中，可以将 <body> 元素看成是<html> 元素的子元素,相应地，也就可以将 <html> 元素看成是 <body> 元素的父元素，而 <head> 元素，则可以看成是 <body> 元素
的同胞元素，因为它们都是同一个父元素 <html> 的直接子元素。
childNodes 属性 :
每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。请注意，虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有 length 属性，但它并不是 Array 的实例。NodeList 对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在 NodeList 对象中，我们常说，NodeList 是有生命、有呼吸的对象，而不是在我们第一次访问它们的某个瞬间拍摄下来的一张快照。
网友评论