javascript BOM操作

2021/4/13 22:30:46

编程Tag： javascript 对象操作浏览器页面 bom 窗口 window document

本文主要是介绍javascript BOM操作，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

浏览器对象模型 BOM

基本的BOM体系结构：

一、 window对象

window对象是BOM对象的核心。所有对象和集合都以某种方式回接到window对象。

alert(window.document === document); true

window对象表示整个浏览器窗口。如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中。

window.frames[0] window.frames[“name”] 也可以直接用框架的名字。如window.leftframe。不过用frames集合更常用。

top对象指向的都是最顶层的框架。top.frames[0]

由于window对象是整个BOM对象的中心，所以不需要明确引用它。window.frames[0]可以写成frames[0]。

parent对象

Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。

要引用窗口中的一个框架，可以使用如下语法：

frame[i] //当前窗口的框架

self.frame[i] //当前窗口的框架

w.frame[i] //窗口 w 的框架

要引用一个框架的父窗口（或父框架），可以使用下面的语法：

parent //当前窗口的父窗口

self.parent //当前窗口的父窗口

w.parent //窗口 w 的父窗口

要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：

top //当前框架的顶层窗口

self.top //当前框架的顶层窗口

f.top //框架 f 的顶层窗口

新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。新窗口的opener 属性反过来引用了打开它的那个窗口。

以下内容在火狐、谷歌、IE、opera、safari浏览器下测试（除IE外均用最新版本测试）

属性

作用

浏览器兼容性及说明

window对象

集合

frames

页面使用的框架的集合

属性

closed

返回窗口是否已被关闭。(true、false)

screenLeft

screenTop

浏览器窗口的位置

screenX

screenY

浏览器窗口的位置

IE除外、opera有问题

innerWidth

innerHeight

浏览器窗口可以显示网页内容的区域(即：不包括标签栏、导航栏等)的高度、宽度

IE除外

outerWidth

outerHeight

浏览器窗口 (即：包括标签栏、导航栏等)的高度、宽度

IE除外

status

并不是在所有浏览器上都可以，现在多说浏览器需要用户手动启用设置。

defaultStatus

name

设置或返回窗口的名称

opener

返回对创建此窗口的窗口的引用。

方法

open()

打开新的窗口（现代浏览器大多会拦截弹出窗口）

该方法接受四个参数，url,新窗口的名字（为目标所用）、特性字符串(特性字符串使用都好分割的设置列表，具体参看手册)和说明是否用新载入的页面替换当前载入的页面的Bolean值。

var dxk = window.open("http://www.baidu.com/", "", "left=10px, top=20px, width=400px, resizable=no, toolbar=no");

dxk.close();

close()

关闭窗口，可以关闭创建的也可以关闭自身。

setTimeout()

接受两个参数，要执行的代码和在执行他之前要等待的毫秒数。第一个参数可以是代码传(与eval()函数的参数相同)，也可以是函数指针。

setTimeout(hello, 1000);

setTimeout(‘hello(“wuhui”)’,1000);

区别：第二种有引号可以加参数。

clearTimeout()

setInterval()

clearInterval()

moveBy(x,y)

不用写单位值，它的单位是像素

moveTo(x,y)

resizeBy(x,y)

resizeTo(x,y)

不能使用负数

alert()

confirm()

prompt()

blur()

焦点从顶层窗口移开

focus()

焦点给予一个窗口

createPopup()

var p = window.createPopup();

var pbody = p.document.body; pbody.style.backgroundColor = "red"; pbody.style.border = "solid black 1px";

pbody.innerHTML = "这是一个 pop-up！在 pop-up 外面点击，即可关闭它！";

p.show(150, 150, 200, 50, document.body);

仅IE

print()

打印当前窗口的内容

history对象

属性

length

方法

go()

back()

forward()

document对象

alert(window.document === document); true这个对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象（从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的消息。）

集合

all

提供对文档中所有 HTML 元素的访问

仅IE支持document.all

但是测试document.all.length是也发现只有firefox不支持document.all.length

anchors

页面中所有锚的集合(由<a name=”wuhui”></a>表示)

applets

所有applet的集合

embeds

所有嵌入式对象的集合（由<embed />标签表示）

forms

所有表单的集合

document.forms["wuhui"]["name"].value;

document.forms[0][0].value;

images

所有图像的集合

可以用document.images[0]或者document.images[“name”]（也就是img标签的name属性值）访问图像

document.images[0].src

links

所有Area 和 Link 对象的集合（由<a href = http://www.dxk.com/>杜晓孔</a>表示）

注意锚和链接的区别

属性

title

可读可写。

top.document.title = “wuhui”;

URL

返回当前文档的 URL。

IE可读可写，其它浏览器只读。

domain

返回当前文档的域名。

referrer

返回载入当前文档的文档的 URL。(可用于统计访问来源，同样也可以用服务器端技术实现)

lastModified

最后修改页面的日期（同样也可以用服务器端技术实现）

方法

write()

writeln()

这两个方法都会把字符的内容串插入到调用它们的位置。（必须在完全载入页面之前调用此方法，如果在页面载入后调用，它将抹去页面的内容，显示指定的内容）

参数为要写入文档的字符串

var oNewWin = window.open("about:blank", "newwindow", "height=150,width=300,top=10,left=10,resizable=no");

oNewWin.document.open();

oNewWin.document.write("<html><head><title>New Window</title></head>");

oNewWin.document.write("<body>This is a new window!</body></html>");

oNewWin.document.close();

open()

close()

location对象

BOM对象中最有用的对象之一是location对象，它是window对象和document对象的属性

属性

hash

例子：1.http://www.baidu.com/s?wd=js

host

hostname

href

pathname

port

protocol

方法

assign()

加载一个新的文档

replace()

它与location.href不太一样，location.href就好像是用户点击了某个链接，于是浏览器加载一个新的页面，并且产生了一条历史记录。但是replace()，新页面会覆盖窗口历史记录当前页面的条目（也就是用新的文档替换当前文档）。

reload()

参数为true或false，重新加载当前页面。reload方法有两种模式，参数为false或者省略不写则从缓存中加载数据，如果参数为true则从服务器端载入。

screen对象

属性

availWidth

返回显示屏幕的宽度 (除 Windows 任务栏之外)。

availHeight

返回显示屏幕的高度 (除 Windows 任务栏之外)。

width

返回显示器屏幕的宽度。

height

返回显示屏幕的高度。

Navigator对象

cookieEnabled

返回指明浏览器中是否启用 cookie 的布尔值。

platform

返回运行浏览器的操作系统平台。

userAgent

返回由客户机发送服务器的 user-agent 头部的值。

appName

返回浏览器的名称。(不建议使用)

这篇关于javascript BOM操作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

javascript BOM操作

相关编程文章