JS BOM对象
程序员文章站
2022-03-19 15:00:52
...
什么事BOM对象？
Browserr Object Model:浏览器对象模型。通过JS访问浏览器的一个接口，也是ECMAScript规定的Global对象。其目的是访问浏览器。主要包括以下几种：window,navigator,screen,history,location,document,event
全局变量与全局函数？
全局变量：var age=15; 等价于 window.age=15
全局函数： window.函数名=function( ){}
调用：window.函数名（） 等价于 function 函数名( ){ }
所有的全局变量和全局函数都在window对象上
1 window对象
<1>对话框方法：
window.alert("content") 显示内容和一个确认按钮的警告框window.confirm("message") 显示信息和ok,取消两个按钮的对话框，点击ok,返回true,点击取消，返回false例如：获取信息，若获取到将其隐藏
var btn=document.getElementById("btn");
btn.onclick=function(){
var result=window.confirm("message");
if(result)
document.getElementById("box").style.display="none";
}window.prompt("text,defaultText")
用户可以进行输入的对话框
在对话框中显示纯文本，defaultText是默认的文本。
点击确认，返回输入字段当前显示的文本
点击取消，返回null<2> 窗口的关闭与打开方法
window.open(pageurl,name,parameters)
打开新的浏览器窗口或者是已经命名的窗口
pageurl: 子窗口的路径
name:子窗口的名称
parameters: 子窗口的参数（width,height,left,各参数之间用逗号隔开）<body>
<script>
window.onload=function(){
window.open("路径","新名字"，"参数")；
}
</script>
</body>window.close() 关闭浏览器的窗口例如：关闭浏览器窗口
<input type="button" value="退出" id="quit">
<script>
var quit=document.getElementById("quit");
quit.onclick=function(){
window.close();
}
</script><3> 定时器方法
超时调用
setTimeout(code,millisec)
经过指定毫秒数后执行调用函数或计算表达式
code:要调用的函数或者是JS代码
millisec:执行代码前要等待的毫秒数
该方法只执行一次，如需多次调用，可以让code调用自身即可
该方法返回一个ID值，可以通过这个ID值返回超时调用例如：
<script>
window.setTimeout("alert(hello)",1000);
//警告框hello延时1秒出现
</script>清除超时调用
clearTimeout(id-of-setTimeout)
取消使用超时调用方法返回的值
id-of-setTimeout:返回的ID值。标识要取消的延迟代码执行块例如：
var timeout1=setTimeout();
clearTimeout(timeout1);间歇超时调用
setInterval(code,millisec)
每隔指定时间执行代码块
millisec:时间间隔清除调用
clearsetInterval(id-of-setInterval)实例应用：
<script>
var number=1,max=10,timer=null;
var timer=setInterval(function(){
number++;
if(number>max)
clearInterval(timer);
console.log(number);
},1000)
</script><script>
var number=1,max=10,timer=null;
function incree(){
conlose.log(number);
number++;
var timer=setTimerout(incree,1000);
if(timer<=max)
{
setTimeout(incree,1000);
}
else{
cleraTimeout("timer");
}
}
</script>2.location对象
<1> 提供与当前窗口加载的文档有关的信息，也可以提供导航功能，既是document对象的属性，也是window对象的属性
location.href
返回当前加载页面的完整url
与window.location.href等价location.hash
返回url中的hash(#后跟的0个或多个字符)，不包含返回空字符串
可以获取，也可以设置
<div class="box1" id="top"></div>
<script>
var btn=document.getElementById("top");
btn.onclick=function(){
location.hash="#top"; //找到id="top"的位置并且页面跳转到该位置
}
</script>location.host 服务器名称和端口号
location.hostname 返回不带端口号的服务器名称
location.pathname 返回url的文件名或路径
location.port url中指定的端口号，没有则返回空
location.protocol 页面使用的协议
location.search url查询字符串，该字符串一？开头，没有则返回null<2> 位置操作
location.href 跳转到某个页面
如：
location.href="index1.html" // 跳转到index1.html这个页面上，相当于 window.location="index1.html";
跳转到某个页面上，我们的浏览器会出现相应的浏览记录。location.replace(url) 重新定向url,不会在浏览记录中出现历史纪录，即点击返回按钮，页面不会跳转回到上一次的页面location.reload() 重新加载当前显示的页面，有参数，从缓存中加载，无参数，从服务器加载
习惯上将这种操作放在所有代码的最后面
如：
<body>
<input type="button" id="reload" value="刷新">
<script>
document.getElementById("reload").onclick=function(){
location.reload();
}
</script>
</body>3 history对象
功能：保存用户的上网记录
<1>
history.back() //返回到上一布
等价于history.go(-1)
如：
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
history.back();
}
</script><2>
history.forward() //跳转到下一个页面
等价于 history.go(1)<3>history.go(-n) 返回到前n步
<4>history.go(n) 返回到后n步
4. screen对象
功能：客户端显示屏幕的各种信息
<1>
screen.availWidth //返回屏幕的宽度 window.innerWidth //返回窗口的宽度<2>
screen.availHeight //返回屏幕的高度
window.innerHeight //返回窗口的高度5. navigator对象
功能：用户浏览器及操作系统的信息
userAgent ， //识别浏览器的名称，版本，引擎以及操作系统等信息的内容
<script>
var explorer=navigator.userAgent;
</script>下一篇： 七、Pandas—— Plot 画图