JavaScript操作BOM对象

JavaScript组成：EcmaScript  BOM DOM

浏览器对象模型（BOM）提供了独立于内容与浏览器窗口进行交互的对象，使用BOM可以实现与HTML的交互。作用是将相关元素包装起来，降低开发劳动量，提高web页面设计能力。

window对象是BOM对象的核心，看到的浏览器窗口就是顶层的BOM对象，其次是网页内容（document文档），包括一些超链接，表单等

出了document之外，还有地址对象（location）和历史对象（history），用于浏览器的前进后退

 

使用BOM对象可以实现：

弹出新的浏览器窗口

移动，关闭浏览器窗口及调整窗口大小

在浏览器窗口实现页面前进、后退功能

window对象：

常用属性：

hostory:有关客服访问过的URL

location：有关当前URL信息

screen：只读属性。包含有关客户端显示屏幕的信息

window.属性名=“属性值”         window.location="****"

常用方法：window.方法名

prompt：显示可以提示用户输入的对话框。单击取消，返回null，单击确定，返回输入字符串

confirm：只显示一个带有提示的信息，“确定”--返回true和“取消”--返回false 按钮。与if - else搭配

close：关闭浏览器窗口

open：打开一个新的浏览器窗口，加载指定URL--------- window.open("弹出窗口的URL","窗口名称","窗口特征")-----浏览器兼容性

setTimeout()：在指定的毫秒数后调用函数或者计算表达式

setInterval()：按照指定的周期（毫秒）来调用函数或表达式

 

history对象和location对象

history对象：

提供用户最近浏览过的URL列表，通过history对象提供的各种方法访问：

back()：加载history对象列表中的前一个URL，history.back() 等于浏览器的后退按钮

forward()：加载history对象列表中的后一个URL，history.back() 等于浏览器的前进按钮

go()：加载history对象列表中的某个具体URL，go(n)，n是一个具体数字，n>0时，装入历史列表往前数第n个页面，n=0，装入当前页面，n<0，装入历史列表往后数的第n个页面。。history.go(1)：前进一页，等价于forward方法。history.go(-1)：后退一页，等价于back()方法。

<a href="javascript:history.back()">返回</a>

location对象：

loacation对象提供当前页的信息，可以重新装载当前页面，或者装入新页面

属性：

host：设置或返回主机当前URL端口号

hostname：设置或返回当前URL主机名

href：设置或者返回完整的URL

<a href="javascript:location.href='flower.html'">查看鲜花</a>------这里可是省略href，直接使用location="url"实现

方法：

reload()：重新加载当前文档

replace()：用新的文档替换当前文档

 

document对象的常用属性：

referrer：返回载入当前文档的URL   document.referrer---当前文档如果不是通过超链接访问的，则返回null

浏览某个页面时，由于不是由指定页面进入的，因此系统提醒不能浏览本页面或者直接跳转至其他页面

例：

中奖页面写法

    <script type="text/javascript">
        var preURL = document.referrer;//载入本页面文档的地址
        if(preURL==""){   //如果不是通过超链接访问的，返回空
            document.write("<h2>您不是从中奖页面进入，5秒后自动跳转到登陆页面</h2>")
            setTimeout("location.href='login.html',5000");//使用setTimout延迟五秒后自动跳转
        }else{
            document.write("<h2>大奖赶快拿，笔记本数码相机</h2>")
        }
    </script>

URL：返回当前文档的URL               document.URL

 

document对象的常用方法：

getElementById()     返回对拥有指定id的第一个对象的引用。一般用于访问DIV，图片，表单元素，网页标签等，要求id唯一

getElementByName()  返回带有指定名称的对象的集合，访问具有name属性的元素，name可能不唯一，所以用于访问一组 相同name属性的元素，如：单选按钮，复选框

getEelementByTagName()  返回带有指定标签名的对象的集合。用来访问页面元素，一半访问一组相同的元素，如：一组<input>，一组图片

write()  向文档写文本，HTML表达式或JavaScript代码