JavaScript系列学习笔记 —— DOM模型之Document对象

一、概念详解

Document(文档)是浏览器为每个打开的HTML页面创建的对象，该对象是浏览器Window(窗口)对象的子对象。因此，Window对象中的方法和子对象不需要是同Window来引用。

Document对象是HTML文档的根节点，使我们可以访问HTML文档中的所有元素，并可以动态地添加、删除、修改或者查询HTML元素或内容等操作。

二、文档对象模型

文档对象模型（Document Object Model，简称DOM）允许JavaScript访问浏览器中的文档结构。由结构化节点组成，例如body标记是一个节点，而body元素内的任何元素都是body元素的子节点。采用这种结构，脚本语言可以通过多种方式访问文档中的元素，并对文档内的元素进行修改。

例如下面的HTML文档结构

<html><head><meta charset="UTF-8"><title>DOM对象节点</title></head><body><h1>标准DOM</h1><p>这是一份简单的<strong>文档对象模型</strong></p><ul><li>D表示文档，DOM的物质基础</li><li>O表示对象，DOM的思想基础</li><li>M表示模型，DOM的方法基础</li></ul></body>
</html>

可以通过下面的关系图来形象的表示

元素h1、p、ul都是body元素的子节点。这三个元素也都有各自的节点。元素h1包含了一个文本节点（文本“标准DOM”）作为它的字节。常见节点分为根节点（Document）、根元素节点（html）、元素节点（HTML元素节点）、属性节点（元素属性）、文本节点（文本内容）、空格节点和注释节点等。

脚本可以通过Document对象来添加、删除、修改或访问DOM中的这些节点。详细的操作将在下面详细的讲解。总的来说通过DOM模型，我们可以改变页面中的所有 HTML元素、HTML属性、HTML文本、CSS样式、添加事件并作出反应等。

三、常见的属性、方法

3.1 Document属性

属性	描述
title	返回当前文档的标题。
body	回文档的body元素
domain	返回当前文档的域名。或返回数组对象的长度。
URL	返回文档完整的URL
baseURI	返回文档的绝对基础 URI
inputEncoding	返回文档的编码方式（在解析时）。
cookie	返回或设置文档中的cookie值

3.2 Document方法

方法	描述
createElement()	创建元素节点。
createAttribute()	创建一个属性节点
createTextNode()	创建文本节点。
getElementById()	返回指定 id 的第一个对象。
getElementsByClassName()	返回指定类名的元素集合。
getElementsByTagName()	返回指定标签名的对象集合。
getElementsByName()	返回带有指定名称的属性的对象集合。
normalize()	删除空文本节点，并连接相邻节点
addEventListener()	返回对创建此对象的数组函数的引用。
removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

警告 !!!

在W3C DOM核心，文档对象继承节点对象的所有属性和方法。很多属性和方法在文档中是没有意义的。

四、元素节点的操作

4.1 访问元素节点

想要多某个元素进行操作，只有先找到该元素才能对其进行操作。所以，访问元素是最基础的操作。访问指定元素的方式有以下几种：

1、getElementById(elementId)方法

该方法通过指定元素的id属性值来访问元素，最终返回一个节点对象。

    //HTML元素结构为<div id="divObj"></div>//JavaScript代码var x = document.getElementById("divObj")

上述代码的意思是：从HTML文档中访问元素id属性为divObj的第一个节点，并将最终的访问结果赋值给变量x

2、getElementsByClassName(className)方法

该方法通过指定元素的class属性值来访问元素，最终返回一个数组。

    //HTML元素结构为<div class="divList"></div><div class="divList"></div>//JavaScript代码var x = document.getElementsByClassName("divObj")

上述代码的意思是：从HTML文档中访问元素class属性为divList的所有节点，并将最终的访问结果赋值给数组x

3、getElementsByTagName(tagName)方法

该方法通过指定元素的标签名来访问元素，最终返回一个数组。

    //HTML元素结构为<div></div>//JavaScript代码var x = document.getElementsByTagName("div")

上述代码的意思是：从HTML文档中访问元素名为div的所有节点，并将最终的访问结果赋值给数组x

4、getElementsByName(name)方法

该方法通过指定元素的name属性值来访问元素，最终返回一个数组。

    //HTML元素结构为<input type="button" name="Test" value="按钮" /><div name="Test"></div>//JavaScript代码var x = document.getElementsByName("Test")

上述代码的意思是：从HTML文档中访问元素name属性值为div的所有节点，并将最终的访问结果赋值给数组x

4.2 创建元素节点

想要创建一个新的节点，可以通过使用文档对象中的createElement方法和createTextNode方法来创建一个新的元素，并将新的元素插入到指定节点中。

//在文档中创建div元素
var newElement = document.createElement("div");
//为该div元素添加id属性，其值为Test
newElement.id = "Test";
//在文档中创建文本元素，内容为LaoYe
var newText = document.createTextNode("LaoYe");
//为新的div元素添加文本节点，该节点是新建的文本元素
newElement.appendChild(newText);
//为文档的body节点添加元素节点，该节点是新建的div元素
document.body.appendChild(newElement);