主页
  • 主页
  • 分类
  • 热文
  • 教程
  • 面试
  • 标签
JavaScript

JavaScript 基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

JavaScript 操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

JavaScript 控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

JavaScript 函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

JavaScript 对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

JavaScript 面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

JavaScript Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

JavaScript 事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

JavaScript 杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

JavaScript 浏览器对象模型(BOM)


上一章 下一章

JavaScript 中的浏览器对象模型(BOM)指的是浏览器提供的对象,以便与它们进行交互。通过使用这些对象,你可以操控浏览器的功能。例如,你可以获取浏览器的历史记录和窗口大小,导航到不同的 URL 等等。

浏览器对象模型并不是标准化的,它的实现依赖于你所使用的浏览器。

下面列出了浏览器对象模型的所有对象及其描述:

  • Window - window 对象代表当前浏览器窗口。你可以用它来操控浏览器窗口。
  • Document - document 对象代表当前在浏览器窗口中打开的网页。你可以用它来自定义文档属性。
  • Screen - 它提供了关于用户设备屏幕的信息。
  • History - 它提供了浏览器会话的历史记录。
  • Navigator - 它用来获取浏览器信息,如默认语言等。
  • Location - Location 对象用来获取 URL 信息,例如当前网页的主机名。
  • Console - console 对象允许开发者访问浏览器的控制台。

JavaScript Window 对象

JavaScript window 对象代表浏览器窗口。我们可以使用 window 对象的不同方法和属性来操控当前浏览器窗口。例如,显示警告框、打开新窗口、关闭当前窗口等等。

所有的 JavaScript 全局变量都是 window 对象的属性。所有全局函数都是 window 对象的方法。

上述列出的其他对象如 document、screen、history 等等,都是 window 对象的属性。我们可以将这些对象作为 window 对象的属性来访问。我们也可以不引用 window 对象来访问它们。看下面的例子来访问 document 对象:

window.document.write("欢迎来到教程点");

或者不使用 window 对象:

document.write("欢迎来到教程点");

window 对象的 innerHeight 和 innerWidth 属性用来获取浏览器窗口的高度和宽度。我们将在后面的章节中详细学习 JavaScript window 对象。

JavaScript Document 对象

document 对象是 JavaScript window 对象的一个属性。整个 HTML 文档被表示为一个 document 对象。document 对象构成了 HTML DOM 的基础。它是 HTML 文档的根节点。

document 对象可以被表示为 window.document 或者简单的 document。

document 对象为我们提供了许多属性和方法来访问 HTML 元素并操控它们。一个这样的方法是 document.getElementById(),用于通过其 ID 来访问 HTML 元素。

我们可以使用 getElementById() 方法访问具有某个 ID 的元素并操控它:

示例

<html>
<body>
   <div id="text">这段文字将会改变。</div>
   <script>
      // 通过 ID 访问元素
      const textDiv = document.getElementById("text");
      // 改变这个元素的内容
      textDiv.innerHTML = "这个 DIV 的文本已更改。";
   
</script>
</body>
</html>

输出:

这个 DIV 的文本已更改。

JavaScript Screen 对象

在 JavaScript 中,screen 对象是 window 对象的一个属性。它提供了一些可以用来获取设备屏幕信息的属性。我们可以将 screen 对象表示为 window.screen 或者简单的 screen。

为了以像素为单位获取设备屏幕的宽度和高度,我们可以使用 screen.width 和 screen.height 属性:

示例

<html>
<body>
<div id="width">设备屏幕的宽度是</div>
<div id="height">设备屏幕的高度是</div>
<script>
   document.getElementById("width").innerHTML += screen.width + " px.";
   document.getElementById("height").innerHTML += screen.height + " px.";
</script>
<p>上述结果对于不同的设备可能会有所不同。</p>
</body>
</html>

输出:

设备屏幕的宽度是 1536 px.
设备屏幕的高度是 864 px.
上述结果对于不同的设备可能会有所不同。

JavaScript History 对象

在 JavaScript 中,history 对象也是 window 对象的一个属性。它包含当前会话中访问过的 URL 列表。history 对象提供了一个接口来操控浏览器的会话历史。

JavaScript history 对象可以通过 window.history 或者简单的 history 来访问。我们可以使用 history 对象的方法来导航历史列表中的 URL。例如,要导航到历史列表中的上一个页面/URL,我们可以使用 history.back() 方法。

JavaScript Navigator 对象

JavaScript navigator 对象也是 window 对象的一个属性。使用 navigator 对象,你可以获取浏览器版本和名称,并且检查浏览器是否启用了 Cookie。我们可以使用 window.navigator 来访问 navigator 对象。我们也可以不使用 window 前缀来访问它。

JavaScript Location 对象

JavaScript location 对象包含了各种属性和方法来获取和操控浏览器位置(即 URL)的信息。它也是 JavaScript window 对象的一个属性。

我们可以使用 location 对象的属性和方法来操控 URL 信息。例如,要从当前 URL 获取主机,我们可以使用 window.location.host 或者简单的 location.host。host 是 location 对象的一个属性。

示例

<html>
<body>
   <div id="output"></div>
   <script>
      document.getElementById("output").innerHTML = 
      "当前位置的主机是: " + location.host;
   
</script>
</body>
</html>

输出:

当前位置的主机是: www.tutorialspoint.com

JavaScript Console 对象

JavaScript console 对象允许我们访问浏览器的调试控制台。它是一个 JavaScript window 对象的属性。它可以使用 window.console 或者简单的 console 来访问。

console 对象为我们提供了不同的方法,例如 console.log()。console.log() 方法用于在调试控制台中显示消息。

上一章 下一章
阅读号二维码

关注阅读号

联系二维码

联系我们

© 2024 Yoagoa. All rights reserved.

粤ICP备18007391号

站点地图