对象dom

本文深入讲解了浏览器对象模型(BOM)中的核心概念,包括window、document等对象的作用及使用方法,并详细介绍了history、location等对象的功能特性。同时,还探讨了如何通过BOM操作浏览器窗口的位置、大小以及滚动条等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.window对象:

注:浏览器对象模型,所有浏览器都支持window对象,window对象是所有对象顶层对象!!!!
1.document:使用我们从脚本中,对HTML(页面中所有的元素进行访问).
2.history:包含用户,在浏览器中访问过的URL;
3.location:包含有关当前URL的信息;
4.Navigator:包含有关浏览器的信息;
5.screen:包含有关客户端显示屏幕的信息;
    注:1.所有浏览器都支持window对象,它表示浏览器窗口的. 
    2.所有javascript 全局对象.函数以及变量均自动成为window对象的成员.
    3.全局变量是window对象的属性
    4.全局函数是window对象的方法.

2.window对象.位置.

    1.console.log(window.screenX);//相对屏幕X轴的坐标.
    2.console.log(window.screenY);//相对屏幕Y轴的坐标.
    3.window.alert(window.screenleft +""+ window.screentop);//表示对话框的位置.

3.窗口大小:浏览器可见区域的尺寸;

alert(window.innerwidth +""+window.innerheight);//w3c所支持.
alert(document.documentElement.clientwidth +""+document.documentElement.clientheight);

4.window.onload(整个HTML加载完成之后它会调用的方式,执行的函数;)

    1.window.onload = function(){
            var btn = document.getElementByID("btn");
            <input type="button" value="点我" id="btn">
            btn.onclick = function(){
                    window.moveBy(50,50);//相对于浏览器当前坐标偏移.
        }
            } onclick //点击过后,添加点击事件;


        movto.onclick = function(){
        //相对于浏览器当前坐标偏移;
            newwindow.moveto(100,100);
        };
Newwindow = window.open("URL","_self",width= 500,height= 500,location = no);打开一个新的窗口;


    document.getElementBytagName(li);//获取元素的对象语法.

5.滚动条移动

    1.window.scrollBy(x,y);//相对当前滚动条位置移动.
    2.window.scrollTo(x,y);//把滚动条移动到指定的位置.

6.history 对象方法,(属性);

    1.history.back();
    2.history.forward();
    3.history.go(number|url)

7.location对象;

属性:
    1.href:返回完整的URL//console.log(location.href);
    2.hostname:返回URL的主机名;
    3.port:返回一个URL服务器使用的端口号;
    4.seach:返回的URL路径名;

方法:
    1.location.assign("URL");//加载一个新的文档;
    2.location.reload("true");//用于刷新当前文档(整个页面); true(表示从服务器上down新的文档);
    3.location.replace("url");//页面跳转并且没有历史记录;       

8.screen对象;

    window.screen.avalwidth://返回屏幕的宽度.
    window.screen.avalehight://返回屏幕的高度;
    window.screen.width://屏幕的总宽度;
    window.screen.height://屏幕的总高度;

9.时间间隔函数:(计时器);

    1.window.setinterval(code,millise):按照指定的周期,(以毫秒计)来调用函数或者计算表达式;
    2.window.clearinterval(obj);//取消由setinterval()设置的timeout;
    3.window.setimeout(code,millise);在指定的毫秒后调用,函数或者计算表达式.
    4.window.clearTimeout(obj);取消由settimeout();方法设置timeout;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值