JS-DOM操作、事件

1、获取非行内样式
oDiv.currentStyle[‘width’] IE浏览器
getComputedStyle(oDiv, null)[‘width’] 谷歌、火狐
// 获取非行内样式的兼容性写法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
读取样式的时候使用兼容性写法读取
修改的时候还是使用 obj.style.width = 值修改即可
2、BOM操作
browser object
window.setInterval setTimeout
window.alert\window.confirm
window.open
打开新的网页，可以新窗口可以当前窗口
window.history(back、go)
浏览器历史记录，上一个、下一个
location
href : 获取当前的url，可以修改
reload() : 刷新当前页面
3、DOM操作
document object

children    所有的直接子节点
parentNode  父亲

// 高级浏览器的方式
firstElementChild   老大
lastElementChild    老幺
previousElementSibling  同胞节点上一个
nextElementSibling      同胞节点下一个

// 垃圾浏览器的方式
firstChild
lastChild
previousSibling
nextSibling

tagName   // 根据对象，获取标签名  大写
createElement  // 创建节点 通过document进行创建
removeChild   // 父节点调用，参数是子节点
appendChild   // 添加节点
insertBefore  // 插入到指定位置  
    insertBefore(newobj, oldobj)

setAttribute  getAttribute
    添加和获取属性值，无论官方还是自定义

4、吸顶条
标签对象拥有的属性
offsetTop : 距离网页最顶部的距离
offsetLeft : 距离网页最左边的距离
offsetWidth : 获取对象的宽度
offsetHeight : 获取对象的高度，如果高度由内容撑起，依然可以获取实际高度，以上这些属性获取的都是不带px的
【注】以上4个属性是只读的

window.onscroll事件

clientWidth ：可视区的宽度
clientHeight ： 可视区的高度
document.body.scrollTop : 非h5标准获取卷起高度
document.documentElement.scrollTop : h5标准获取卷起高度

5、事件绑定和事件冒泡
高级浏览器
addEventListener
oDiv.addEventListener(‘click’, test1, false)
removeEventListener
oDiv.addEventListener(‘click’, test1)

垃圾浏览器
attachEvent
    oDiv.attachEvent('onclick', test1)
detachEvent
    oDiv.detachEvent('onclick', test1)

事件ev和window.event
    事件到js中也是一个对象
获取事件的x和y坐标
    ev 匿名函数第一个参数，获取事件对象   高级浏览器
    window.event  IE浏览器
    兼容性获取事件方式
    var oEvent = ev || event

    获取事件的xy坐标，相对于窗口左上角
    oEvent.clientX  
    oEvent.clientY
取消事件冒泡
    cancelBubble       IE浏览器
    stopPropagation()  高级浏览器

    oEvent.cancelBubble = true
    oEvent.stopPropagation()
事件源对象
    srcElement 谷歌和ie
    target     火狐、谷歌
    oEvent.srcElement

6、小知识
禁止鼠标右键
oncontextmenu
document.oncontextmenu = function () {
return false
}
超链接和事件同时触发
returnValue IE浏览器的方式
preventDefault() 高级浏览器方式
函数里面直接 return false
键盘事件
onkeydown, 不区分大小写
onkeypress, 区分大小写
onkeyup
7、正则对象
match 正则匹配
replace 正则替换
8、表单对象
三种查找方法
submit()方法
method属性
action属性
js验证表单内容
9、select下拉框
onchange : 写这个事件，监听用户的选择
selectedIndex ：用户选择的哪一个选项
options ：所有的下拉框

oSel.options[oSel.selectedIndex].innerHTML

猜你喜欢