JavaScript进阶知识(BOM)-快速入门篇

x33g5p2x  于2021-11-22 转载在 JavaScript  
字(4.8k)|赞(0)|评价(0)|浏览(346)

BOM

BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

1.Window:窗口对象

Window:窗口对象
    1. 创建
    2. 方法
         1. 与弹出框有关的方法:
            alert()	显示带有一段消息和一个确认按钮的警告框。
            confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮,则方法返回true
                * 如果用户点击取消按钮,则方法返回false
            prompt()	显示可提示用户输入的对话框。
                * 返回值:获取用户输入的值

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<img id="demo" src="images/d.png">
<script> //弹窗 alert("hello window") //弹窗带确认和取消 confirm("您确定要退出吗") //弹窗带输入框 let str = prompt("请输入用户名") //获取输入框内容并且弹出 alert(str) </script>
</body>
</html>

效果

与打开关闭有关的方法:
            close()	关闭浏览器窗口。
                * 谁调用我 ,我关谁
            open()	打开一个新的浏览器窗口
                * 返回新的Window对象

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<input id="open" type="button" value="打开百度">
<input id="close" type="button" value="关闭百度">
<script> //通过id获取按钮元素 let demo = document.getElementById("open") //定义新弹窗对象 var newWindow //绑定单击事件 demo.onclick=function (){ //单击事件对应的操作 newWindow=open("https://www.baidu.com/") } //通过id获取关闭按钮元素 let demo2 = document.getElementById("close") //绑定单击事件 demo2.onclick=function (){ //关闭新窗口 newWindow.close() } </script>
</body>
</html>

效果

与定时器有关的方式
            setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                * 参数:
                    1. js代码或者方法对象
                    2. 毫秒值
                * 返回值:唯一标识,用于取消定时器
            clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

            setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
            clearInterval()	取消由 setInterval() 设置的 timeout。

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<script> //一次性定时器 let id1=setTimeout("fun()",3000) //定义定时器对应函数 function fun(){ alert("boom~~") } //取消定时器 //clearTimeout(id1) //循环定时器 let id2=setInterval(fun,2000) //取消定时器 clearInterval(id2) </script>
</body>
</html>

效果

属性
        1. 获取其他BOM对象:
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document

注意

  • Window对象不需要创建可以直接使用 window使用。 window.方法名();
  • window引用可以省略。 方法名();

2.Location地址栏对象

1. 创建(获取):
		1. window.location
		2. location

	2. 方法:
		* reload()	重新加载当前文档。刷新
	3. 属性
		* href	设置或返回完整的 URL。

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="btn2" value="我的博客">
<script> //reload刷新页面 let btn = document.getElementById("btn") //给btn绑定单击事件 btn.onclick=function (){ //刷新页面 location.reload() } //获取href let href = location.href //弹出获取的内容 alert(href) //跳转 let btn2 = document.getElementById("btn2") //给btn2绑定单击事件 btn2.onclick=function (){ //跳转链接 location.href="https://blog.csdn.net/qq_50216270" } </script>
</body>
</html>

效果

自动跳转demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    //设置样式
    <style> //设置p标签样式 p{ text-align: center; } //设置span标签样式 span{ color: red; } </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后,自动跳转到首页。。。
    </p>
    <script> //设置倒计时秒数 var second=5 //设置倒计时函数 function showTime(){ //每次进入函数都将时间减1s second--; //当时间减完后自动跳转 if(second<=0){ location.href="https://www.baidu.com/" } //根据id获取span标签内容 let time=document.getElementById("time") //用innerHTML更改span内容 time.innerHTML=second+"" } //绑定循环函数,每1s调用一遍函数 setInterval(showTime,1000) </script>
</body>
</html>

3.History:历史记录对象

1. 创建(获取):
        1. window.history
        2. history

    2. 方法:
        * back()	加载 history 列表中的前一个 URL。
        * forward()	加载 history 列表中的下一个 URL。
        * go(参数)	加载 history 列表中的某个具体页面。
            * 参数:
                * 正数:前进几个历史记录
                * 负数:后退几个历史记录
    3. 属性:
        * length	返回当前窗口历史列表中的 URL 数量。

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <input type="button" id="btn" value="获取历史记录">
    <input type="button" id="forward" value="前进">
    <input type="button" id="back" value="后退">
    <script> //通过id获取按钮元素 let btn = document.getElementById("btn") //绑定单击事件的同时获取历史记录长度 let length=btn.onclick=history.length //弹出历史记录长度 alert(length) //根据id获取前进按钮元素 let forward = document.getElementById("forward") //绑定单击事件 forward.onclick=function (){ //调用前进函数 history.forward() //这里和go函数里面传参数1的用法是一样的 //==history.go(1) } //根据id获取back按钮元素 let back = document.getElementById("back") //绑定单击事件 back.onclick=function (){ //调用回退函数 history.back() //这里和go函数里面传参数-1的用法是一样的 //==history.go(-1) } </script>
</body>
</html>

效果

相关文章