document对象
document对象可以说是window对象的一个属性，可以通过window.document来调用，也可以省略window直接写document。
document对象是浏览器生成的一个对象。我们这样来理解:
HTML语言与JavaScript语言是两门不同的语言，它们不能直接交互，就需要一个中间介质，而这个介质就是document。浏览器提供的document对象，它封装了整个HTML文档为一个对象，是一个树结构的对象，就像xml一样。所以我们可以把document对象看做HTML的一个模子，HTML中的每一个标签对应着document中的一个节点，节点也是一个对象。所以整个document就是一个大的对象，它提包含了这个HTML文件中的所有标签对象。
浏览器加载HTML文件到内存中，通过js代码与document对象的交互实现对HTML页面的动态改变。
document的方法使用
1.获取html中的节点（标签）的方法
直接获取方式
- 通过标签的id获取：getElementById("标签名");获取标签节点对象
- 通过标签name属性获取：name属性是可重用的，id是惟一的，所以通过getElementByName获取的是节点列表而不是一个节点<br>
- 通过标签名获取：getElementByTagName();
- 通过类名获取：getElementByClassName();
间接获取方式
- 父子关系获取
- 从父节点获取子节点：父节点变量.childNotes;
- 从子节点获取父节点：子节点变量.parentNote;
- 兄弟关系获取:只能获取同级的标签节点，如没有则为null
- 上一个兄节点：子节点变量.previousElementSibling;
- 下一个兄节点：子节点变量.nextElementSibling;
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document节点获取</title>
</head>
<body>
<!--
-->
<script type="text/javascript">
function byIdTest(){
var byId = document.getElementById("button1");
alert(byId);
}
function byNameTest(){
var byName = document.getElementsByName("button2");
alert(byName+" 长度为："+byName.length);
}
function byTagNameTest(){
var tagName = document.getElementsByTagName("a");
alert(tagName+" 长度为："+tagName.length);
}
function byClassNameTest(){
var className = document.getElementsByClassName("navi");
alert(className+" 长度为："+className.length);
}
function getSonTest(){
var father = document.getElementById("father");
var childs = father.childNodes;
alert(childs+" 子节点数量："+childs.length+" 子节点包括标签和标签之间的文本")
}
function getFatherTest(){
var son = document.getElementById("son1");
var father = son.parentNode;
alert(father+" 节点的标签名:"+father.tagName)
}
function preBrother(){
var me = document.getElementById("son1");
var preBro = me.previousElementSibling;//sibling即兄妹的意思
alert(preBro +" 很明显第一个li标签没有上一个兄弟元素所以为空");
}
function nextBrother(){
var me = document.getElementById("son1");
var nextBro = me.nextElementSibling;
alert(nextBro);
}
</script>
<style type="text/css">
#father{
border:red 1px solid;
}
</style>
<h1>document节点获取</h1>
<hr>
<h3>直接获取方式</h3>
<button type="button" onclick="byIdTest()" value="byId获取" id="button1">byId获取</button><br>
name属性是可重用的，id是惟一的，所以通过getElementByName获取的是节点列表而不是一个节点<br>
<button type="button" onclick="byNameTest()" value="byName获取" name="button2">byName获取</button><br>
通过标签名获取<br>
<button type="button" onclick="byTagNameTest()">byTagName获取</button>
<a href=""></a><br>
通过类名获取<br>
<a href="" class = "navi"></a>
<button type="button" onclick="byClassNameTest()">byClassName获取</button>
<h3>间接获取方式</h3>
<h4>父子关系获取</h4>
<ul id="father">
<li id="son1">子1</li>
<li>子2</li>
<li>子3</li>
</ul>
从父节点获取子节点<br>
<button type="button" onclick="getSonTest()">获取子节点</button><br>
从子节点获取父节点<br>
<button type="button" onclick="getFatherTest()">获取父节点</button>
<h4>兄弟关系获取:上一个节点与下一个节点</h4>
<button type="button" onclick="preBrother()">上一个兄弟</button>
<button type="button" onclick="nextBrother()">下一个兄弟</button>
</body>
</html>