JavaScript操作BOM对象_js 操作bom对象-CSDN博客

本文链接：https://blog.csdn.net/yananye/article/details/112793841

本文详细介绍了JavaScript中的浏览器对象模型（BOM），包括window对象、history对象与location对象、document对象的使用，以及javascript内置对象如Date、Array、String和Math。还讲解了常用的定时函数setTimeout()和setInterval()，并提供了多个示例来展示如何在实际工作中应用这些概念。

摘要由CSDN通过智能技术生成

window对象

浏览器对象模型(BOM)是javascript的组成成员之一，他提供了独立于内容与浏览器窗口进行交互。他的作用是将相关的元素包装起来，提供给程序设计人员使用，提高设计Web页面的能力。BOM是一个分层结构
在这里插入图片描述
window对象是整个BOM的核心，在浏览器打开网页后，首先看到的时浏览器窗口，即document(文档)。它的内容包括一些超链接(link),表单(form),锚(anchor)等，表单由文本框(text)，单选按钮(radio)，按钮(button)等表单元素组成。在浏览器结构中，除了document对象外，window对象之下还有两个对象：地对象(location)和历史对象(history)，他们对应于浏览器地址栏和前进/后退按钮可以利用这些方法，实现类似的功能。使用BOM通常可实现如下功能。

弹出新的浏览器窗口。
移动，关闭浏览器窗口的大小。
在浏览器窗口中实现页面的前进，后退功能。

window对象常用属性

名称	说明
history	有关客户访问过的URL信息
location	有关当前URL信息
screen	只读属性，包含有关客户端显示屏幕的的信息

在javascript中，属性的语法格式如下

window.属性名="属性值";

例如:

window.location="http://www.baidu.com";

表示跳转到百度页面；screen.height返回显示浏览器屏幕的高度，单位为像素。

window对象常用的方法
在这里插入图片描述
在javascript中，方法的使用格式如下

window.方法名();

window对象是全局对象，所以在使用window对象的属性和方法时；window可以省略，例如alert()，相当于写成window.alert();
confirm()
confirm()将弹出一个确认对话框，语法格式如下：

window.confirm("对话框中显示的文本");

在confirm()弹出的确认对话框中，有一条提示信息，一个“确定”按钮和一个“取消”按钮。如果用户单击“确定”按钮，则confirm()返回true；如果单击“取消”按钮，则返回false。在用户单击确定和取消按钮将对话框关闭之前，它将阻止用户对浏览器的所有操作。如示例所示：

<script>
    var flag=confirm("确认要删除此信息吗");
    if(flag==true){
   
        alert("删除成功")
    }else{
   
        alert("删除失败")
    }

prompt()方法和alert()方法于confirm()方法比较：虽然他们都是在页面上弹出对话框，但作用不相同

alert()只有一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生出任何改变。
prompt()有两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消”按钮或关闭对话框都返回null，单击“确定”按钮则返回用数输入的值，常用于收集用户关于特定问题而反馈的信息。
confirm()只有一个参数，是确认对话框，显示提示对话框的消息，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if——else语句搭配使用。

close()
用于关闭浏览器窗口语法格式如下:

window.close();

open()
在页面上弹出一个新的游览器窗口语法格式如下:

window.open("弹出窗口的URL"，"窗口名称","窗口特征");

窗口特征属性如下表
在这里插入图片描述
open()方法通常用于在打开一个网页弹出广告页面或网站信息声明页面等。
在上表中有的窗口特征属性已经没有作用，随着时间推移有的已经被淘汰。

history对象与location对象

history对象
history对象提供用户最近浏览过的URL列表。但出于隐私原因，history对象不在允许脚本访问已经访问过的实际URL，可以使用history对象提供的，逐个返回访问过的页面的方法，如表所示：
在这里插入图片描述
location对象
location对象提供当前页面的URL信息，并且可以重新加载当前页面或装入新的页面。
loaction对象的属性和方法

location对象常用的属性是href，通过对此属性设置不同的网址，从而达到跳转功能。
示例：
main.html页面

<head lang="en">
    <meta charset="UTF-8">
    <title>主页面</title>
</head>
<body>
<img src="img/folw.jpg" alt="鲜花"><br/>
<a href="javascript:location.href='shili3flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页