JavaScript中的BOM操作

JavaScript中的BOM操作

Bom:浏览器对象模型(Browser Object Model,简称 BOM)提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作

一、Window 对象

(1)window.open()
定义和用法
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
语法
window.open(URL,name,specs,replace) [默认填写url,name这两个参数值即可]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOM操作</title>     
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            oBtn.onclick=function(){
                window.open('http://baidu.com','_blank')   
                //参数一:url地址
                //参数二:同a标签里面的target属性;有四个可选值:_blank(新窗口,默认) _self(当前窗口) _parent  _top
                //一般用window.open()参数填写两个即可
            }
        }
    </script>
</head>
<body>
    <input type="button" value="click" id="btn">
</html>

(2)window.close()
定义和用法
close() 方法用于关闭浏览器窗口。
语法
window.close()
说明
方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。
在火狐浏览器中,只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。
(3)window.navigator.userAgent
定义:
获取当前浏览器版本
(4)window.location
定义:
获取当前页面的地址/网址
用法:
不光可以读、还可以写   例如:window.location=‘http://baidu.com’ 即可转到指定页面
(5)document.documentElement.scrollTop(获取滚动条位置)
【通俗来讲就是:获取当前页面的滚动条纵坐标位置】

(6)系统对话框
1》警告框:alert(‘内容’)       【没有返回值】
2》选择框:confirm(‘提问的内容’)  【确认:返回true;取消:返回false】
3》输入框:prompt()        【确认:返回输入的内容;取消:返回null】

二、Document 对象

注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写
否则会提示你一个错误信息 “引用的元素为空或者不是对象\\”
———————————————————————
对象属性
document.title //设置文档标题等价于HTML的title标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期,只读属性
document.fileModifiedDate //文件修改日期,只读属性
document.fileSize //文件大小,只读属性
document.cookie //设置和读出cookie
document.charset //设置字符集 简体中文:gb2312
document.domain //直接获取域名
———————————————————————
常用对象方法
document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)
———————————————————————
body-主体子对象
document.body //指定文档主体的开始和结束等价于body>/body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片
document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件
document.body.οnclick=”func()” //鼠标指针单击对象是触发
document.body.οnmοuseοver=”func()” //鼠标指针移到对象时触发
document.body.οnmοuseοut=”func()” //鼠标指针移出对象时触发
——————————————————————
location-位置子对象
document.location.hash // #号后的部分
document.location.host // 域名+端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
documeny.location.reload() //刷新网页
document.location.reload(URL) //打开新的网页
document.location.assign(URL) //打开新的网页
document.location.replace(URL) //打开新的网页
———————————————————————
selection-选区子对象
document.selection
———————————————————————
images集合(页面中的图象)
a)通过集合引用

document.images //对应页面上的img标签
document.images.length //对应页面上img标签的个数
document.images[0] //第1个img标签
document.images[i] //第i-1个img标签

b)通过nane属性直接引用

img name=”oImage”
document.images.oImage //document.images.name属性

c)引用图片的src属性

document.images.oImage.src //document.images.name属性.src

d)创建一个图象

var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同时在页面上建立一个img /标签与之对应就可以显示

———————————————————————-
forms集合(页面中的表单)
a)通过集合引用

document.forms //对应页面上的form标签
document.forms.length //对应页面上/formform标签的个数
document.forms[0] //第1个/formform标签
document.forms[i] //第i-1个/formform标签
document.forms[i].length //第i-1个/formform中的控件数
document.forms[i].elements[j] //第i-1个/formform中第j-1个控件

b)通过标签name属性直接引用

/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表单名.控件名

c)访问表单的属性

document.forms[i].name //对应form name>属性
document.forms[i].action //对应/formform action>属性
document.forms[i].encoding //对应/formform enctype>属性
document.forms[i].target //对应/formform target>属性
document.forms[i].appendChild(oTag) //动态插入一个控件
document.all.oDiv //引用图层oDiv
document.all.oDiv.style.display=” //图层设置为可视
document.all.oDiv.style.display=”none” //图层设置为隐藏
document.getElementId(”oDiv”) //通过getElementId引用对象
document.getElementId(”oDiv”).style=”
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有对象的集合
只有ie支持此属性,因此也用来判断浏览器的种类*/

图层对象的4个属性

document.getElementById(”ID”).innerText //动态输出文本
document.getElementById(”ID”).innerHTML //动态输出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML

三、History 对象

在这里插入图片描述
history.back() 等同于按浏览器的后退按钮
history.forward() 等同于按浏览器的前进按钮
history.current 指当前的url(等同于location.href),在历史中的索引位置总为 0
history.go(-2)或 history.go(“任意.html”) 向前或向后移动,或查找字符串标明的最新url

四、Loaction 对象

location提供了关于当前打开窗口或者特定框架的url信息。一个多框架的窗口对象在location属性显示的是父窗口的URL,每个框架也有一个与之相伴的location对象。
Location.href 返回整个当前url,若对其赋值:location.href=“http://www.baidu.com” 则跳转其url
location.host 返回域名和端口号,如:www.baidu.com:80
lcation.hostname 返回域名
location.port 返回端口
location.pathname 返回域名后第一个斜框后的字符串
location.hash 跳到本页的某个锚
location.search 取url?后的部分
location.protocal协议
  hash属性:
  hash标注是一个url很好的习惯用法,它指定浏览器到一个位于文档中的anchor位置,相当于一个书签儿。
  host属性:
  描述渔歌url的主机名和端口,只有端口号是url的一个明确部分时,值中才包括端口号。
  hostname属性:
  一个典型的url的主机名是网络上服务器的名字,该网络存储有你的浏览器上可以查看的文档。对大多数Web站点来说,服务器名不仅包括域名,也包括www前缀,如果端口号是在url中特有的话,主机名并不包括,而是包括在host属性中。
  href属性:
  该属性提供一个指定窗口对象的整个url的字符串。
  pathname属性:
  url的路径名部分由与服务器root(根)卷相关的目录结构组成。根不是目录的一部分,如果url的路径是通向根目录中的一个文件,那么location.pathname属性就是(/)。
  port属性:
  端口号很少用到。当指向一个没有赋给域名的的站点的url中,可以用location.port属性获取该值,如果从一个url获取值并想用那个组建创建一个url,一定要包括服务器IP地址和段口号,IP地址和段口号之间用(:)分界。
  protocol属性:
  包括协议名,且后面紧跟着(:)分节目。
  assign方法:
  assign(“url”)通过这个方法可以实现把一个新的url赋给location对象。当然你也可以采用直接赋值的方法来实现,或者location.href来导航到一个新的网页。采用assign的方法会使代码易维护。
  reload方法:
  这个方法可以把浏览器可能保存在内存中的元素(在一段记录中)的文档设置全部忽略掉,重新打开该文档,和浏览器上的刷新可不一样。它的效果好像是你选择了file菜单open file一样。当然如果你不想这样,不想这么做,有一个和这个方法比较类似的方法,就是history.go()方法。
  replace方法:
  当用户从当前网页,跳转到别的网页,有时候是不是想让不能用后退按钮(Back)看到前一个网页,告诉你一个方法,就是采用location.replace(“url”)就可以实现这个功能。
reload方法/replace方法的说明
replace()方法在效果上与直接将新URL地址赋值给location.href属性基本一致,但是使用replace()方法后,我们无法通过浏览器的“返回”按钮来回到上一页。
reload()方法和浏览器的“刷新”功能也有所区别,reload()方法仅仅是重新加载本地的缓存,而不会向服务器重新发出请求,这点还没有严格的测试过,不过应该在包含有表单的页面中特别注意。

  • 0
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梳碧湖-砍柴人

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值