DOM
DOM的概念
DOM又称文档树模型
文档：一个网页可以称为文档
节点：网页中所有内容都是节点（标签，属性，文本注释等）；
元素：网页中的标签
属性：标签的属性
获取页面元素
根据id获取元素
方法：调用document对象的getEiementById方法
参数：字符串类型的id的属性值。
返回值：对应id名的元素对象
var id=document.getElementById("id");
id.style.backgroundcolor="pink";
根据标签名获取元素
方法：调用document对象的getElementByTagName方法
参数：字符串类型的标签名
返回值：同名的元素对象组成的数组
注意1：操作数据时需要按照操作数组的方法进行。（如用下标选中每一项）
注意2：getElementByTagName方法内部方法获取的元素是动态增加的。
根据name获取元素
方法：调用document对象的getElementByName方法。
参数：字符串类型的name属性值。
返回值：name属性值相同的元素对象组成的数组。
根据类名获取元素
方法：调用document对象的getElementByClassName方法。
参数：字符串类型的class属性值
返回值：class属性值相同的元素对象组成的数组。
浏览兼容问题:不支持IE8以下浏览器。
根据选择器获取元素
方法1：调用document对象的querySelector方法。通过css中的选择器去选择第一个符合条件的标签元素。
方法2：调用document对象的querySelectorAll方法。通过css中的选择器去选择第所有符合条件的标签元素。
参数：字符串类型的css中的选择器。
浏览兼容问题:不支持IE8以下浏览器。
var a=document.querySelector(#id .p);
事件
事件：在什么时候做什么事情
执行机制：出发--响应机制
绑定事件（注册事件）三要素：
1.事件源：给谁绑定事件
2.事件类型：绑定什么类型的事件click单击
3.事件函数：事情发生执行后执行什么类容，写在函数内部
常用事件监听方法
方法1：绑定HTML元素属性
方法2.绑定DOM对象属性
常用的鼠标事件类型：
onclick 鼠标左键单击出发
ondblclick 鼠标左键双击触发
onmousedown 鼠标按键按下触发
onmouseup 鼠标按键放开时触发
onmpisemove 鼠标在元素上移动时触发
onmouseover 鼠标移动到元素上触发
onmouseout 鼠标移出元素便捷触发
非表单元素的属性、
例如：href,title,id,src等等，
调用方式：元素对象打点调用属性名，例如obj.href.
注意：部分的属性名跟关键字和保留字冲突，会更换写法
class className
for htmlFor
rowspan rowSpan
属性赋值：给元素属性赋值。等号右侧的赋值都是字符串格式。
获取标签内部内容的属性：
两个属性：innerHTML和innerText
innerHTMl属性：在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等等、
innerText属性;在获取标签内部内容时，如果包含标签，获取内容会过滤标签，获取的内容会去掉换行和缩进等空白。
-改变标签内容：
innerHTML:设置属性值，有标签的字符串，会按照HTML语法中的标签加载
（使用场景：在设置纯字符串时使用）
innerTexr:设置属性值，有标签的字符串，会按照普通字符加载
（在设置有内部子标签结构时使用）
表单元素属性
value用于大部分表单元素的内容获取（option除外）
type 可以获取input标签的类型（输入框或复选框等）
disable 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性
注意。在DOM中元素对象的属性值只有一个时，会被转成布尔值显示
自定义属性操作
.getAttribute(name) 获取标签行内属性
setAttribut(name,value) 设置标签行内属性
removeAttribute(name) 移除标签行内属性
与element属性的区别：上述三个方法用于获取任意的行内属性，包括自定义属性
style样式属性操作
使用style属性方式设置的样式显示在标签行内
element.style属性的值，是所有行内样式组成的一个样式对象
注意：类似background-color这种复合属性的单一属性写法，是由多个单词组成，要修改为驼峰命名方式书写backgroundColor.
通过样式属性设置宽高，位置的属性类型是字符串，需要加上px单位
DOM节点
节点属性
nodeType 节点类型，属性值为数字，表示不同的节点类型，共12种。只读
1 元素节点
2 属性节点
3 文本节点
nodeName 节点的名称（标签名称），只读
nodeValue 节点值，返回或设置当前节点的值
父子节点属性
childNodes 只读属性，获取一个节点所有子节点的实时集合，动态变化。
children 只读属性，获取一个节点所有子节点的集合
firstChild 只读属性，返回该节点的第一个子节点，如果没有返回null。
lastChild 只读属性，与上类似
parentNode 返回一个当前节点的父节点，没有返回null
parentElement 返回当前节点的父节点元素（DOM元素）
兄弟节点
nextSlibling 只读属性，返回与该节点同级的下一个节点
previousSlibling 只读属性，返回与该节点同级的上一个节点
nextElementSibling 读属性，返回与该节点同级的下一个元素节点
previousElementSibling 只读属性，返回与该节点同级的上一个元素节点
创建新节点的方法
document.createElement("div") 创建元素节点
document.createAttribute("id") 创建属性节点
document.createTextNode("hello") 创建文本节点
节点操作方法
parentNode.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾
parentNode.replaceChild(newChild,oldChild) 用指定节点替换当前节点的一个子节点
parentNode.insertBefore(newNode,referenceNode) 在参考节点之前插入一个拥有指定父节点的子节点
parentNode.removeChild(child) 移出当前节点的一个子节点。这个子节点必须存在于当前节点中
Node.cloneNode() 克隆一个节点，并且可以选择是否克隆这个节点下的所有内容。参数为布尔值，表示是否深度克隆，如果为true表示该节点所有后代节点也会被克隆。
判断：
Node.husChildNodes() 没有参数，返回一个布尔值，表示元素是否包含子节点
Node.contains(child) 返回布尔值，表示传入节点是否为该节点的后代节点
注册事件的其他方法
- element.addEventListener()方法
参数：
第一个参数：事件类型的字符串（直接书写click）
第二个参数：事件函数
2.element.attachEvent() 方法
参数：
第一个参数：事件类型的字符串（需要加on）
第二个参数：事件函数
兼容性：ie10及其以下
移除事件其他方法
elemednt.removeEventListener()方法
element.detachEvent()
事件对象
低版本兼容问题：window.event
常用属性：
e.evebtPhase 查看事件触发时所处的阶段
e.target 用于获取触发事件的元素
e.srcElement 低版本使用
e.currentTarget 用于获取绑定事件的事件源元素
e.type 获取事件类型
e.clientX/e.clientY 所有浏览器都支持，鼠标距离刘篮球窗口左上角的距离
e.pageX/Y IE8以前不支持
取消默认行为和组织事件冒泡
e.preventDefault () 取消默认行为
e.return Value 低版本浏览器
e.stopPropagation() 组织冒泡,标准方式
e.cancelBubble=true; 低版本
offset系列属性
偏移量属性
offsetParent 偏移参考父级，距离自己最近定位的父级
offsetLedt/Top 偏移位置
offsetWidth/offsetHeight 偏移大小
客户端大小
client 系列没有参考父级元素。
clientLeft/clientTop 边框区域尺寸，不常用
clientWidth/clientHeight 边框内部大小
滚动偏移
scrolLeft/Top 蛾子内部滚动出去的尺寸
scrollWidth/Height 盒子内容的宽度和高度
BOM（浏览器对象）
延时器
语法：window.setTimeout(func,time)；
第一个参数：延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加（）
第二个参数：延时的时间，以毫秒计数，1000毫秒等于1秒
功能：在指定的时间后，延迟执行一个函数
清除延时器：
语法：window.clearTimeout(timeout);
参数：指定延时器变量名引用。
功能：清除指定的延时器
注意：清除的延时器需要存储到一个变量中，便于后期清除调用
定时器
语法：window.setInterval(fine,interval);
第一个参数：每次执行的函数，可以是匿名函数或者是一个函数名的引用，注意不要加（）
第二个参数：时间间隔
功能：每隔一个指定的时间，周期性取得执行一个函数。
清除定时器：
语法：window.clearInterval(timer);
参数：指定的定时器变量名引用。
功能:清除指定的定时器
注意：清除的定时器需要存储到一个变量中，便于后期清除调用
