谈谈浏览器里的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博客 点赞和关注,感激不尽!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The CS Detective: An Algorithmic Tale of Crime, Conspiracy, and
Jeremy Kubica / No Starch Press / 2016-8-15 / USD 13.74
Meet Frank Runtime. Disgraced ex-detective. Hard-boiled private eye. Search expert.When a robbery hits police headquarters, it's up to Frank Runtime and his extensive search skills to catch the culpri......一起来看看 《The CS Detective: An Algorithmic Tale of Crime, Conspiracy, and 》 这本书的介绍吧!