一、DOM
- DOM：Document Object Model 文档对象模型
2.浏览器已经为我们提供了文档节点，对象这个是window属性，可以在页面中直接使用，文档节点代表的是整个网页。
console.log(document)
//[object HTMLDocument]
3.获取button对象
<button id="btn">按钮</button>
var btn=document.getElementById("btn");
4.修改按钮的文字
//获取按钮里面的文字
console.log(btn.innerHTML);
//修改文字
btn.innerHTML="I'm a button";
二、事件
1.事件：就是用户和浏览器之间的交互行为，比如：点击按钮、鼠标移动、关闭窗口。
2.我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会被执行。
3.可以将js代码编写到标签的onclick属性中，只有当我们点击按钮时，js代码才会执行吗，虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用。
<button onclick="alert('你点我干嘛!!!');">点我一下</button>
4.将对象绑定一个事件，这种方法维护起来更好
//获取按钮对象
var btn=document.getElementById("btn");
//可以为按钮绑定的事件绑定处理函数的形式来响应事件
//这样当事件被触发时，其对应的函数将会被调研员
//绑定一个事件
btn.onclick=function(){
alert("你还点我干嘛");
}
5.onclick像这种单击事件绑定的函数，我们称为单击响应函数，当事件被触发的时候就执行。
三、文档的加载
1.浏览器加载一个页面时，是按照自上向下的顺序加载的，读取一行加载一行。
如果将script标签写到页面上边，在代码执行时，页面还没有加载，页面还没有加载DOM对象，会导致无法获取到DOM对象。
2.将js代码编写到下部，可以确保页面加载完成后再加载js代码。
3.onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件
window.onload=function(){
alert("hello");
}
4.如果想把script写到上部，就可以写到onload事件里，
该事件对应的响应函数将会在页面加载完成之后执行，
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("你还点我干嘛");
}
}
四、DOM查询，获取元素节点
1.getElementsByTagName()
（1）可以根据标签名来获取一组元素节点对象
（2）这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中。
即使只查询到一个元素，也会返回一个数组。
（3）因为是类数组，可以查询其长度，还可以进行遍历。
2.innerHTML
（1）innerHTML用于获取元素内部的HTML代码
（2）对于自结束标签，这个属性无意义，比如input标签
（3）如果需要读取元素节点属性，直接使用 元素.属性名。比如：元素.id 、元素.name
注意：class属性不能采用这种方式，读取class属性时需要使用元素 .className
3.innerText
（1）该属性可以获取到元素内部的文本内容。
（2）它和innerHtml类似，不同的是它会自动将html标签去除
4.获取节点中的文本节点
五、通过元素节点的子节点查询
1.childNodes属性
（1）childNodes属性会获取包括文本节点在内的所有节点。
根据DOM，标签与标签之间的空白也会被默认为文本节点。
注意：在IE8及以下版本，不会讲空白文本当成子节点，所以该属性在IE8中会返回出现的子元素个数，而其他浏览器会包括空白文本。
（2）children属性
可以获取当前元素的所有子元素。不包括空白文本。
（3）firstChild属性
firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
（4）firstElementChild属性
firstElementChild属性可以获取当前元素的第一个子元素（不包括空白文本节点）
注意：这个属性不兼容IE8及以下的浏览器。
六、获取父节点和兄弟节点
（1）定义一个函数，专门用来为指定的元素绑定单击响应函数。
参数：idStr 要绑定单击响应函数的对象的id属性值。
fun 事件的回调函数，当单击元素时，该函数将会被触发。
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
myClick("btn01",function(){
alert ("hello");
})
(2)parentNode属性
返回当前节点的父节点。返回不是数组，只有一个。
（3）previousSibling属性
返回当前节点的前一个兄弟节点，也可能获取到空白的文本。
（3）previousElementSibling属性
返回当前节点的前一个兄弟元素，不包括空白文本。IE8及以下不支持。
七、DOM查询的其他方法
1.获取body标签
var body=document.getElementsByTagName("name")[0];
//getElementsByTagName方法返回的是类数组，而一个文档里面是只有一个body标签的
在doucument中有一个属性body，它保存的是body的引用。
var body=document.body;
2.获取Html根标签
document.documentElement保存的是html的根标签。
var html=document.documentElement;
3.document.all页面所有的元素
document.all可以获取页面中所有的元素
document.getElementByTagName("*")也可以获取页面中所有的元素。
4.根据元素的class属性值查询一组元素节点对象
getElementsByClassName（）可以根据class属性获取一组元素节点对象，但是该方法不支持IE8及以下浏览器。
document.getElementsByClassName("class值");
可以用document.querySelector()：
document.querySelector(".box1");
5.获取class为box1中的所有的div
document.querySelector();
(1)需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象。IE8支持这个方法
document.querySelector(".box1 div");
（2）使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个。
6.document.querySelectorAll()
document.querySelectorAll()和document.querySelector()用法类似，不同的是它会将符合条件的内容封装到一个数组中返回。
即使符合条件的元素只有一个，也会返回数组。