DOM:

学习目标：
1.能够说出什么是DOM
2.能够获取页面元素
3.能够给元素注册事件
4.能够操作DOM元素的属性
5.能够创建元素
6.能够操作DOM节点

DOM简介：文档对象模型（document object model）,是w3c组织推荐的处理可扩展标记语言的标准编程接口。
w3c已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

DOM树：
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有的标签都是元素，DOM中使用element表示
节点：网页中所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

获取元素：DOM在实际开发中主要用来操作元素
1.根据ID获取：使用getElementById()
var time = document.getElementById(time)
注意事项：参数id是大小写敏感的字符串，返回的是一个元素对象。
console.log(time) //打印我们返回的元素对象，更好的查看里面的属性和方法。

2.根据标签名获取：
使用getElementsByName() //可以返回带有指定标签名的对象的集合。

3.H5新增的获取元素方式：根据类名获取（IE9以上版本才支持，移动端不受限制）

事件基础：
事件概述：可以被javascript侦测到的行为，简单理解为触发-响应机制
事件有三部分组成：事件三要素
1.事件源：事件被触发的对象，在js中获取html的事件元
2.事件类型：如何触发，什么事件比如：鼠标点击，鼠标经过，键盘按下，滚轮滑动等（绑定事件格式为，事件名.事件类型）

常见的鼠标事件类型：
onclick鼠标点击左键触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发

3.事件处理程序：通过一个函数赋值的方式完成。

利用DOM操作元素来改变元素里面的内容，属性，等：
改变元素的内容：
1.element.innerText从起始位置到终止位置的内容，获取元素内容的时候，它去除html标签，同时空格和换行也会被去掉
不标准

2.element.innerHTML起始位置到终止位置的全部内容，获取元素内容的时候，包括html标签，同时保留空格和换行。
w3c推荐

利用这两个标签获取元素的内容：

123
567

两者的不同：innerText不识别HTML标签，而innerHTML可以

利用DOM操作元素来改变元素里面的内容，属性，等：
改变元素的属性：
1.获取元素
var ldh = document.ElementById(‘ldh’);
var zxy = document.ElementById(‘zxy’);
var img = document.ElementById(‘img’);
2.注册事件 处理程序
zxy.onclick = function() {
img.src = ‘输入需要的照片地址’;
img.title = ‘输入需要的标题’；
}
ldh.onclick = function() {
img.src = ‘输入需要的照片地址’;
img.title = ‘输入需要的标题’；
}
（里面也可以放href属性）

利用DOM可以操作如下表单元素的属性：
type,value,checked,selected,disable （表单是否被使用）

样式属性操作：通过js修改元素的大小，颜色，位置等样式
1.element.style行内样式操作
注意：js里面的样式采取驼峰命名法
js修改style样式操作，产生的是行内样式，css权重比较高
适用于样式比较少，或者功能简单的情况下使用
使用举例：
var input = document.querySelector(‘input’);
input.onclick = function() {
input.style.color = ‘#333’;
}

2.element.className类名样式操作。
注意：
class为保留字，所以使用的是className
简单来说就是让当前元素的类名发生改变
使用举例：

var test = document.querySelector(‘div’);
test.onclick = function() {
test.className = ‘change’;
}
注意：className会直接覆盖原先的类名,如果需要保留以前的类名可以使用这种方式：test.className = ‘chang zz’