DOM核心重点内容

创建、增、删、改、查、属性操作、事件操作

创建：
1.document.write
2.innerHTML
3.document.createElement(标签名、加引号)

增：
1.将子节点追加到父节点最后面
父节点.appendChild(子节点)
2.将子标签放在某个子标签前面
父节点.insertBefore(新子标签，旧子标签)

删
1.父节点.removechild(子标签)

改：
1.修改元素属性：src  href  title
2.修改普通元素内容: innerHTML    innertext
3.修改表单元素：value  type  disabled
4.修改元素样式: style className

查：
H5新方法
1.获取一个  document.querySelector('CSS选择器') 
2.获取全部  document.querySelectorAll('CSS选择器') 
节点操作方法
1.获取所有子节点     父节点.children
2.获取上一个兄弟节点   节点.previousElementSibling
3.获取下一个兄弟节点   节点.nextElementSibling
4.获取父节点  子节点.parentElement
5.获取第一个子节点    父节点.firstElementChild
6.获取最后一个子节点    父节点.lastElementChild

属性操作：
1.添加属性   元素.setAttribute  （‘键’，‘值’）
2.获取属性   元素.getAttribute （属性名）
3.删除属性   元素.removeAttribute（属性名）

事件操作：

一、

1.元素.on事件=function(){}

2.元素.addEventListener(事件类型，处理程序，是否在捕获阶段执行)

3.解绑：元素.removeEventListener(事件类型，处理程序)     如果绑定用的是匿名函数就无法解绑

4.解绑：元素.on事件=null
二、

1.点击事件 元素.οnclick=function(){}

2.双击事件 dblclick

3.右击事件 contextmenu

4.按下事件 mousedown

5.抬起事件 mouseup

6.移入事件 mouseover/mouseenter

7.移除事件 mouseout/mouseleave

8.移动事件 mousemove

9.滚轮事件 mousewheel

10.键盘按下 keydowm     只要按住不松开就一直触发

11.键盘抬起  keyup

12.敲击键盘 keypress        只要按住不松开就一直触发

13.window.load        当页面中所有资源都加载完成才触发

14.window.scroll      滚动条滚动触发  

15.window.resize        浏览器大小发生改变就会触发

表单事件

16.focus         获取焦点

17.blur        失去焦点

18.change        下拉框选项改变

19.submit        表单提交   1.事件源一定时form  2.点击了提交按钮但是在跳转之前

获取元素样式：

getcomputedstyle(元素)-

获取到的是所有CSS键值对组成的对象，想获取值就在后面加 .键

如：getcomputedstyle(元素).left

获取元素的位置：

1.左边坐标      元素.offsetleft

2.上边坐标       元素.offsettop

获取元素的大小：
1.带边   元素.offsetwidth    元素.offsetheight

2.不带边    元素.clientwidth       元素.clienheight

获取不带滚动条的窗口大小:

1.document.documentElement.clientwidth

2.document.documentElement.clientheight

获取滚动过的距离：

var t=document.documentElement.scrolltop || document.body.scrolltop

事件对象：

1.window.event

阻止冒泡事件：

1.e.stoppropagation()

2.cancelBubble=ture

键盘码

事件对象.keyCode

上：38    下：40        回车：12        空格键：32        左：37        右：39

组合键：

1.事件对象.shiftkey        2.事件对象.ctrltkey         3.事件对象.altkey