谈谈浏览器里的JavaScript

时间 2019-12-13

标签谈谈浏览器 javascript 栏目浏览器繁體版

原文原文链接

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

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

那么，若是你跟我在学JavaScript的时候也有同样的疑问：变量、类型、对象、流程控制、函数...表面上看似基础都学会了，但...html

我仍是不知道怎么经过JavaScript在网页上输出"Hello World!"啊！前端

那么相信看完今天的分享，我保证你必定能够经过JavaScript 在网页上输出"Hello World!" (嘻嘻)java

浏览器里的JavaScript

严格来讲，JavaScript (或者说ECMAScript 标准) 并无提供网页的操做方法。node

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

因此普遍来讲，在浏览器上的JavaScript 实际上包含了如下三部分：github

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

因为BOM与DOM是由浏览器执行环境所提供；因此换句话说，在node环境下的JavaScript就不会有这两个部分。api

前端开发者就是能够经过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对象提供的属性主要为document、location、navigator、screen、history以及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博客点赞和关注，感激涕零！