一. 整体介绍
这里介绍DOM对象中的Document对象。
何为Document对象？每个载入浏览器的HTML文档都会成为Document对象，Document对象可以帮助我们对所有的HTML文档进行访问。
任何一个对象都会有属性和方法，当然Document对象也不例外，Document对象有对象集合、对象属性、对象方法，但对象集和对象属性用的相对不是很多，这里不过多介绍（感兴趣的话可以查阅
W3C：http://www.w3school.com.cn/jsref/dom_obj_document.asp），主要介绍Document对象的方法。
二. 详细介绍
Document对象的方法包括：
最重要的三个查找方法：getElementById()、getElementsByClassName()、getElementsByTagName() ; 分别是根据id、类名、标签名来查找。
其他方法：open() 、close() 、write() 、writeIn() 。
1. getElementById()
根据元素的id来获取该元素对象，通过该方法获取的元素对象是唯一的，可以直接对其进行操作。
2. getElementsByClassName()
根据元素的class类名来获取该元素对象，通过该方法获取的元素对象是一个伪数组，需要通过伪数组的方式对其进行访问。
3. getElementsByTagName()
根据元素的标签名来获取该元素对象，通过该方法获取的元素对象是一个伪数组，需要通过伪数组的方式对其进行访问。
补充：什么是伪数组？伪数组和数组有什么区别？
伪数组是只有数组的部分功能（下标的调用和length属性），但是却不能调用数组中的方法(eg: pop()、push()、unshift())。
常见的伪数组有：A：arguments集合(后续介绍Function对象时介绍)
B：DOM集合(getElementsByClassName和getElementsByTagName)
C：JQuery框架本身就是一个伪数组
下面通过代码来详细分析一下伪数组的用法，以及伪数组和真数组如何转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function() {
/* 伪数组：只有数组的部分功能(length和下标)，无法访问数组对象中的方法
常见的伪数组有：
1. arguments
2. Dom集合 : document.getElementsByClassName()
document.getElementsByTagName()
3. JQuery框架本身就是一个伪数组
* */ //1. 运用
var divs = document.getElementsByTagName('div');
//下面这句话报错
//因为divs是一个伪数组，不能调用数组的pop方法
//divs.pop().style.backgroundColor = "yellow"; //核心知识点：将伪数组转换成真数组
//Array.prototype.slice.call("伪数组名");
var realdivs = Array.prototype.slice.call(divs);
realdivs.pop().style.backgroundColor = "pink"; //2. 自定义伪数组
var firstDivs = { 0: 'name', 1: 'maru' ,length:2};
console.log(firstDivs);
console.log(Array.prototype.slice.call(firstDivs));
};
</script>
</head> <body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body> </html>
下面通过代码继续介绍以上三个方法的具体使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
//1.getElementById()
document.getElementById("btn1").onclick = function() {
var obj = document.getElementById("btn1");
console.log(obj);
};
//2.getElementsByClassName()
document.getElementById("btn2").onclick = function() {
var obj = document.getElementsByClassName("box1");
console.log(obj);
//调用伪数组
console.log('个数为:' + obj.length);
for(var i = 0; i < obj.length; i++) {
console.log('逐个输出:' + obj[i]);
}
//转换成真数组
console.log(Array.prototype.slice.call(obj));
};
//3.getElementsByTagName()
document.getElementById("btn3").onclick = function() {
var obj = document.getElementsByTagName("div");
console.log(obj);
//调用伪数组
console.log('个数为:' + obj.length);
for(var i = 0; i < obj.length; i++) {
console.log('逐个输出:' + obj[i]);
}
//转换成真数组
console.log(Array.prototype.slice.call(obj));
};
};
</script>
</head>
<body>
<button id="btn1">getElementById</button>
<button id="btn2">getElementsByClassName</button>
<button id="btn3">getElementsByTagName</button>
<div id="123">
</div>
<div id="div1">
<div class="box1">
<div class="box1">
</div>
</div>
</div>
<div class="box1">
</div>
</body>
</html>
结论：
4. open()-close()
打开一个新文档，并擦出当前文档的内容，新文档用 write() 方法或 writeln() 方法编写，但必须要用close()方法关闭该文档，迫使其内容显示出来。
注意：一旦调用了 close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。
5. write()-writeIn()
向文档写 HTML 表达式 或 JavaScript 代码，但是write不换行，writeIn换行
var newDoc = document.open("text/html", "replace");
var txt = "<html><body>Learning about the DOM is FUN!</body></html>";
newDoc.write(txt);
newDoc.write(txt);
//write不换行，writeIn换行
newDoc.writeln(txt);
newDoc.writeln(txt);
newDoc.close();