1 DOM简介

文档对象模型（Document Object Model，简称DOM），是处理可扩展标记语言（HTML或XML）的标准编程接口。通过这些接口，可以改变网页的内容、结构和样式。

2 元素操作

2.1 获取元素

document.getElementById('id值');         //通过ID获取元素
document.getElementsByTagName('元素名'); //通过标签名获取元素
document.getElementsByClassName('类名'); //通过类名获取元素
document.querySelector('选择器');        //根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器');     //根据指定选择器返回
-----------------------------------------------------------------------
document.body;            //获取body元素
document.documentElement; //获取html元素

2.2 改变元素内容

element.innerText

从起始位置到终止位置，但他去除HTML标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行

2.3 操作常见元素属性

src、title、id、href等

2.4 操作表单元素属性

type、value、checked、selected、disabled等

2.5 操作元素样式属性

element.style
element.className

2.6 自定义属性的操作

使用自定义属性的目的

获取自定义属性值

element.属性  //获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')//主要获得自定义的属性 我们程序员定义的属性

设置自定义属性值：保存并使用数据，部分数据可以直接保存在页面中。

element.属性//设置内置属性值
element.setAttribute('属性')//主要设置自定义的属性

删除属性

element.removeAttribute('属性')

3 节点操作

3.1节点层级

利用节点层级关系（父兄子节点关系）获取元素父节点

node.parentNode 、、返回最近的父节点，如果没有则返回null

子节点

node.firstChild            //返回第一个子节点，不管是文本节点还是元素节点
node.firstElementChild     //返回第一个元素节点
node.children[0]           //返回第一个元素节点，还可以选择返回其他元素子节点

兄节点

node.nextSibling             //返回包括文本节点的下一个兄弟节点，找不到返回null
node.previousSibling         //返回包括文本节点的上一个兄弟节点，找不到返回null
node.nextElementSibling      //返回当前元素下一个兄弟节点，找不到返回null
node.previousElementSibling  //返回挡墙元素上一个兄弟节点，找不到返回null

3.2 节点的增删改查

创建节点

document.creatElement('tagName')

添加节点

node.appendChild(child)           //将一个节点添加到指定父节点的所有子节点末尾
node.insertBefore(child,指定元素)  //将一个节点添加到父节点的指定子节点前面

删除节点

node.removeChild(child)         //从DOM中删除一个子节点，返回删除的节点。

复制（克隆）节点

node.cloneNode(false/true)//返回改调用节点的副本。括号内参数为true是深度拷贝，为空格或false则是浅拷贝。

4 事件

事件是可以被JavaScript侦听到的行为，即触发---响应机制。事件由三部分组成：事件源、事件类型、事件处理程序，也称为事件三要素。

4.1注册事件

传统注册方式

element.onclick = function () {};//

事件侦听注册事件

element.addEventListener('click',function(){})
或
element.addEventListener('click',fn)
function fn(){}

4.2解绑事件

传统注册事件解绑

element.onclick = function () {
    element.onclick=null
};

事件侦听解绑事件

 element.addEventListener('click', fn);
 function fn() {
     element.removeEventListener('click', fn);
 }

4.3 DOM事件流

事件传递时在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。 DOM事件分为三个阶段：1、捕获阶段 2、当前目标阶段 3、冒泡阶段

element.addEventListener('click', function () {}, false);

代码只能执行捕获或者冒泡阶段中的一个，代码中第三个参数为true时执行捕获，为空或者false时执行冒泡。onclick和attachEvent（ie）只能执行冒泡。

4.4 事件对象

element.addEventListener('click',function(event){})

event就是一个事件对象，当做形参来看，事件对象只有注册事件以后才会系统自动创建存在，包含了一系列事件相关的信息，event可以自定义命名，通常缩写为e。常见的属性和方法有：

e.target                        //返回触发事件的对象 标准
e.srcElement;                   //返回触发事件的对象 非标准
e.type;                         //返回事件的类型 ，如click
e.cancelBubble;                 //阻止冒泡，非标准，ie6-8使用
e.returnValue;                  //阻止默认事件，非标准，ie6-8使用
e.preventDefault();             //阻止默认事件，标准
e.stopPropagation();            //阻止冒泡，标准

e.target 返回的是触发事件的对象（元素）

this 返回的是绑定事件的对象（元素）

4.5 事件委托

事件委托也称为事件代理，在jquery中称为事件委派不是在每一个子节点上单独设置事件监听器，而是在他们的父节点上设置，然后利用冒泡原理影响设置每个子节点。

4.6 事件对象

鼠标事件对象

click
mouseover
mouseout
blur

鼠标事件属性

e.pageX                //返回鼠标相对于浏览器可视窗口的X坐标
e.pageY                //返回鼠标相对于浏览器可视窗口的Y坐标
e.clientX              //返回鼠标相对于文档页面的X坐标
e.clientY              //返回鼠标相对于文档页面的Y坐标
e.screenX              //返回鼠标相对于电脑屏幕的X坐标
e.screenY              //返回鼠标相对于电脑屏幕的Y坐标

键盘事件对象

keyup   //键盘松开时触发
keydown//键盘按下时触发
keypress//键盘按下时触发，不识别功能键，如shift ，ctrl等，但区分大小写。

三个事件执行的顺序是 keydown-keypress-keyup

复习-DOM