談談瀏覽器裏的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博客點贊和關注，感激涕零！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。