发表更新web / javascript6 分钟读完 (大约887个字)

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内置对象

相关文章

javascript 内置对象

https://pengtech.net/javascript/js-builtin-object.html

作者

鹏叔

发布于

2021-11-02

更新于

2024-07-10

许可协议

#
评论

热门文章

最新文章

follow.it

分类

热门文章

×