javascript中BOM核心对象以及常用方法

1.BOM是Browser Object Model的缩写,简称浏览器对象模型
2.BOM的核心对象是window子对象有document frames history location navigator screen 
3.BOM缺乏标准,DOM标准是W3C,JavaScript标准是ECMA
4.history对象 浏览器历史记录
    back()加载历史记录中的前一个页面
    forward()加载历史记录中的下一个页面
    go(number)加载指定页面
5.location对象 用于获取当前页面的url以及转到新的页面,获取页面相关信息
    location.herf = 'url地址'
    location.hostname 返回 web 主机的域名
    location.pathname 返回当前页面的路径和文件名
    location.port 返回 web 主机的端口 (80 或 443)
    location.portocol 返回页面使用的web协议。 http:或https:
6.navigator对象 可以获取浏览器的相关信息 如版本内核 判断浏览器
    userAgent是最常用的属性,用来完成浏览器判断
7.screen对象 获取用户屏幕信息 如宽高,是屏幕的宽高不是浏览器的窗口大小
8.window对象上常用方法
    alert() setInterval(fn,时间) setTimeout(fn,时间) clearInter(fn) prompt() open() close() 

    reszieBy() reszieTo() scrollBy() scrollTo() scrollX scrollY

9.测试代码

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
</ head >
< body >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< button id= "btn" >提交 </ button >
< button id= "btnopen" >新建窗口 </ button >
< button id= "btnresize" >调整窗口大小 </ button >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< script >
var btn = document. getElementById( 'btn');
btn. onclick = function(){
//console.log(1);
//console.log(navigator);
//console.log(history);
//history.back();
//history.forward();
//history.go(2);
//close();
//console.log(location.href);
//location.href = 'https://blog.csdn.net/i10630226/article/details/45485915';
//console.log(location.hostname);
//console.log(screen);
//scrollBy(0,100)
//prompt();
scrollTo( 0, 100);
};
< / script >
< script >
var w;
var btnopen = document. getElementById( 'btnopen');
var btnresize = document. getElementById( 'btnresize');
btnopen. onclick = function(){
w = window. open( 'http://www.runoob.com/jsref/met-win-open.html', '', 'width=300,height=300');
w. focus();
}
btnresize. onclick = function(){
w. resizeTo( 500, 500);
w. focus();
}
< / script >
</ body >
</ html >

猜你喜欢

转载自blog.csdn.net/weixin_32682577/article/details/80777855