浏览器环境,规格

JavaScript 语言最初是为 Web 浏览器创建的。此后,它已经发展成为一种具有多种用途和平台的语言。

平台可以是一个浏览器,一个 Web 服务器,或其他 主机(host),甚至是咖啡机。它们每个都提供了特定于平台的功能。JavaScript 规范将其称为 主机环境

主机环境提供了自己的对象和语言核心以外的函数。Web 浏览器提供了一种控制网页的方法。Node.JS 提供了服务器端功能,等等。

下面是 JavaScript 在浏览器中运行时的鸟瞰示意图:

有一个叫做 window 的“根”对象。它有两个角色:

  1. 首先,它是 JavaScript 代码的全局对象。
  2. 其次,它代表“浏览器窗口”,并提供了控制它的方法。

例如,在这里我们将它用作全局对象:

function sayHi() {
  alert("Hello");
}

// 全局函数是全局对象的方法:
window.sayHi();

在这里,我们将它用作浏览器窗口,以查看窗口高度:

alert(window.innerHeight); // 内部窗口高度

文档对象模型(DOM)

文档对象模型(Document Object Model),简称 DOM,

document 对象是页面的主要“入口点”。我们可以使用它来更改或创建页面上的任何内容。

例如:

// 将背景颜色修改为红色
document.body.style.background = "red";

在这里,我们使用了 document.body.style,但还有很多很多其他的东西。

浏览器对象模型(BOM)

浏览器对象模型(Browser Object Model),简称 BOM,表示由浏览器(主机环境)提供的用于处理文档(document)之外的所有内容的其他对象。

例如:

  • navigator 对象提供了有关浏览器和操作系统的背景信息。navigator 有许多属性,但是最广为人知的两个属性是:navigator.userAgent — 关于当前浏览器,navigator.platform — 关于平台(可以帮助区分 Windows/Linux/Mac 等)。
  • location 对象允许我们读取当前 URL,并且可以将浏览器重定向到新的 URL。

这是我们可以如何使用 location 对象的方法:

alert(location.href); // 显示当前 URL
if (confirm("Go to Wikipedia?")) {
  location.href = "https://wikipedia.org"; // 将浏览器重定向到另一个 URL
}

函数 alert/confirm/prompt 也是 BOM 的一部分:它们与文档(document)没有直接关系,但它代表了与用户通信的纯浏览器方法。

DOM 树

根据文档对象模型(DOM),每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签(children)”。标签内的文本也是一个对象。

所有这些对象都可以通过 JavaScript 来访问,我们可以使用它们来修改页面。

例如,document.body 是表示 <body> 标签的对象。

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>
  • DOM 将 HTML 表示为标签的树形结构

  • 每个树的节点都是一个对象。

  • 标签被称为 元素节点(或者仅仅是元素),并形成了树状结构:<html> 在根节点,<head><body> 是其子项,等。

  • 元素内的文本形成 文本节点,被标记为 #text。一个文本节点只包含一个字符串。它没有子项,并且总是树的叶子。

    • 例如,<title> 标签里面有文本 "About elk"
    • 请注意文本节点中的特殊字符:换行符:空格:
    • 空格和换行符也都是一个#text 节点
  • 注释也会成为一个节点。

所以说HTML文档中,处处都是节点。但是,一般我们的DOM操作指得都是对元素节点的操作

文档更新时间: 2021-08-04 07:48   作者:张老师