DOM介绍
DOM:文档对象模型（Document Object Model)
JS中通过DOM来对HTML文档进行操作。
文档：表示的就是整个的HTML文档
对象：表示将网页中的每一个部分转换为对象
模型：使用模型来表示对象之间的关系，方便我们操作
节点介绍
节点：HTML文档中的每个成分是一个节点，构成HTML文档的最基本单元
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
如：<p id="id">Hello</p>
p标签为元素节点
id="id"为属性节点
Hello为文本节点
！！！节点彼此都有等级关系。通过节点可以说明HTML文档里面的关系
节点树关系图：
获取节点对象
浏览器中为我们提供了文档结点document,这个对象是window属性可在页面中直接使用，所以文档结点代表整个网页。
所以我们可以把文档节点document看出是一个接口，通过这个接口和其子节点之间的关系，我们可将js技术运用到网页上。
获取元素节点的三个方式：
1.getElementById() 通过id属性获取一个元素节点对象
例如:获取id为btn的按钮
var btn = document.getElementById("btn");
2.getElementsByTagName() 通过标签名获取一组元素节点对象
注意此方法会给我们返回一个类数组对象，会把所有的元素封装到对象中，类数组，只是一个普通的对象，他的原型是Object。而真实的数组是Array类型。、这说明了他拥有数组对象的功能，有索引。
例如：查找li节点var lis = document.getElementsByTagName("li");
3.getElementsByName() 通过name属性获取一组元素节点对象
注意此方法会给我们返回一个类数组对象，会把所有的元素封装到对象中，这说明了他拥有数组对象的功能，有索引。
例如：查找name=time的所有节点
var time = document.getElementsByName("time");
以上方法只能获取相关节点的对象输出是object。
获取节点对象的内容（innerHTML）
innerHTML获取其元素的html代码即html内容
<body>
<p id="hello">你好，js</p>
<input id="input" type="text" class="hh" value="哈哈">哈哈
<script>
var result = document.getElementById("hello").innerHTML;
console.log(result);
var result = document.getElementById("input").innerHTML;
console.log(result);
</script>
</body>
var result = document.getElementById("hello").innerHTML;
会显示结果：你好，jsp
var result = document.getElementById("input").innerHTML;
其结果会返回空值,因为像标签这种自结标签，其html不是哈哈而是空值，所以innerHtml会失效
但是我们可通过元素。属性名的方式来显示其值。
var result = document.getElementById("input").value;
这样就可以显示"哈哈"。
注意:元素.class属性会失效，要想知道元素class的值，我们必须使用：元素.className的方法
JavaScript摆放位置
因为html文件都是自上向下编译的，如果js代码放在html内容的上面，浏览器会先编译js代码，再编译html文件
然而，像一些节点对象的id，name或者标签并没有被定义，会导致js代码出错。会出现Uncaught SyntaxError: Invalid or unexpected token的错误
因此要么js代码放在html代码的下面，要么通过window.onload(){}这个表示待页面加载成功的方法，将js代码放到window.onload(){}里面。
//方法一：放在html代码的下面
<body>
<p id="hello">你好，js</p>
<input id="input" type="text" class="hh" value="哈哈">哈哈
<script>
var result = document.getElementById("hello").innerHTML;
console.log(result);
var result = document.getElementById("input").innerHTML;
console.log(result);
</script>
</body>
//方法二，放在html代码上面，但是要放在window.onload的方法体内
<script>
window.onload = function(){
var result = document.getElementById("hello").innerHTML;
console.log(result);
};
</script>
<body>
<p id="hello">你好，js</p>
<input id="input" type="text" class="hh" value="哈哈">哈哈
</body>