DOM

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM将文档描绘成一个由多层次节点构成的结构。节点分为几种不同类型，每种类型分别表示文档中不同的信息或标记。每个节点拥有自己的特点、数据和方法，另外与其他节点存在某种关系。

Node 类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的。

每个节点都有一个nodeType属性，用于表明节点的类型，由Node类型中定义的12个常量来表示：

  • Node.ELEMENT_NODE(1);
  • Node.ATTRIBURE_NODE(2);
  • Node.TEXT_NODE(3);
  • Node.CDATA_SECTION_NODE(4);
  • Node.ENTITY_REFERENCE_NODE(5);
  • Node.ENTITY_NODE(6);
  • Node.PROCESSING_INSTRCTION_NODE(7);
  • Node.COMMNET_NODE(8);
  • Node.DOCUMENT_NODE(9);
  • Node.DOCUMENT_TYPE_NODE(10);
  • Node.DOCUMENT_FRAGMENT_NODE(11);
  • Node.NOTATION_NODE(12);

nodeName和nodeValue属性

使用前最好判断节点类型，对于元素节点，nodeValue值始终为null。

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

节点关系

常用的节点关系属性：

  • childNodes;
  • NodeList;
  • parentNode;
  • previousSibling;
  • nextSibling;
  • firstChild;
  • lastChild;
  • ownerDocument;
  • hasChildNodes();

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一个类数组对象（有length属性以及内容按序保存），它基于DOM结构动态执行查询的结构，因此DOM结构的变化能够自动反映在NodeList对象中。

一种将类数组对象转换为数组的方法：

1
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0)

操作节点

常用的操作节点方法：

  • appendChild();
  • insertBefore(要插入节点，参照节点，如果参照节点为null，则相当于appendChild操作);
  • replaceChild(要插入节点，要替换节点);
  • removeChild();
  • cloneNode();

Document 类型

JavaScript通过Document类型表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。Document节点具有下列特征：

  • nodeType值为9;
  • nodeName值为”#document”;
  • nodeValue值为null;
  • parentNode值为null;
  • ownerDocument值为null;

文档的子节点

Document节点的子节点可以是DocumentType、Element、Comment等，还有两个内置访问子节点的方式:documentElement属性（指向元素），childNodes列表访问文档元素。document.body获得引用，document.doctype获得<!DOCTYPE>的引用。

1
2
3
4
5
var html = document.documentElement
alert(html === document.childNodes[0])
var body = document.body
var doctype = document.doctype

文档信息

作为HTMLDocument的一个实例，document对象还有一些标准的Document所没有的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//取得文档标题
var originalTitle = document.title
//设置文档标题
document.titl = "New page title"
//取得完整的URL
var url = document.URL
//取得域名
var domain = document.domain
//取得来源页面的URL
var referrer = document.referrer

查找元素

  • getElementById();
  • getElementsByTagName();
  • getElementsByName();

后两个方法会返回一个类数组对象HTMLCollection，它与NodeList类似，它有一个特殊的方法,namedItem()，可以通过元素的name特性取得集合中的项，同时还支持按名称访问项。

1
2
var myImage = images.namedItem("myImage")
var myImage = images["myImage"]

特殊集合

  • document.forms 包含文档中所有<form> 元素，与document.getElementsByTagName(“form”)得到结果相同。
  • document.images 包含文档中所有<img> 元素，与document.getElementsByTageName(“img”)得到结果相同。

文档写入

  • document.write();
  • document.writeln();
  • document.open();
  • document.close();

如果在文档加载结束后在调用document.write()，那么输出的内容将会重写整个页面。

Element 类型

Element类型用于表现XML或HTML元素，Element节点具有以下特征：

  • nodeType值为1
  • nodeName值为元素的标签名
  • nodeValue值为null

在后的HTML中，标签名始终全以大写表示，所以在使用的时候要注意将其转化为小写的写法比较好。

1
2
3
if (element.nodeName.toLowerCase() === "div") {
  // 操作
}

HTML元素

HTML元素由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，包括以下几个：

  • id, 元素在文档中的唯一标识符。
  • title，有关元素的附加说明信息，一般通过工具提示条显示。
  • className，元素的class特性，对应CSS类。

取得属性

每个元素都有一个或多个特性，用途是给出响应元素的附加信息，操作特性的方法主要有三个：

  • getAttribute()
  • setAttribute()
  • removeAttribute()

注意：getAttribute(“style”)返回一个对象，getAttribute(“onclick”)返回一段字符串。

创建元素

1
document.createElement("div");

Text类型

文本节点由Text类型表示，包含的是字面解释的纯文本内容。

  • nodeType的值为3。
  • nodeName的值为”#text”。
  • nodeValue的值为节点所包含的文本。

创建文本节点

1
document.createTextNode("Hello World!")