通过Document对象可以获取所有的HTML元素对象，也可以动态创建新的节点，利用元素对象的appendChild()方法将新节点添加到已有的元素对象中。
Document对象常用属性如下表所示：
Document对象常用方法如下表所示：
注释（1）
基于文档级别添加事件处理函数，当文档中的任何元素触发监听的事件时，与事件绑定的处理函数都会被调用。
语法：
addEventListener(event, function, useCapture)
参数event是事件名称，事件名称不能使用“on”前缀，例如，使用 "click" ,而不是使用 "onclick"。
参数function是监听事件的JS函数，当对象事件触发时，该函数被调用，function可以是已定义的函数名称，也可以直接定义匿名函数。
参数useCapture是可选参数，类型是布尔类型，设置事件是否在捕获或冒泡阶段执行。该参数主要是设置事件的执行顺序，当多个对象元素叠加在窗口的同一区域，若鼠标单击多个对象的共同区域时，捕获阶段的事件执行顺序是从大到小，冒泡阶段的执行顺序是从小到大。
useCapture若设置为true，事件处理在捕获阶段执行；useCapture若设置为false，事件处理在冒泡阶段执行。默认为false。
例如：
// 参数function为已定义的add函数
document.addEventListener("click",add)注释（2）
创建一个元素属性对象（也称为属性节点），属性是一个键值对，键是属性名称，值是属性的值。例如样式属性class、宽度属性width等。
语法：
createAttribute(attributename)
方法返回创建的Attribute对象，Attribute对象的value属性存储属性的值。
参数attributename是属性名称，类型是字符串，
Attribute对象的主要属性如下表所示：
案例2：创建元素的属性（案例代码见unit3\case2.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function set_class(){
obj = document.getElementById("id_para");
// 创建属性对象，属性名称为class
attri = document.createAttribute("class");
// para样式赋值给class属性
attri.value = "para";
// 设置属性
obj.setAttributeNode(attri);
}
</script>
<style>
.para
{
color:#c9c9c9;
font-size:20px;
}
</style>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p id="id_para">城阙辅三秦，风烟望五津。与君离别意，同是宦游人。</p>
<p><input type="button" value="设置元素属性" onclick="set_class()"/></p>
</boyd>
<html>
注释（3）
创建一个元素对象（也称为元素节点），一个元素对象就是HTML的一个标签。动态创建HTML文档时，可以使用该方法创建HTML元素。
语法：
createElement(nodename)
方法返回新创建的元素对象。参数nodename是HTML标签名称。元素对象的属性和方法见下文。
案例3：创建一个新的元素（案例代码见unit3\case3.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function add_element(){
// 创建P标签元素对象（元素节点）
var element_obj = document.createElement("P");
// 创建文本对象（文本节点）
var text_obj = document.createTextNode("城阙辅三秦，风烟望五津。");
// obj元素节点添加文本子节点
element_obj.appendChild(text_obj);
// 元素对象添加到body节点下
document.body.appendChild(element_obj);
}
</script>
<style>
.para
{
color:#c9c9c9;
font-size:20px;
}
</style>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p><input type="button" value="添加元素" onclick="add_element()"/></p>
</boyd>
<html>注释（4）
创建一个文本对象（也称为文本节点），一个文本对象就是HTML标签内的文本内容。动态创建的HTML元素，需要设置文本内容时，可以创建文本节点。
语法：
createTextNode(text)
方法返回新创建的文本对象。参数text是文本内容，类型是字符串。
案例代码参见注释（3）。
注释（5）
该方法返回文档中所有指定样式类名的元素对象集合，样式类名为元素对象属性class的值。
语法：
getElementsByClassName(classname)
该方法返回NodeList对象，NodeList对象是一个存储多个节点对象的线性表，通过线性表的索引来访问表内的对象（类似Java语言的ArrayList）。属性length可以获取NodeList对象的长度，方法item(index)返回列表内指定索引的Node对象，Node对象可以是元素对象、文本对象、属性对象和注释对象，Node对象的属性和方法见下文。
该方法返回的NodeList存储的对象为元素对象。
参数classname是元素对象属性class的值，为字符串类型。
案例4：NodeList对象的使用（案例代码见unit3\case4.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function get_element(){
// 获取文档内所有样式名称为para的元素，返回node_list对象
var node_list = document.getElementsByClassName("para");
// 遍历node_list对象
for (i = 0;i < node_list.length;i++)
{
// 获取单个Node对象
node = node_list.item(i)
document.getElementById("text_info").innerText += node.nodeName
}
}
</script>
<style>
.para
{
color:#c9c9c9;
font-size:20px;
}
</style>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p>城阙辅三秦，风烟望五津。<p>
<div>与君离别意，同是宦游人。</div>
<span style=" margin-left:30px;" id="text_info"></span>
<p><input type="button" value="通过样式名称获取元素" onclick="get_element()"/></p>
</boyd>
<html>注释（6）
该方法返回文档中所有标签名称为指定值的对象集合。
语法：
getElementsByTagName(tagname)
该方法返回NodeList对象，NodeList对象包含所有标签名称为tagname的Node对象。参数name是标签名称，类型为字符串。
案例代码参见注释（5）。
注释（7）
该方法返回文档中所有name属性值为指定值的对象集合。
语法：
getElementsByName(value)
该方法返回NodeList对象，NodeList对象包含所有name属性值为value的对象集合。参数value是元素对象属性name的值，类型为字符串。
案例代码参见注释（5）。
注释（8）
该方法返回属性id值为指定值的第一个元素对象。
语法：
getElementById(elementID)
该方法返回单个Node对象，若文档中有多个id值相同，该方法并不返回NodeList对象，而是返回第一个id为指定值的元素对象。
参数elementID是元素对象属性id的值。
注释（9）
该方法将HTML代码或JavaScript代码动态写入HTML文档，开发者可以使用该方法将动态创建的内容添加到HTML文档。
语法：
write(statement1, statement2,...)
该方法允许传入多个参数，每个参数为HTML代码或JavaScript代码，这些参数将按传入的顺序添加到文档内。
案例5：document 对象write方法的使用（案例代码见unit3\case5.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function write_element(){
document.write("<p>城阙辅三秦，风烟望五津。<p>");
document.write("<div>与君离别意，同是宦游人。</div>");
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p><input type="button" value="动态写入元素" onclick="write_element()"/></p>
</boyd>
<html>