資訊專欄INFORMATION COLUMN
摘要：而與最大的區別在于與瀏覽器溝通的窗口，不涉及網頁內容。完全依賴于瀏覽器廠商實作本身無標準規范，而有著所制定的標準來規范。而透過選取出來的節點，我們可以通過操作屬性來變更它的文字。
在許多的網頁前端教學或是文章書籍當中，你可能常常聽到這樣的說法：「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如下：
米淇淋的個人博客
這是主題
這是一個簡單的段落
在最根部的地方，就是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博客點贊和關注，感激不盡！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7358.html
摘要：講作用域鏈首先要從作用域講起，下面是百度百科里對作用域的定義作用域在許多程序設計語言中非常重要。原文出處談談語法里一些難點問題二 3) 作用域鏈相關的問題 作用域鏈是javascript語言里非常紅的概念，很多學習和使用javascript語言的程序員都知道作用域鏈是理解javascript里很重要的一些概念的關鍵，這些概念包括this指針，閉包等等，它非常紅的另一個重要原因就...
摘要：由于表達式偏啰嗦，于是最近便開始采用來減輕負擔。規范是這么說的在規范，有如下描述搬譯一下操作符產生式按如下流程解釋令為解釋執行的結果。而如果把換成操作符寫成，她的就不會減了，因為操作符不會對求值。 由于JS表達式偏啰嗦，于是最近便開始采用Coffeescript來減輕負擔。舉個栗子，當我想取屋子里的第一條dog時，首先要判斷house對象是否存在，然后再判斷house.dogs是否存在...
摘要：引子前不久我建立的技術群里一位問了一個這樣的問題，她貼出的代碼如下所示執行結果如下所示第一個第二個這是一個令人詫異的結果，為什么第一個彈出框顯示的是，而不是呢這種疑惑的原理我描述如下一個頁面里直接定義在標簽下的變量是全局變量即屬于對象的變量 1) 引子 前不久我建立的技術群里一位MM問了一個這樣的問題，她貼出的代碼如下所示： var a = 1; function hehe...
摘要：作用域的概念所謂作用域，作用就是指讀，寫等操作，而域便是指空間，范圍等中的域有是全局的域，相應地里面的變量就是全局變量，函數就是全局函數如果有多個包住的域的話，函數會自上而下執行，比如寫了兩的時候便會從上到下先執行第一個再執行第二個的代碼比 作用 域的概念 所謂作用域，作用就是指讀，寫等操作，而域便是指空間，范圍等 js中的域有 1.script script是全局的域，相應地里面的變...
閱讀 1487·2021-11-24 11:16
閱讀 2689·2021-07-28 12:32
閱讀 2302·2019-08-30 11:22
閱讀 1440·2019-08-30 11:01
閱讀 595·2019-08-29 16:24
閱讀 3547·2019-08-29 12:52
閱讀 1625·2019-08-29 12:15
閱讀 1332·2019-08-29 11:18
