parentNode 获取父节点
children 获取子节点(只包括直接子级)
childNodes 获取子节点(包括文本节点)
previousElementSibling 获取上一个兄弟节点
nextElementSibling 获取下一个兄弟节点
firstElementChild 获取首子节点
lastElementChild 获取尾子节点
createElement 创建节点
appendChild 从后面添加一个元素
insertBefore 从前面添加一个元素(参数)
cloneNode(true) 克隆元素(参数)
removeChild 删除元素
物体信息:
offsetLeft
offsetTop
offsetWidth
offsetHeight
获取定位父级:offsetParent
获取物体的绝对位置:
getBoundingClientRect()
.top
.left
.right
.bottom
事件:
onmouseenter onmouseleave onmousemove onmouseout
onmouseover
onmousedown
onmouseup
dblclick
keydown
keyup
blur
focus
onload
onerror
click
contextmenu
resize
scroll
change
getAttriBute 获取自定义属性
setAttribute 设置自定义属性
removeAttribute 删除自定义属性
事件对象及兼容
var oEvent=ev||event;
clientX 鼠标在可视区中X轴的距离
clientY 鼠标在可视区中Y轴的距离
scrolltop 滚动的距离
scrollHeight 内容高度
clientHeight 可视区高度
clientWidth 可视区宽度
取消冒泡:
cancelBubble=true
stopPropagation()
innnerHTML的bug会?
清空事件
事件捕获:
setCapture
releaseCapture
阻止默认事件:
return false
严格模式和正常模式的区别:
'use strict'
BOM:
ECMA
引用:
try catch 用法:
new Image();
=========================================
事件绑定
作用:给同一个元素加同一个事件加多次。
obj.addEventListener(sEv,fn,false);
兼容:IE9+,chrome,firefox
obj.attachEvent('on'+sEv,fn);
兼容:IE10-
事件流: 浏览器中事件的走向。
false 冒泡阶段 从下往上找相同事件
true 捕获阶段 从上往下找相同事件
只有addEventListener第三个参数为true时才会触发捕获
事件绑定兼容写法。
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
解除事件绑定
obj.removeEventListener(sEv,fn,false);
兼容:IE9+,chrome,firefox
obj.detachEvent('on'+sEv,fn);
兼容:IE10-
解除事件绑定兼容写法。
if(obj.removeEventListener){
obj.removeEventListener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}
解除事件绑定,解除不了匿名函数
因为两个函数不想等
因为函数的真正写法是
new Function();
往后只要加事件就加上事件绑定
this的错误用法:
1.定时器中不能使用this
2.事件中套了一层函数
3.行间事件套了一层
4.attachEvent中不能使用this
DOM事件:
1.以DOM开头
2.只能使用事件绑定
window.onload 页面加载完毕
加载:css,html,js,图片等
domReady DOM结构加载完毕以后
doucment
DOMContentLoaded dom结构加载完毕以后
必须绑定添加
只兼容高级浏览器(IE9,10,chrome,ff)
IE下想兼容模拟一个:
document.onreadystatechange 监控资源加载情况
document.readyState 资源此时情况
document.readyState=='complete' dom资源加载完毕
(这个是模拟加载)
事件委托:子元素的事件可以委托给父级(父级只是相对的)
委托:那事情交给别人
1.提高性能
2.给未来元素加事件
事件源:
oEvent.srcElement 兼容ie,chrome
oEvent.target 兼容高版本浏览器
兼容写法: var target=oEvent.srcElement||oEvent.target;
target.tagName==Li tagName 判断点击的元素是大写
onmouseover
onmouseout bug 移到子元素身上,也算移出了
onmouseenter: 进入了
解决onmosueover的bug
onmouseleave : 离开了
解决onmouseout的bug
在IE10下:
alert在里面移出2回
因为BOM浏览器对象模型的原因
用console.log()1回