前言
本章将学习document对象以及其操作html元素的相关知识，本章知识尤为重要！
方法
1.概念
严格的意义上来将，document对象是window对象的一个属性，浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。
2.document获取html元素对象
看过CSS入门的同学应该都还记得，CSS有专门的选择器来标识html文档元素的位置！而我们的document对象是来获取html元素的方式无外乎这几种，十分容易！
直接获取方式：
通过id：document.getElementById("id的值")；该方法返回单个元素，因为html中id只能是唯一的
范例：获取id为test的html元素对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert(document.getElementById("test"));
}
</script>
</head>
<body>
用户名：<input type="text" id="test" value="" /><br>
密 码：<input type="password" name="" /><br>
<input type="button" name="" id="" value="提交" onclick="change();"/>
</body>
</html>
通过name属性值：document.getElementsByName("name属性值")；该方法返回一个元素对象集合
范例：获取name属性值为test的html对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert(document.getElementsByName("test"));
}
</script>
</head>
<body>
用户名：<input type="text" id="test" name="test" value="test" /><br>
密 码：<input type="password" name="test" /><br>
<input type="button" name="" id="" value="提交" onclick="change();"/>
</body>
</html>
通过标签名：document.getElementsByTagName("标签名称");该方法返回一个元素对象集合
范例：获取input元素的对象集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert(document.getElementsByTagName("input"));
}
</script>
</head>
<body>
用户名：<input type="text" id="test" name="test" value="test" /><br>
密 码：<input type="password" name="test" /><br>
<input type="button" name="" id="" value="提交" onclick="change();"/>
</body>
</html>
通过class属性值:document.getElementsByClassName("class属性值");该方法返回一个元素集合
范例：获取class属性值为test的元素集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert(document.getElementsByClassName("input"));
}
</script>
</head>
<body>
用户名：<input type="text" id="test" class="test" value="test" /><br>
密 码：<input type="password" class="test" /><br>
<input type="button" name="" id="" value="提交" onclick="change();"/>
</body>
</html>
间接获取方式：
父子关系：父级元素对象.childNodes;该方法获返回该父元素所有的子元素对象数组
子父关系：子元素对象.parentNode;该方法返回子元素的父对象
兄弟关系：元素.previousSibling;该方法获取同级的上一个元素对象 元素.nextSibling;该方法获取同级的下一个元素对象
3.document操作html元素对象
我们知道，通过以上方式我们拿到了html元素的对象，那么拿到之后势必要对其进行操作！
1）操作HTML元素的属性
操作元素属性
获取：
元素对象名.属性名//返回当前属性的属性值。----固有
元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义
修改
元素对象名.属性名=属性值
元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值----自定义
注意：
尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据。
2）操作HTML元素的内容
操作元素内容学习：
获取元素对象
获取
元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
元素对象名.innerText//返回当前元素对象的文本内容，不包括HTML标签
修改
元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。
3）操作HTML元素的样式
获取元素对象
通过style属性
元素对象名.style.样式名="样式值"//添加或者修改
元素对象名.style.样式名=""//删除样式
注意:
以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
通过className
元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式
元素对象名.className=""//删除类样式。
4）操作HTML文档结构
增加节点、删除节点
第一种方式：使用innerHTML
div.innerHTML=div.innerHTML+"内容"//增加节点
div.innerHTML=""//删除所有子节点
父节点.removeChild(子节点对象)//删除指定的子节点。
第二种方式：使用元素对象
var obj=document.createElement("标签名");
元素对象名.appendChild(obj);
写后感：
我之所以简略的写这些知识，实在是因为现在使用原生JS的项目几乎没有！！大部分的项目都是使用JQuery对HTML元素对象加以获取和操作，所以我们记住这些当然好，没记住也没有关系！记不记住我们都要向着JQuery稳步迈进，现在的你可以将JQuery简单的理解为一个更好用JS库，它将底层JS进行了封装，操作HTML元素对象更加方便快捷！