JavaScript 学习总结（2） --- 操作BOM对象

最新推荐文章于 2021-04-20 11:06:15 发布

送小孩喝稠酒

最新推荐文章于 2021-04-20 11:06:15 发布

阅读量163

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_44823091/article/details/94635575

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JavaScript — 操作BOM对象

JavaScript的出现就是为了能在浏览器中运行，所以，浏览器自然是JavaScript开发者必须要关注的。

1. BOM模型：

BOM（Browser Object Model）：浏览器对象模型。

BOM提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。
BOM的对象：
BOM可实现的功能：
- 弹出新的浏览器窗口
- 移动，关闭浏览器窗口以及调整窗口的大小
- 页面的前进、后退

2. BOM对象：

2.1 window对象：

window对象是整个BOM的核心。window对象不但充当全局作用域，而且表示浏览器窗口。

window对象的常用属性：

属性名称说明
history 有关客户访问过的URL的信息
location 有关当前URL的信息

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前URL的信息

语法：

window.属性名=“属性值”;
window.location="https://www.baidu.com";`表示跳转到百度首页

所有自定义的函数都属于window：

<script>
   // //所有自定义的函数都属于window.
    function alerts() {
          console.log("自定义的函数都的属于window")
    }
    window.alerts();
</script>

在这里插入图片描述

window对象的常用方法：

方法名称	说明
prompt()	显示可提示用户输入的对话框
alert()	显示带有一个提示信息和一个确定按钮的警示框
confirm()	显示一个带有提示信息、确定或取消按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（以毫秒计）来调用函数或表达式

alert()方法：

显示带有一个提示信息和一个确定按钮的警示框。
```
window.alert("你好");
```
prompt()方法：

显示可提示用户输入的对话框。
```
window.prompt("请输入一个数","");
```

confirm()方法:

弹出一个带有提示信息、确定或取消按钮的对话框。

<script>
    var flag = confirm("你真的要退出吗?");
    if (flag){
        document.write("已退出")
    }
</script>

在这里插入图片描述

confirm()与alert()、prompt()的区别：

alert()：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。

prompt()：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息。

confirm()：一个参数，确定对话框，显示提示对话框的消息，“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用。

open()方法：

打开一个新的浏览器窗口，加载给定URL所指定的文档，用于打开一个新窗口，用于网站公告，系统升级等提示。格式为：

window.open("弹出窗口的url",“窗口名称”,"窗口特征")；

特征属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计算
left、top	窗口的x坐标、y坐标。以像素计算
toolbar=yes\|no \|1\|0	是否显示浏览器的工具栏，默认yes
scrollbars=yes\|no \|1\|0	是否显示滚动条。默认是yes
location=yes\|no \|1\|0	是否显示地址地段，默认yes
status=yes\|no \|1\|0	是否添加状态栏，默认yes
menubar=yes\|no \|1\|0	是否显示菜单栏，默认yes
resizable=yes\|no \|1\|0	窗口是否可调节尺寸，默认yes
titlebar=yes\|no \|1\|0	是否显示标题栏，默认yes
fullscreen=yes\|no \|1\|0	是否使用全屏模式显示浏览器，默认no。处于全屏模式的窗口必须同时处于剧院模式

<body>
<script>
    function openWindow() {       					    		        window.open("https://www.baidu.com","_blank","top=100,left=100,width=100,height=100,menubar=yes,scrollbars=no,toolbar=yes,status=yes");   	
    }
</script>
<button onclick="openWindow();"> 点击打开新窗口</button>
</body>

在这里插入图片描述

2.2 history对象：

window.history指向history对象，她表示当前窗口的浏览历史，history对象保存了当前窗口访问过的所有页面网址等。

history对象的常用方法：

名称	说明
back()	加载history对象列表中的前一个URL，浏览器中的“前进”
forward()	加载history对象列表中的后一个URL，浏览器中的“后退”
go()	加载history对象列表中的某个具体的URL，-1前一个网址，0当前网址，1后一个网址

history.back() ;    等价于   history.go(-1);
history.forward();  等价于   history.go(1);
history.go(0);   //刷新当前页面

2.3 location对象：

location地址对象，表示某个窗口对象所打开的地址，

location对象的常用属性：

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL
protocol	返回地址的协议
pathname	返回路径名，域名后第一个斜框后的字符串
port	返回地址的端口号

如："http://www.microsoft.com/china/"的地址，

location.protocol=='http:'
location.hostname=='www.microsoft.com'
location.port=='80'     //http的端口号是80
location.pathname=='china/'

location对象的常用方法：

名称	说明
reload()	重新加载当前文档，相当于浏览器的“刷新”
replace()	用新的文档替换当前文档，即打开一个URL，并取代历史对象中当前位置的地址。用这个方法打开一个URL后，按下浏览器的“后退”事，不能返回到刚才的页面

2.4 Document对象：

document对象表示当前页面，HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

documnet对象是文档的根节点，window.document属性就指向这个对象。也就是说，只要浏览器开始载入HTML文档，这个对象就开始存在了，可以直接调用。

document对象的常用属性：

属性名称	说明
referrer	返回载入当前文档的URL	document.referrer
URL	返回当前文档的URL	document.URL
title	设置文档标题，等价于HTML的标签	document.title

案例：判断页面是否链接进入，自动跳转到登录页面

 <script>
    var preUrl=document.referrer;
    if(preUrl==""){
        document.write("您不是从登录页面进入，5秒后将自动跳转到登录页面");
        setTimeout("javascript:location.href='login.html'",5000);
    }
</script>

document对象的常用方法：

方法名称	功能	说明
getElementByld()	返回对拥有指定id的第一个对象的引用	对象的id唯一
getElementByName()	返回带有指定名称的对象的集合	相同name属性
getElementByTagName()	返回带有指定标签名的对象的集合	相同的元素
write()	向文档写文本、HTML表达式或JavaScript代码

要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Name获取指定元素，修改其值。（重点掌握）

document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function show1() {
            document.getElementById("a").innerText="恭喜！中奖";
        }

        function hidden1() {
            document.getElementById("a").innerHTML = "<h5> 遗憾！未中奖 </h5>"
        }
    </script>
</head>
<body>

<div id="a"></div>
<input type="button" onclick="show1()" value="显示1" >
<input type="button" onclick="hidden1()" value="显示2">

</body>

2.5 Date对象：

Date对象用于处理日期和时间。

语法：创建一个Date对象 var date = new Date();

其初始值为当前的日期和时间。

Date对象的常用方法：

方法	说明
Date()	返回当时的日期和时间
getDate()	返回Date对象的一个月中的某一天，其值介于1~31之间
getDay()	返回Date对象的星期中的某一天，其值介于0-6之间
getMonth()	返回Date对象的月份，其值介于0-11之间
getHours()	返回Date对象的小时数，其值介于0-23之间
getMinutes()	返回Date对象的分钟数，其值介于0-59之间
getSecongs()	返回Date对象的秒数，其值介于0-59之间
getFullYear()	返回Date对象的年份，其值为4位数
getTime()	返回自计算机元年（1970年1月1日）至今的毫秒数

案例：使用Date对象的方法显示当前时间的小时、分钟和秒数

<body>
<script>
    function disptime() {
        var today = new Date();
        var y = today.getFullYear();
        var mon = today.getMonth();
        var d = today.getDate();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        document.getElementById("myclock").innerHTML="现在的时间是："+y+"-"+(mon+1)+"-"+d+"  "+h+":"+m+":"+s;
    }
</script>
<input type="button" onclick="disptime()" value="此时的时间">
<div id="myclock"></div>
</body>

在这里插入图片描述

定时函数：
- setTimeout()：语法：setTimeout("调用的函数"，等待的毫秒数)；
  
  var myTime = setTimeout("disptime()",1000);，1秒之后执行disptime函数一次。
- setInterval()：语法：setInterval("调用的函数"，间隔的毫秒数)；
  
  var myTime = setInterval("diaptime()",1000);，每隔1秒执行disptime函数一次，可用作定时器。
清除函数：
- clearTimeout()：语法：clearTimeout(setTimeout()返回的ID值)；
- clearInterval()：语法：clearInterval(setInterval()返回的ID值)；
```
var myTime = setInterval("disptime()",1000);
clearInterval(myTime);
```

定时器的设计：

<body>
<div> 计时器 </div>
<div id="time"> </div>
<input type="button" value="start" onclick="startTime()">
<input type="button" value="stop" onclick="stopTime()">

<script>
    var myTime;
    function clock() {
        //<!--获得一个时间-->
        var now = new Date();
        console.log(now);

        var hh =  now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();

        document.getElementById("time").innerHTML ="现在时间为:" + hh + ":" + mm + ":" + ss;
    }

    function startTime() {
        myTime = setInterval("clock()",1000);
    }
    
    function stopTime() {
        clearInterval(myTime);
    }      
</script>
</body>

在这里插入图片描述

2.6 Math对象：

Math对象提供一些数学计算。

注意：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。因此无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math对象的属性：

属性	说明
E	返回算数常量e，即自然对数的底数（约等于2.718）
LN2	返回2的自然对数lg2，（约等于0.693）
LN10	返回10 的自然对数lg10，（约等于2.302）
LOG2E	返回以2为底的e的对数，（约等于1.414）
LOG10E	返回以10为底的e的对数（约等于0.434）
PI	返回圆周率π
SQRT1_2	返回2的平方根的倒数（约等于0.707）
SQRT2	返回2的平方根（约等于1.414）

Math对象的常用方法：

方法	说明	示例
ceil()	对数进行向上舍入	Math.ceil(13.2); 返回14
floor()	对数进行向下舍入	Math.floor(13.8); 返回13
round()	四舍五入	Math.round(13.2); 返回13
random()	返回0~1之间的随机数	Math.random(); 返回0.323

Math对象的常用方法：

方法	说明	示例
ceil()	对数进行向上舍入	Math.ceil(13.2); 返回14
floor()	对数进行向下舍入	Math.floor(13.8); 返回13
round()	四舍五入	Math.round(13.2); 返回13
random()	返回0~1之间的随机数	Math.random(); 返回0.323

送小孩喝稠酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习总结（2） --- 操作BOM对象

JavaScript — 操作BOM对象JavaScript的出现就是为了能在浏览器中运行，所以，浏览器自然是JavaScript开发者必须要关注的。1. BOM模型：BOM(Browser Object Model)：浏览器对象模型。BOM提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。BOM的对象：BOM可实现的功能：弹出新的浏览器窗口移动，关闭浏...
复制链接

扫一扫