谈谈浏览器里的JavaScript

栏目: JavaScript · 发布时间: 5年前

内容简介:在许多的网页前端教学或是文章书籍当中,你可能常常听到这样的说法:「HTML、CSS 与JavaScript 是网页前端三大要素」,其中:那么,如果你跟我在学JavaScript的时候也有一样的疑问:那么相信看完今天的分享,我保证你一定可以通过JavaScript 在网页上输出"Hello World!" (嘻嘻)

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

  • HTML 负责资料与结构
  • CSS 负责样式与呈现
  • JavaScript 负责行为与互动
谈谈浏览器里的JavaScript

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

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

谈谈浏览器里的JavaScript

那么相信看完今天的分享,我保证你一定可以通过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对象

谈谈浏览器里的JavaScript

从上图可以看出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()警告对话框:

谈谈浏览器里的JavaScript

(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>
复制代码
谈谈浏览器里的JavaScript

在最根部的地方,就是 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博客 点赞和关注,感激不尽!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The CS Detective: An Algorithmic Tale of Crime, Conspiracy, and

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 》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

html转js在线工具
html转js在线工具

html转js在线工具