IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> WEB前端(5)—— JavaScript 对象模型 -> 正文阅读

[JavaScript知识库]WEB前端(5)—— JavaScript 对象模型

BOM 对象:

BOM 对象也称为内置对象(Browser Object Mode),是浏览器对象模型,也是JavaScript 的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM对象。可以理解为:window:document location navigator screen history。

window 对象:

window 对象表示浏览器窗口,所有浏览器都支持 window 对象,所有 JavaScript 全局对象,函数及变量均自动成为 window 对象的成员,其中全局变量是 window 对象的属性,全局函数是 window 对象的方法。

window 对象的常用方法如下:

*获取窗体的宽和高:有3种方法能够确定浏览器窗口的尺寸(浏览器窗口的宽和高不包括工具栏的宽和高,以及滚动条的宽和高)。

其中,对IE,Chrome,Firefox,Opera及Safari:

window.innerHeight:浏览器窗口的内部高度
window.innerWidth:浏览器窗口的内部宽度

对IE8,IE7,IE6,IE5:

document.documentElement.clientHeight
document.documentElement.clientWidth

*打开新窗口:

window.open(url);    //弹出一个新窗口

*关闭当前窗口:

window.close();    //关闭当前窗口

*调整当前窗口的尺寸:

window.resizeTo(宽,高);    //重新设置窗口大小

需要注意的是,从Firefox7开始,可以用 resizeTO 或者 resizeBy 改变窗口大小的仅仅是那些用 window.open 打开的页面,并且window.open 打开的窗口只能有一个Tab(标签页)其他窗口的大小不可以调整。

document 对象:

每个载入浏览器的 HTML 文档都会成为 document 对象,document 对象是 window 对象的一部分,可以通过window.document 属性对其进行访问,此对象可以从脚本中对 HTML 页面中的所有元素进行访问。

属性和方法描述
document.bgColor设置页面的背景色
document.fgColor设置前景色(文本颜色)
document.linkColor未点击过的链接颜色
document.alinkColor激活链接(焦点在此链接上)的颜色
document.vlinkColor已点击过的链接颜色
document.URL设置URL属性,从而在同一窗口打开另一网页
document.cookie设置和读出cookie
document.write()动态地向页面写入内容
document.createElement(Tag)创建一个HTML标签对象
document.getElementById(ID)获取指定ID值的对象
document.getElementsByName(Name)获取指定Name指的对象
document.body指定文档文体的开始和结束,等价于<body></body>
document.location.href完整URL
document.location.reload()刷新当前页面
document.location.reload(URL)打开新的页面

location 对象:

location 对象包含有关当前 URL 的信息,location 对象是 window 对象的一个部分,可以通过 window.location 属性访问。

属性和方法描述
location.href显示当前网页的URL链接
location.port显示当前网页链接的端口
location.reload()重新刷新当前页面

navigator 对象:

navigator 对象包含有关浏览器的信息,所有浏览器都支持该对象。

属性描述
appName返回浏览器的名称
appVersion返回浏览器的平台和版本信息
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值
platform返回运行浏览器的操作系统平台

screen 对象:

每个 window 对象的 screen 属性都引用一个 screen 对象。screen 对象中存放有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息优化它们的输出,已达到用户的显示要求。

属性描述
availHeight返回显示屏幕的高度(除Windows 任务栏之外)
availWidth返回显示屏幕的宽度(除Windows任务栏之外)
bufferDepth设置或者返回调色板的比特深度
colorDepth返回目标设备或者缓冲器上的调色板的比特深度
deviceXDPI返回显示屏幕的每英寸水平点数
deviceYDPI返回显示屏幕的每英寸垂直点数
fontSmoothingEnabled返回用户是否在显示控制面板中启用了字体平滑
Height返回显示器屏幕的高度
logicalXDPI返回显示器屏幕每英寸的水平方向的常规点数
logicalYDPI返回显示器屏幕每英寸的垂直方向的常规点数
pixeIDepth返回显示器屏幕的颜色分辨率(比特每像素)
updateInterval设置或者返回屏幕的刷新率
Width返回显示器屏幕的宽度

history 对象:

history 对象包含用户(在浏览器窗口中)访问过的 URL。history 对象是 window 对象的一部分,可以通过 window.history 属性对其进行访问,所有浏览器都支持该对象。

属性和方法描述
history.length返回浏览器历史列表中的 URL 数量
history.back()加载 history 列表中的前一个 URL
history.forward()加载 history 列表中的下一个 URL

BOM 操作:

下面将通过运用实例进行介绍:

*window 对象获得宽和高:

        //跨浏览器兼容获取屏幕宽和高
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        alert(w + ':'+h);

?*document 对象设置背景色和前景色:

<script>
    window.onload = function(){            //网页加载完成后调用
        document.bgColor = "#0fff00";      //设置网页背景色
        document.fgColor = "#0000ff";      //设置网页前景色(页面上的文字颜色)
    }
</script>
<body>
    hello,world
</body>

?*location 对象获取当前页面的 URL 链接和端口。

<script>
        window.onload = function(){     //网页加载完毕后调用
            alert(location.href);       //弹出当前页面的URL链接
            alert(location.port);       //弹出当前页面访问的端口
        }
</script>

?*navigator 对象获取浏览器名称,平台版本信息,是否启用 cookie 状态,操作系统平台等。

<script>
        window.onload = function(){     //网页加载完毕后调用
            //返回浏览器的名称
            document.write(navigator.appName + "<br/>");
            //返回浏览器的平台和版本信息
            document.write(navigator.appVersion + "<br/>");
            //返回指明浏览器中是否启用 cookie 的布尔值
            document.write(navigator.cookieEnabled + "<br/>");
            //返回运行浏览器的操作系统平台
            document.write(navigator.platform + "<br/>");
        }
</script>

?*screen 对象获取浏览器显示屏幕的宽和高,以及显示器屏幕的宽和高。

<script>
        window.onload = function(){     //网页加载完毕后调用
            document.write(screen.availHeight + "<br/>");   //返回浏览器显示屏幕的高度
            document.write(screen.availWidth + "<br/>");    //返回浏览器显示屏幕的宽度
            document.write(screen.height + "<br/>");        //返回浏览器屏幕的高度
            document.write(screen.width + "<br/>");         //返回浏览器屏幕的宽度
        }
</script>

?*history 对象获取网页链接的长度:

len = history.length;       //获取网页访问过的网页链接的长度
alert(len);
//history.back();           //回到上一次访问的页面
//history.forward();        //如果回去过了,就前进到下一个访问过的页面
//history.go(-2);           //回到上上次访问的页面

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-24 15:27:49  更:2021-08-24 15:29:16 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 12:48:11-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码