BOM编程

最新推荐文章于 2024-08-14 10:57:19 发布

kerer-sk

最新推荐文章于 2024-08-14 10:57:19 发布

阅读量640

点赞数

分类专栏： JavaScript 文章标签： javascript BOM

本文链接：https://blog.csdn.net/u010512964/article/details/72547788

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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 当表单将要被提交时触发。

４.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文档的标准方法。