一.前言
在HTML 文档中，所有内容都是节点：
1.整个文档是一个文档节点；
2.每个 HTML 元素是元素节点；
3.HTML 元素内的文本是文本节点；
4.每个 HTML 属性是属性节点；
5.注释是注释节点；
而获取文档中这些节点，也就是页面元素对应的JavaScript对象，也叫DOM对象，就需要使用document对象。
二.四种获取方式
1.通过标签的id获取该标签的DOM对象
用document对象调用getElementById()方法，传入要获取的id名即可，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="text">百度</span>
<script>
var element = document.getElementById("text");
console.log(element);
</script>
</body>
</html>
2.通过该标签的标签名获取DOM对象数组
第二种方式是通过目标标签的标签名，用document对象调用getElementsByTagName()方法即可获取文档中所有该名的标签的DOM对象组成的数组，以下是代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<br /><br /><br id="space"/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script>
var elements = document.getElementsByTagName("br");
console.log(elements.length);
console.log(elements[2]);
</script>
</body>
</html>
3.通过该标签的name名获取该标签的DOM对象数组
第三种方式是通过目标标签的name名获取，获取到的也是该名的所有标签的DOM对象组成的数组，代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>足球
<input type="checkbox" name="hobby" value="3"/>乒乓球
<script>
var elements = document.getElementsByName("hobby");
console.log(elements.length);
console.log(elements[2]);
</script>
</body>
</html>
4.通过该标签的class类名获取改标签的DOM对象数组
最后一种是通过类名获取文档中该类标签的所有DOM对象数组，以下是代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" class="text">百度一下</a>
<br class="text" />
<span class="text">DOM对象</span>
<script>
var elements = document.getElementsByClassName("text");
for(var i=0;i<elements.length;i++){
console.log(elements[i]);
}
</script>
</body>
</html>
