javascript BOM操作

2021/4/13 22:30:46

本文主要是介绍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

浏览器窗口的位置

IE

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

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

 

cookie

 

方法

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

search

方法

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操作的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程