DOM 文档对象模型

开发技术前端

字数统计: 1.9k阅读时长: 7 min

 2018/08/22 

DOM(Document Object Model)文档对象模型是W3C指定的一套技术规范，用来描述Javascript脚本怎么与HTML或XML文档进行交互的Web标准。DOM定义了一系列标准接口，允许开发人员通过标准方式访问文档结构、操作网页内容、控制样式和行为等。

DOM基础

DOM定义了HTML文档和XML文档的逻辑结构（DOM树），给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。

DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，DOM提供了表示和处理一个HTML或XML文档的常用方法。

DOM定义了表示和修改文档所需的对象、对象的行为和属性以及对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM：针对任何结构化文档的标准模型
XML DOM：针对 XML 文档的标准模型
HTML DOM：针对 HTML 文档的标准模型

其中，核心DOM是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。而HTML DOM和XML DOM两部分则是专为操作具体HTML文档和XML文档所提供的方法。

节点

DOM 节点类型（Node Types）

DOM 1级定义了Node接口，该接口为DOM的所有节点类型定义了原始类型。JS实现了这个接口，定义所有的节点类型必须继承Node类型，Node的子类或孙类都拥有Node的基本属性和方法。

DOM规定整个文档是一个文档节点，每一个标签时一个元素节点，如元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点等等：

文档节点（Document）：代表整个文档。
元素节点（Element）：文档中的一个标记。
文本节点（Text）：标记中的文本。
属性节点（Attr）：代表一个属性，元素才有属性。

下表为不同的节点类型以及其可拥有的子类型：

Node为所有节点的父接口，下表为一组公共的属性和方法。　　

每一个节点都有一个nodeType属性，用于表明文档的类型，使用nodeType属性返回值可以判断一个节点的类型。

例：借助nodeType属性检索当前文档中的元素个数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>DOM</h1>
<p>DOM是<cite>Document Object Model</cite>首字母简写，中文翻译为<b>文档对象模型</b>，是<i>W3C</i>组织推荐的处理可扩展标识语言的标准编程接口。</p>
<ul>
    <li>D表示文档，HTML文档结构。</li>
    <li>O表示对象，文档结构的JavaScript脚本化映射。</li>
    <li>M表示模型，脚本与结构交互的方法和行为。</li>
</ul>
<script type="text/javascript">
function count(n){ 							//定义文档元素统计函数
    var num = 0; 								// 初始化变量
    if(n.nodeType == 1)							// 检查是否为元素节点(ELEMENT_NODE)
    num ++ ;									// 如果是，则计数器加1
    var son = n.childNodes; 					// 获取所有子节点
    for(var i = 0; i < son.length; i ++ ){ 		// 循环统一每个子元素
        num += count (son[i]);			// 递归操作
    }
    return num; 						// 返回统计值
}
alert("当前文档包含 " + count(document) + " 个元素");	// 传入文档节点，计算元素的总个数
</script>
</body>
</html> 
//输出结果：当前文档包含 14 个元素(9个COMMENT_NODE(不算这个)、5个body直系元素)

上面的14个元素如果看不出来的话，这里推一篇博客供学习，讲解了Node类型的本质。

节点名称和值

使用节点的属性nodeName和nodeValue可以读取节点的名称和值，这两个属性的值完全取决于节点的类型。如下表：

nodeName属性在处理标签时比较实用，而nodeValue在处理文本信息时比较实用。

节点关系

DOM将文档视为一种树状结构，这种树结构称为节点树，跟C语言中的树还是有相通之处的。JS脚本可以通过这棵树访问所有节点，并进行修改或删除内容，也可以删除该节点。

节点之间的关系如下：

节点树中最顶端为根节点。
除根节点外每个节点都有一个父节点。
节点可以包含任何数量的子节点。
叶子是没有子节点的节点。、
同级节点拥有相同父节点的节点，为兄弟关系。

下图可以帮你更好的理解节点树的概念：

访问节点

DOM为Node定义了以下属性，以便于JS对整个文档树的访问。　　1. ownerDocument：返回当前节点的根元素(document) 　　2. parentNode：返回当前节点的父节点。所有节点都仅有一个父节点。　　3. childNodes：返回当前节点的所有子节点的节点列表　　4. firstChild：返回当前节点的首个子节点。　　5. lastChild：返回当前节点的最后一个子节点。　　6. nextSibling：返回当前节点之后相邻的同级节点。　　7. previousSibling：返回当前节点之前的相邻同级节点。

这里我们示例几个：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>DOM</h1>
<p>DOM是<cite>Document Object Model</cite>首字母简写，中文翻译为<b>文档对象模型</b>，是<i>W3C</i>组织推荐的处理可扩展标识语言的标准编程接口。</p>
<ul>
    <li>D表示文档，HTML文档结构。</li>
    <li>O表示对象，文档结构的JavaScript脚本化映射。</li>
    <li>M表示模型，脚本与结构交互的方法和行为。</li>
</ul>
<script type="text/javascript">
var txt = "";            //记录所有节点类型
var tag = document.getElementsByTagName("ul")[0];	// 获取列表元素
var a = tag.childNodes; 	// 获取列表元素包含的所有节点
for (i=0; i<a.length; i++){    //打印所有的节点类型
	txt = txt + a[i].nodeName + "<br>";
};
document.write(txt + '<br>');
document.write(a[0].nodeType + '<br>'); //第1个节点类型，返回值为3，显示为文本节点
document.write(a.item(1).innerHTML + '<br>'); 	// 显示第2个节点包含的文本
document.write(a.length); 	// 包含子节点个数，nodeList长度
</script>
</body>
</html>