BOM(浏览器对象模型)
iframe
//以下都为window对象下属性
`parent`//指当前窗口的父级窗口
`top` //永远指向最上层窗口
`self` //指向被调用窗口
窗口位置
//在IE、Safari、Opera和Chrome中
window.screenTop 和 window.screenLeft
//在Firefox中
wndow.screenX 和 wndow.screenY
在IE、Opera中,screenLeft和screenTop保存的是从屏幕左边和上边到由window对象表示的页面的可见区域的距离。但在Chrome、Firefox和Safari中,screenX或screenTop保存的都是整个浏览器窗口偶相对于屏幕的坐标值。
窗口大小及调整
outerWidth、outerHeight //IE9+、Firefox、Safari返回浏览器窗口本身尺寸,在Opera中返回页面视图容器的大小
innerWidth、innerHeight //IE9+、Firefox、Safari该容器中页面视图大小
//在Chrome中,这四个值都返回相同的值,即视图大小而非浏览器窗口大小
document.documentElement.clientWidth
document.documentElement.clientHeight
//保存了页面视口信息
document.body.clientWidht
document.body.clientHeight
//混杂模式取得相同信息,在Chrome混杂模式下,这这两种都可以使用
window.resizeTo(x,y) //调整到 x x y
检测平台、设备
var system = {
win:false,
mac:false,
x11:false,
//移动设备
iphone:false,
ipod:false,
ipad:false,
ios:false,
android:false,
nokiaN:false,
winMobile:false,
//游戏系统
wii:false,
ps:false
}
var ua = navigator.userAgent;
var p = navigator.platform;
system.win = p.indexOf('Win') == 0;
system.mac = p.indexOf('Mac') == 0;
system.x11 = (p == 'X11') || (p.indexOf('Linux') === 0);
//检测ios版本
if(system.mac && ua.indexOf('Mobile') > -1){
if(/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
system.ios = parseFloat(RegExp.$1.replace('_','.'));
} else {
system.ios = 2; //不能真正检测出来,所以只能猜测
}
}
//检测android版本
if(/Android (\d+\.\d+).test(ua)/){
system.android = parseFloat(RegExp.$1);
}
还有location等
DOM(文档对象模型)
classList
可以取得元素的class,使用remove、add、toggle可以操作类名。
PS:只支持 Firefox3.6+ 和 Chrome
readyState属性
loading 正在加载文档
complete 文档加载完成
insertAdjacentHTML()
//作为前一个同辈元素插入
element.insertAdjacentHTML('beforebegin',"<p>123</p>");
//最为第一个子元素插入
element.insertAdjacentHTML('afterbegin',"<p>123</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML('beforeend',"<p>123</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML('afterend',"<p>123</p>");
//支持IE、Firefox 8+、Safari、Opera和Chrome
scrollIntoView()
//让元素可见
document.forms[0].scrollIntoView();
//支持IE、Firefox、Safari和Opera