阅读 181

谈谈浏览器里的JavaScript

在许多的网页前端教学或是文章书籍当中,你可能常常听到这样的说法:「HTML、CSS 与JavaScript 是网页前端三大要素」,其中:

  • HTML 负责资料与结构
  • CSS 负责样式与呈现
  • JavaScript 负责行为与互动

那么,如果你跟我在学JavaScript的时候也有一样的疑问:变量、类型、对象、流程控制、函数...表面上看似基础都学会了,但...

我还是不知道怎么通过JavaScript在网页上输出"Hello World!"啊!

那么相信看完今天的分享,我保证你一定可以通过JavaScript 在网页上输出"Hello World!" (嘻嘻)

浏览器里的JavaScript

严格来说,JavaScript (或者说ECMAScript 标准) 并没有提供网页的操作方法。

事实上,前端开发者在网页的操作方法都是由JavaScript的执行平台,也就是浏览器提供的。这些操作方法基本上会分别由这两种对象所拥有:BOM与DOM。

所以广泛来说,在浏览器上的JavaScript 实际上包含了以下三部分:

  • JavaScript核心 (以ECMAScript标准为基础)
  • BOM (Browser Object Model,浏览器对象模型)
  • DOM (Document Object Model,文件对象模型)

由于BOM与DOM是由浏览器执行环境所提供;所以换句话说,在node环境下的JavaScript就不会有这两个部分。

前端开发者就是可以通过JavaScript 去调用BOM 与DOM 提供的API,进一步通过它们去控制浏览器的行为与网页的内容。

那么接下来就来具体介绍一下BOM与DOM吧。

BOM 是什么?

BOM(Browser Object Model,浏览器对象模型),是浏览器所有功能的核心,与网页的内容无关。

在早期没有制定标准规范的时候,各家浏览器厂商几乎在自家浏览器上都有各自的功能,非常混乱。直到后来W3C 把各家浏览器都有的部分,以及确定已经(或未来会) 加入的功能,统一集合起来纳入了HTML5 的标准中,这也就是我们现在看到的BOM API。

BOM 有时也有人非正式地称它为Level 0 DOM。因为它在DOM level 1 标准前就已存在,而不是真的有文件去规范这些,所以Level 0 DOM与BOM两者实际上指的是同一个东西。

BOM的核心window对象

从上图可以看出BOM的核心是window对象。

window对象提供的属性主要为documentlocationnavigatorscreenhistory以及frames

在浏览器里的window对象会扮演着两种角色:

  • ECMAScript 标准里的全局对象 (Global Object)
  • JavaScript 用来与浏览器沟通的窗口

凡是在全局作用域内声明的变量、对象、函数等,都会自动变成全局对象的属性。通常这样的变量,我们会称它们叫做全局变量,可以通过window.xxx的方式取得它们。比如:

var a = 10; 
console.log( window.a );    // 10
复制代码

除此之外,在全局作用域内声明的全局变量还有一个特性,就是无法使用delete关键字来移除:

var a = 10; 
console.log( window.a );    // 10

console.log(delete window.a);     // false
console.log( window.a );    // 10
复制代码

但若是直接通过指定window对象的属性则可以:

window.a = 10; 
console.log( window.a );    // 10

console.log(delete window.a);        // true
console.log( window.a );    // undefined
复制代码

现在我们已经知道了全局对象是怎么回事了,那么window对象扮演的另一个角色,用来与浏览器沟通的窗口又是什么意思呢?

浏览器内建的对话框

先来个最常见的例子:alert()警告对话框:

(alert on Chrome)

我想不管是不是刚接触JavaScript的朋友,对alert应该都不陌生,alert的完整语法其实是这样:

window.alert("message");
复制代码

如同我们所熟知的全局变量一样,window对象下的成员,window是可以省略不打的。

一行代码就可以生成一个对话框,很神奇吧?

而这就是浏览器环境的BOM提供给JavaScript控制的功能之一。

类似的对话框还有用来提供确定/取消window.confirm(),以及开放式问答的window.prompt()对话框。

当然BOM 提供的API 很多,包含开启/关闭视窗,改变视窗大小,计时器与取得网址等等。这些在之后的文章当中还会再细说。

DOM 是什么?

DOM(Document Object Model,文件对象模型),是一个将HTML文件以树状的结构来表示的模型,而组合起来的树状图,我们称之为DOM Tree。

简单来说,我们把HTML每个节点的关系连接起来倒着看,就好像是一棵树一样。假设我们有一个基本的HTML如下:

<html>
    <head>
        <title>米淇淋的个人博客</title>
    </head>
    <body>
        <h1>这是主题</h1>
        <p>这是一个<i>简单</i>的段落</p>
    </body>
</html>
复制代码

在最根部的地方,就是document,就是BOM图中window下面的那个。

往下可以延伸出一个个的HTML 标签,一个节点就是一个标签,往下又可以再延伸出文本节点与属性的节点。

而DOM API 就是定义了让JavaScript 可以存取、改变HTML 结构、样式和内容的方法,甚至是对节点绑定的事件。

JavaScript 就是通过DOM 提供的API 来对HTML 做存取与操作。

DOM 与 BOM 的区别

前面介绍BOM时,我们已经知道DOM的document其实也就是window对象的子对象之一。

而 DOM 与 BOM 最大的区别在于:

  • BOM: JavaScript 与浏览器沟通的窗口,不涉及网页内容。
  • DOM: JavaScript 用来控制网页的节点与内容的标准。

BOM完全依赖于浏览器厂商实作本身无标准规范,而DOM有着W3C 所制定的标准来规范。

想要通过DOM API 取得节点,JavaScript 可以这样写:

// 根据传入的值,找到 DOM 中 id 为 'xxx' 的元素。
document.getElementById('xxx');

// 针对给定的 tag 名称,返回所有符合条件的 NodeList 对象(节点的集合)
document.getElementsByTagName('xxx');

// 针对给定的 class 名称,返回所有符合条件的 NodeList 对象。
document.getElementsByClassName('xxx');

// 针对给定的 Selector 条件,返回第一个 或 所有符合条件的 NodeList。
document.querySelector('xxx'); 
document.querySelectorAll('xxx');
复制代码

而透过DOM API选取出来的节点,我们可以通过操作textContent属性来变更它的文字。

假设有一个HTML 节点:

<h1 id="greet"></h1>
复制代码

再来我们就可以先通过document.querySelector()方法来取得节点,然后修改textContent属性:

<script>
    document.querySelector('#greet').textContent = 'Hello World!'
</script>
复制代码

JS Bin on jsbin.com

看到这里,恭喜你已经可以通过JavaScript 在网页上输出"Hello World!" 啦!

在后续的内容中,我们会继续来介绍各种操作网页的DOM/BOM API。

毕竟对前端工程师来说,搞懂怎么与浏览器打交道、怎么操作网页内容,就是做好WebUI最重要的基础。

如果觉得文章对你有些许帮助,欢迎在我的GitHub博客点赞和关注,感激不尽!

关注下面的标签,发现更多相似文章
评论