谈谈浏览器里的JavaScript
栏目: JavaScript · 发布时间: 5年前
内容简介：在许多的网页前端教学或是文章书籍当中，你可能常常听到这样的说法：「HTML、CSS 与JavaScript 是网页前端三大要素」，其中：那么，如果你跟我在学JavaScript的时候也有一样的疑问：那么相信看完今天的分享，我保证你一定可以通过JavaScript 在网页上输出"Hello World!" (嘻嘻)
在许多的网页前端教学或是文章书籍当中，你可能常常听到这样的说法：「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 对象提供的属性主要为 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>
复制代码
看到这里，恭喜你已经可以通过JavaScript 在网页上输出"Hello World!" 啦！
在后续的内容中，我们会继续来介绍各种操作网页的DOM/BOM API。
毕竟对前端工程师来说，搞懂 怎么与浏览器打交道、怎么操作网页内容 ，就是做好WebUI最重要的基础。
如果觉得文章对你有些许帮助，欢迎在 我的GitHub博客 点赞和关注，感激不尽！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
