BOM
windows对象
document对象
location对象
screen对象

Windows对象

1.窗口操作

移动指定的距离：window.moveBy（10，20）;          //向右移动10像素，向下移动20像素
移动到指定位置：window.moveTo(x,y);
修改窗口的高宽：window.resizeBy(x,y);
修改高宽为指定值：window.resizeTo(x,y);          //移动窗口，使它的宽度调整为x，高度调整为y

（IE）
取得窗口距屏幕位置(左、上)：
　　alert(window.screenLeft);
　　alert(window.screenTop);
客户区高宽：
　　alert(document.body.offsetWidth);
　　alert(document.body.offsetHeight);

（Mozila）
窗口位置：
　　alert(window.screenX);
　　alert(window.screenY);
客户区高宽：
　　alert(window.innerWidth);
　　alert(window.innerHeight);

2.在新窗口打开链接（弹出窗口）
windows.open("URL","新窗口名字"，"新窗口特性");

eg.
定义一个显示名字为“打开”的按钮，当鼠标点击时打开窗口长度宽度为400px的名为x.html的网页

<input id="btn" type="button" value="打开"/>
<script type = "text/javascript">
　　var btn = document.getElementById("btn");
　　btn.onclick = functionZ(){
　　　　windows.open("x.html","","width=400px, height=400px");
　　};
</script>

3.系统对话框（控制用户行为）
window.alert("字符串");       //alert()方法

if(confirm(Are you sure?)){         //confirm()方法
    alert("yes");
}else{
    alert("no");
}

var str = window.prompt("请输入姓名："，"张张");         //prompt()方法
    alert(str);

4.状态栏（不专业，使用户厌烦）
window.defaultStatus = "测试数据";          //使状态栏的文本暂时改变
window.status = "test";             //用户离开当前页面时可以一直改变该文本

5.时间间隔和暂停（有效告诉浏览器何时执行某行代码）

    var id=window.setTimeout("执行代码"，（间隔）毫秒数);
    window.clearTimeout(id);

    var id=window.setInterval("执行代码"，（暂停，可不设）毫秒数)；
    window.clearInterval(id);

    eg.
<input type="button" id="btn" value="开始"/>
<input type="text" size="60" id="txt1" />
<input type="button" id="btn2" value="暂停"/>
<script type="text/javascript">
　　var btn = document.getElementById("btn");
　　var btn2 = document.getElementById("btn2");
　　var txt = document.getElementById("txt1");
　　var r;
btn.onclick = function() {
   　　function test() {
       var day = new Date();
       txt.value = day;
       r = window.setTimeout(test, 3000);
   }
    　　test();
};　　

btn2.onclick = function () {
    window.clearTimeout(r);
};
test();
</script>

6.历史
        window.history.go(-1);      //正前负后，数字为-1表示每次后退，只退一个页面
        //window对象的引用不是必需的，也可使用history.go();
        history.back();         //后退
        history.forward();      //前进
页面数：
        alert("在历史记录中有"+history.length+"页");    //在历史记录中有x页

document对象（代表窗口空白区域）

1.属性
    页面的最后修改日期（用处不大）：lastModify
    浏览历史中后退一个位置的URL（用处不大）:referrer
    </title>标签中显示的文本（可读写）：title
    当前页面的URL（可读写）：URL
eg.
alert(document.URL);

2.集合属性
    页面中所有锚点的集合：anchors
eg.
　　<style type="text/css">
　　div {
   　　 height: 2000px;
　　}
　　</style>
　</head>
<body>
　　<a name="a" href="#">锚点1</a>
　　<a name="a" href="#">锚点2</a>
　　<a href="#">锚点3</a>
　　<div></div>
<script type="text/javascript">
　　alert(document.anchors[0].innerHTML);
</script>
　　<a href="#a">回到顶部</a>

    表单集合：forms
    图片集合：images    //可用document.images[0]或document.images["imageName"]
    超链接集合：links

3.方法（整个页面的元素会重新设置，轻易不要使用）
　　write("");
　　writeln("");

location对象（表示载入窗口的URL）

1.解析URL
    服务器名字：host
    URL中主机名后的部分：pathname
    端口：prot     //大多数URL没有端口信息，所以通常是空白的
    协议：protocol // URL中使用的协议，在（//）之前的部分
    URL中问号后的部分：search
eg.
        alert(location.search);

2.跳转到新页面
    location.href="a.html"
    location.assign("a.html");
    location.replace("a.html");         //没有历史信息

3.刷新页面
    location.reload(true);      //从服务器刷新
    location.reload(true);      //从本地刷新

navigator对象（包含大量有关web浏览器的信息）

//可用window.navigator引用它也可用navigator引用

    保存跟浏览器相关信息
    language
    userAgent
    onLine

screen对象（获取某些有关用户屏幕的信息）

    窗口可以使用的屏幕的高度：availHeight
    窗口可以使用的屏幕的宽度：availWidth
    颜色位数（大多数系统采用32位）：colorDepth
    屏幕的高度：height
    屏幕的宽度：width

全屏
    window.moveTo(0,0);
    window.resizeTo(screen.availWidth.screen.availHeight);

浏览器对象模型BOM总结的更多相关文章

  1. 浏览器对象模型BOM小结

    概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window B ...

  2. 浏览器对象模型BOM

    第二章 浏览器对象模型BOM 1.作用:操作窗口:提供导航对象:提供定位对象:浏览器上方的地址栏:提供跟屏幕相关对象:提供对Cookie的支持 2.根元素:window:代表整个窗口:window,o ...

  3. 浏览器对象模型BOM（Browser Object Model）

    1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...

  4. JavaScript编程：浏览器对象模型BOM

    4.浏览器对象模型BOM: document.body.offsetwidth可以获取浏览器宽度. Window对象:          窗口操作:            1.moveBy(dx,dy ...

  5. JavaScript 浏览器对象模型 (BOM)

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”. 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model)尚无正式标准. 由于现代浏览器已经 ...

  6. JavaScript高级程序设计（第3版）学习笔记·第8章——浏览器对象模型BOM

    转自:http://www.shaoqun.com/a/43768.aspx 访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器 ...

  7. 浏览器对象模型bom的作用是什么？

    浏览器对象模型bom的作用是什么? 零.总结 1.BOM提供了独立于内容而与浏览器窗口进行交互的对象 2.BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和 ...

  8. 浏览器对象模型(BOM)是什么？（体系结构+知识详解）（图片：结构）

    浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构) 一.总结 1.BOM操作所有和浏览器相关的东西:网页文档dom,历史记录,浏览器屏幕,浏览器信息,文档的地址url,页面的框架集. ...

  9. js浏览器对象模型-BOM

    bom browse object model 浏览器对象模型. 也就是window对象下面的东西. location 对象 window.location.href 表示打开窗口的路径. windo ...

  10. 浏览器对象模型(BOM)

    BOM结构 用户浏览网页的时候,浏览器会自动创建一些对象,这些对象存放着浏览器窗口的属性和相关信息,也就是大家熟称的BOM.浏览器对象模型是一个层次化的对象集,我们可以通过window对象访问所有对象 ...

随机推荐

  1. python ironicclient源码分析

    ironicclient是一个cli工具,用来和用户交互的. 首先写一个简单的例子,获取ironic所有的node节点: from ironicclient import client if __na ...

  2. JavaScript（四）

    条件语句 通过条件来控制程序的走向,就需要用到条件语句. 运算符 1.算术运算符: +(加). -(减). *(乘). /(除). %(求余)2.赋值运算符:=. +=. -=. *=. /=. %= ...

  3. JS功能函数

    1.整数每三位增加一个, function toThousands(num) {      return (num || 0).toString().replace(/(\d)(?=(?:\d{3}) ...

  4. ng7 设置http proxy

    看文档 proxy.conf.json { "/api": { "target": "http://localhost:5000", &qu ...

  5. Jmeter遇到打不开的问题

    1.JDK的版本,一定版本的jmeter需要特定版本以上的JDK支持,比如此次运行的apache-jmeter-2.12,就需要JDK1.6以上的版本支持.我原来装的是JDK1.5,配置好JMETER ...

  6. Spring-注入

    一.Spring的基本介绍:Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/ ...

  7. 纯css3实现只适应的正方形

    纯 CSS 实现自适应正方形 Table of Contents 方案一:CSS3 vw 单位 方案二:设置垂直方向的 padding 撑开容器 方案三:利用伪元素的 margin(padding)- ...

  8. Fiddler抓取数据并分析（完整的配置教程）

    一.Fiddler现在的移动应用程序几乎都会和网络打交道,所以在分析一个 app 的时候,如果可以抓取出其发出的数据包,将对分析程序的流程和逻辑有极大的帮助.对于HTTP包来说,已经有很多种分析的方法 ...

  9. eolinker使用初体验（一）

    1.官网 https://www.eolinker.com 2.安装测试增强插件,由于chrome安装的时候有问题,建议移步firefox浏览器,不纠结.. 3.新建一个单例测试

  10. 手动实现一个list的常用功能

    package com.pcxm.list; /** * 手动实现一个list * MyList * @description TODO * @author zhoum * @date 2018年5月 ...