事件
事件就是用户和浏览器之间的交互行为 ，比如：点击按钮、鼠标移动、关闭窗口等等。
我们可以再事件对应的属性中设置一些JS代码，这样当事件被触发时，这些代码将会执行，这种写法我们称为结构和行为耦合，不方便使用，不推荐使用。
<button id = "btn" onmousemove = "alert('点我干嘛！！！');">我是一个按钮</button>文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载，DOM对象也没有加载，会导致无法获取到DOM对象。
onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOm对象已经加载完毕了。
window.onload =function(){
//获取id为btn的按钮
var btn =document.getElementById("btn");
//为按钮绑定单击响应函数
btn.onclick = function(){
alert("hello");
};
};DOM查询
注:常用的相关操作会特殊标记
通过document对象调用
1.getElementByID()
通过id属性获取一个元素节点对象
2.getElementsByTagName()
通过标签名获取一组元素节点对象，这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中返回。
3.getElementsByName()
通过name属性获取一组元素节点对象
4.innerHTML
通过这个属性可以获取到元素内部的html代码，对于自结束标签，这个属性没有意义。如果需要读取元素及节点的属性，直接使用元素.属性名，例子： 元素.id 元素.name 元素.value。 注意： 读取class属性是需要使用 元素.className
通过具体的元素节点调用
1.getElementByTagName（）
方法，返回当前节点的指定标签名后代节点
2.childNodes
属性，表示当前节点的所有子节点，会获取包括文本节点在内的所有节点。根据DOM标准，标签间的空白也会当成文本节点。注意：在IE8及以下的浏览器中，不会将空白当成子节点。
3.firstChild
属性，表示当前节点的第一个子节点（包括空白文节点）
4.firstElementChild
获取当前元素的第一个子元素（不建议使用，不支持IE8及以下的浏览器）
5.lastChild
属性，表示当前节点的最后一个子节点
6.parentNode
属性，表示当前节点的父节点
7.previousSibling
属性，表示当前节点额前一个兄弟节点（也可能获取到空白的文本）
8.previousElementSibling
获取前一个兄弟元素，IE8及以下不支持
9.nextSibling
属性，表示当前节点的后一个兄弟节点
10.innerText
该属性可以获取到元素内部的文本内容，他和innerHTML类似，不同的是它会自动将HTML标签去除
11.document.body
在document中有一个属性body，他保存的是body的引用
12.document.documentElement
保存的是html根标签
13.document.all
代表页面中所有的元素
14.getElementByClassName（）
根据元素的clas属性值查询一组元素节点对象，但是该方法不支持IE8及以下浏览器
15.document.querySelector（）
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象，虽然IE8中没有getElementsByName（），但是我们可以使用querySelector（）代替，使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回第一个
16.document.querySelectorAll
该方法和querySelector（）用法类似，不同的是它会将符合条件的元素封装到一个数组中返回，即使符合条件的元素只有一个，他也会返回数组
DOM增删改
1.document.createElement（）
可以用于创建一个元素节点对象，它需要一个元素节点对象，将会根据标签名创建元素节点对象，并将创建好的对象作为返回值返回。
2.document.createTextNode（）
可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。
3.appendChild（）
向一个父节点中添加一个新的节点，用法： 父节点.appendChild（子节点）；
4.insertBefore（）
可以在指定的子节点前插入新的子节点。 用法： 父节点.insertBefore（新节点，旧节点）；
5.replacedChild（）
可以使用指定的子节点替换已有的子节点 。 语法 ： 父节点.repalceChild（新节点，旧节点）；
6.removeChild（）
可以删除一个子节点， 语法 ： 父节点.removerChild（子节点）
使用DOM操作CSS
1.通过JS修改元素的样式：
语法： 元素.style.样式名 =样式值
我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了！important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加！important
注意：如果CSS的样式中含有 - ，需要将这种样式名修改为驼峰命名法。这种名称在JS中是不合法的，比如：background-color，去掉 - ，然后将 - 后的字母大写，例如：bacground-color 改为 backgroundColor
2.1获取当前显示的样式
语法： 元素.currentStyle.样式名
他可以用来读取当前元素正在显示的样式
注意：currentStyle只有IE浏览器支持，其他的浏览器都不支持
2.2在其他浏览器中可以使用
getComputedStyle() 这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数
第一个： 要获取样式的元素
第二个：可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式
如果获取的样式没有设置，则会读取到真实的值，而不是默认值。比如，没有设置width，他不会获取到auto，而是一个长度
DOM其他样式操作的属性
1.clientWidth/clientHeight
这两个属性可以获取元素的可见宽度和高度，这些属性都是不带px的，返回的都是一个数字，可以直接进行计算，会获取元素宽度和高度，包括内容区和内边距，这些属性都是只读的，不能修改
2.offsetWidth/offsetHeight
获取元素的整个宽度个高度，包括内容区、内边距和边框
3.offsetParent
可以用来获取当前元素的定位父元素，会获取当离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body。
4.offsetLeft / offsetTop
获取当前元素相对于其定位父元素的水平（垂直）偏移量
5.scrollWidth / scrollHeight
可以获取元素整个滚动区域的宽度和高度
6.scrollLeft / scrollTop
可以获取水平（垂直）滚动条滚动的距离