BOM操作 : 浏览器对象模型,都是操作浏览器的
1,三大弹出层
window.alert() 提示框
window.prompt() 输入框
window.confirm() 确认框2,地址栏信息
window.location 地址栏信息
window.location.reload 重新加载页面
window.location.href 浏览器地址/设定跳转地址
decodeURIComponent() 地址栏中文正常显示
window.location.host 主机名称
window.location.prot 主机端口
window.location.search 地址栏参数3,浏览器的跳转
window.history 浏览器跳转
window.history.length 浏览器跳转次数
window.history.back 浏览器跳转上一个页面
window.history.forward 浏览器跳转下一个页面
window.history.go() 浏览器跳转次数设定4,浏览器信息对象
window.navigator 浏览器信息对象
window.navigator.userAgent 浏览器版本,名称等信息
window.navigator.appName 浏览器名称---网景
window.navigator.appVersion 浏览器版本
window.navigator.platform 浏览器所在操作系统5,运动条
document.documentElement.scrollTop || document.body.scrollTop
document.documentElement.scrollLeft || document.body.scrollLeft6,常见事件
window.onload 浏览器加载事件
window.onscroll 浏览器滚动条监听事件
window.onresize 浏览器大小改变
window.open() 新窗口打开
window.close() 关闭当前窗口DOM操作 : 文档对象模型,操作HTML文件的
1,获取标签对象,通过获取的标签对象,来操作标签
document.getElementById() 通过id属性值,获取一个标签对象
document.getElementsByClassN() 通过class属性值,获取标签对象,伪数组
document.getElementsByTagName() 通过标签名称,获取标签对象伪数组
document.getElementsByName() 通过标签name属性值,获取标签对象伪数组,可以forEach
document.querySelector() 通过设定内容,获取一个标签对象
document.querySelectorAll() 通过设定内容,获取标签对象,为数组,可以forEach2,操作,设定标签对象
属性操作
标签对象本身就具有的, console.dir(标签对象),可以看到的
通过 点语法 或者 []语法,直接操作
id,className,checked...
通过JavaScript方法操作
标签对象.setAttribute('属性' , 属性值) 设定
标签对象.getAttribute('属性') 获取
标签对象.removeAttribute('属性' , 属性值) 删除
样式操作
设定 : 标签对象.style.属性 = 属性值
标签对象.style[属性] = 属性值
获取 : window.getComputedStyle(标签对象).属性 一般浏览器
标签对象.currentStyle.属性 低版本IE浏览器
标签参数
标签对象.value
标签占位
标签对象.offsetHeight 标签对象.offsetWidth
宽高+padding+border
标签对象.clientHeight 标签对象.clientWidth
宽高+padding
标签对象.clientLeft 标签对象.clientTop
左 / 上 边框线宽度
标签对象.offsetLeft 标签对象.offsetTop
与父级定位对象 标签对象.offsetParent 之间的间距3,事件
事件类型
鼠标事件
click 左键单击
dblclick 左键双击
contextmenu 右键单击
mousedown 鼠标按下
mouseup 鼠标抬起
mouseover 鼠标经过,子级也会触发
mouseenter 鼠标经过.子级不会触发
mouseout 鼠标移出,子级也会触发
mouseleave 鼠标移出.子级不会触发
mousemove 鼠标移动
键盘按键事件
keydown 按键按下
keyup 按键抬起
e.keyCode 按键数值
e.altKey alt按键是否按下
e.ctrlKey ctrl按键是否按下
e.shiftKey shift按键是否按下
表单事件
focus 获取焦点
input 输入事件
change 失去焦点,并且数值改变
submit 提交表单
触摸事件
touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动
特殊事件
transitionend 过渡结束
animationend 动画结束
浏览器视窗窗口的宽度高度
包含滚动条
window.innerHeight
window.innerWidth
不包含滚动条
document.documentElement.clientHeight || document.documentElement.clientWidth
document.body.clientHeight || document.body.clientWidth
事件对象 e event
定义在事件对象处理函数的参数,浏览器会自动向其中存储数据
只需要定义形参,浏览器会自动存储赋值实参
e = e || window.event
事件对象的坐标
e.offsetX e.offsetY 事件对象,内容左上角的坐标
e.clientX e.clientY 事件对象,视窗窗口左上角的坐标
e.pageX e.pageY 事件对象,页面左上角的坐标
事件对象的内容
e.target 存储其中的属性 id className...
事件的传播:
点击子级标签,也会触发父级标签对象,相同类型的事件
冒泡机制: 从子级到父级
捕获机制: 从父级到子级
阻止事件传播
e.stopPropagation() 普通浏览器
e.cancelBubble = true 低版本IE
事件的委托
给父级标题,添加事件,通过判断触发事件的对象,来执行不同的操作
一般用于动态生成的标签
事件的监听
添加监听事件
标签对象.addEventListener('事件类型' , 事件处理函数) 一般浏览器
标签对象.attachEvent('on事件类型' , 事件处理函数) 低版本IE浏览器
移出监听事件
标签对象.removeEventListener('事件类型' , 事件处理函数)
注意:
如果没有参数,可以直接添加事件处理函数
如果有参数,要用 function(){} 来包裹事件处理函数
如果需要删除,必须绑定的是标签名称或者变量名称特别提示: 浏览器的兼容性,一定要知道,面试基本都会问到
目前可以回答的内容是:
HTML的兼容性: 对于HTML标签的兼容和对音频视频播放的兼容
css 的兼容性: 弹性盒子 过渡 动画 2d,3d....
JavaScript的兼容性: 我给你们总结的
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
