javascript 内置对象

1. BOM对象概述

BOM:浏览器对象模型(Browser Object Model)
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构.

graph TD;
    A[Window]-->B[history];
    A-->C[document];
    A-->D[location];
    C-->C1[link];
    C-->C2[form];
    C-->C3[anchor];
    C2-->D1[button];
    C2-->D2[checkbox];
    C2-->D3[text];
    C2-->D7[...];
    C2-->D4[textarea];
    C2-->D5[radio];
    C2-->D6[select];

BOM可实现功能:

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口的大小
  • 页面的前进、后退

2. window对象下的主要对象

属性名称说明
location有关客户访问过的历史信息
history有关当前url的信息
语法
1
window.属性名 = "属性值"

举例说明 :
页面定义一个按钮,点击按钮跳转至百度
代码 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
function goBaidu(){
window.location = "https://www.baidu.com";
}
</script>
</head>
<body>
<button onclick="goBaidu();">点我跳转至百度</button>
</body>
</html>

2.1. history对象 主要管理浏览记录

  • 常用方法
    名称说明
    back()加载history对象列表中的前一个URL
    forward()加载history对象列表中的下一个URL
    go()加载history对象列表中的某个具体URL

history.back() 等价于 history.go(-1)
history.forward() 等价于 history.go(1)

2.2. location对象 主要管理页面跳转

  • 常用属性

    名称说明
    host设置或返回主机名和当前URL的端口号
    hostname设置或返回当前URL的主机名
    href设置或返回完整的URL
  • 常用方法

    名称说明
    reload()重新加载当前文档
    replace()用新的文档替换当前文档

3. window对象的常用方法

方法名称说明
prompt()显示可提示用户输入的对话框
alert()显示带有一个提示信息和一个确定按钮的警示框
confirm()显示一个带有提示信息,确定和取消的对话框
close()关闭浏览器
open()打开一个新的浏览器,加载给定URl所指定的文档
语法:
1
2
3
4
5
6
7

confirm(“对话框中显示的纯文本”)
confirm()与alert ()、 prompt()区别:
alert( ):一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
prompt( ):两个参数,输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息
confirm( ):一个参数,确认对话框,显示提示对话框的消息、“确定”按钮和“取消”按钮,单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用

举例说明 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
var con = window.confirm("确定要删除这条数据么?");
if(con == true){
alert("删除成功!");
}else{
alert("你取消了删除!");
}
</script>
</head>
<body>
</body>
</html>

4. document对象概述

document 对象 : 主要管理页面中的各种元素的
JS把页面所有的标签都看成对象,而document对象包含的就是标签之间的一些标签,通过document对象可以获取他们并进行操作;
它的常用方法有:
| 方法名称 | 说明 |
| —- | —- |
| getElementById() | 返回指定id的对象引用 |
| getElementsByName() | 返回指定名称的对象集合 |
| getElementsByTagName() | 返回指定标签的对象集合 |
| write() | 向文档写文本,html表达式 或javascript代码 |

5. 参考文档

JavaScript内置对象