BOM编程

1、BOM编程简介

全称 Browser Object Model,浏览器对象模型。为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器BOM编程。编程中可以查阅DHTML API文档

2、window 对象

  • Window 对象是 JavaScript 层级中的顶层对象。
  • Window 对象代表一个浏览器窗口或一个框架。
  • Window 对象会在 <body><frameset> 每次出现时被自动创建。

2.1 window中的方法

使用window中的对象和方法时,可以省略不写window

document 对 Document 对象的只读引用
location 用于窗口或框架的 Location
history 对 History 对象的只读引用
document.tilte 设置网页的标题
moveto() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置
moveby() 相对于目前的位置移动。
resizeTo() 调整当前浏览器的窗口。
open() 打开新窗口显示指定的URL(有的浏览器中是打一个新的选项卡)

3.事件

基本上所有的HTML元素中都可以指定事件属性。
所有的事件属性都是以on开头,后面的是事件的触发方式

3.1 注册事件的方式

方式一:直接在HTML元素上注册

<!-- 浏览器加载完这个标签,就调用ready() --!>
<body onload="ready()">
<script type="text/javascript">
    funcation ready(){
        alert("123")
    }
</script>

方式二:可以使用js代码找到对应的对象再进行注册

<body id="body">
<script type="text/javascript">
    var bodyNode = document.getElementById("body");

        bodyNode.onload = function(){
            alert("body的元素被加载完毕");
        }
</script>

常用的事件类型:
鼠标点击相关:

onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关:

onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的:

onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

其他:

onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。

4.location 对象

Location 对象是由 JavaScript runtime engine 自动创建的,包含有关当前 URL 的信息。
location中的重要方法:

href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面

<script type="text/javascript">
    function showURL(){
        alert(location.href);
    }

    function toBD(){
        location.href="http://baidu.com";
    }
        function reflash(){
            location.reload();
        }

    // 设置1s刷新一次页面
    window.setInterval("reflash()", 1000);
</script>

<input type="button" onclick="showURL()" value="显示网址" />
<input type="button" onclick="toBD()" value="下载"/>

5.screen 对象

Screen 对象是由 JavaScript runtime engine 自动创建的,包含有关客户机显示屏幕的信息。

availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。

6.document对象

该对象代表整个文档页面,HTML网页是可以看做是一个树状的结构:

    html
     |-- head
     |     |-- title
     |     |-- meta
     |     ...
     |-- body
     |     |-- div
     |     |-- form
     |     |     |-- input
     |     |     |-- textarea
     ...   ...   ...

这是一颗树,是由多个节点(Node)组成的,节点的类型有很多种。节点最多有一个父节点,可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值