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属性获取：getElementByName(); //name属性是可重用的，id是惟一的，所以通过getElementByName获取的是节点列表(NodeList)而不是一个节点
-
- 还有一种通过name获取标签节点的方法(不常用)：docuement.name值
- 通过标签名获取：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>
2.获取HTML标签的属性值
获取元素对象
操作元素属性
获取：
- 元素对象名.属性名//返回当前属性的属性值---固有属性
- 元素对象名.getAttribute("属性名");//返回自定义属性值---自定义属性，此方法也可以获取固有属性的值，但value较特殊获得的永远是默认值。
修改：
- 元素对象名.属性名=属性值
- 元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值---自定义
注意：
- 尽量的不要修改id和name值
- 使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function test1(){
var inp = document.getElementById("inp");
alert("type:"+inp.type+" name:"+inp.name+" id:"+inp.id+" value:"+inp.value);
}
function test2(){
var inp = document.getElementById("inp");
alert("abc:"+inp.getAttribute("abc"));
alert("value:"+inp.getAttribute("value"))//value较特殊，获取的是HTML代码中设置的默认值
}
function test3(){
var inp = document.getElementById("inp");
inp.type = "button";//改变固有属性
//也可以使用此方法：inp.setAttribute("type","button");
inp.setAttribute("abc","haha");
}
</script>
<h2>获取标签属性</h2>
<hr>
<input type="button" value="获取固有标签属性 " onclick="test1()">
<input type="button" value="获取自定义标签属性 " onclick="test2()">
<input type="button" name="" id="" value="改变标签属性" onclick="test3()"/>
<br>
姓名：<input type="text" name="myinput" id="inp" value="默认值" abc="我是自定义属性的值" />
</body>
</html>