資訊專欄INFORMATION COLUMN
摘要：而與最大的區(qū)別在于與瀏覽器溝通的窗口，不涉及網(wǎng)頁內(nèi)容。完全依賴于瀏覽器廠商實作本身無標準規(guī)范，而有著所制定的標準來規(guī)范。而透過選取出來的節(jié)點，我們可以通過操作屬性來變更它的文字。
在許多的網(wǎng)頁前端教學或是文章書籍當中，你可能常常聽到這樣的說法：「HTML、CSS 與JavaScript 是網(wǎng)頁前端三大要素」，其中：
HTML 負責資料與結(jié)構(gòu)
CSS 負責樣式與呈現(xiàn)
JavaScript 負責行為與互動
那么，如果你跟我在學JavaScript的時候也有一樣的疑問：變量、類型、對象、流程控制、函數(shù)...表面上看似基礎(chǔ)都學會了，但...
我還是不知道怎么通過JavaScript在網(wǎng)頁上輸出"Hello World!"??！
那么相信看完今天的分享，我保證你一定可以通過JavaScript 在網(wǎng)頁上輸出"Hello World!" (嘻嘻)
瀏覽器里的JavaScript嚴格來說，JavaScript (或者說ECMAScript 標準) 并沒有提供網(wǎng)頁的操作方法。
事實上，前端開發(fā)者在網(wǎng)頁的操作方法都是由JavaScript的執(zhí)行平臺，也就是瀏覽器提供的。這些操作方法基本上會分別由這兩種對象所擁有：BOM與DOM。
所以廣泛來說，在瀏覽器上的JavaScript 實際上包含了以下三部分：
JavaScript核心 (以ECMAScript標準為基礎(chǔ))
BOM (Browser Object Model，瀏覽器對象模型)
DOM (Document Object Model，文件對象模型)
由于BOM與DOM是由瀏覽器執(zhí)行環(huán)境所提供；所以換句話說，在node環(huán)境下的JavaScript就不會有這兩個部分。
前端開發(fā)者就是可以通過JavaScript 去調(diào)用BOM 與DOM 提供的API，進一步通過它們?nèi)タ刂茷g覽器的行為與網(wǎng)頁的內(nèi)容。
那么接下來就來具體介紹一下BOM與DOM吧。
BOM 是什么");BOM(Browser Object Model，瀏覽器對象模型)，是瀏覽器所有功能的核心，與網(wǎng)頁的內(nèi)容無關(guān)。
在早期沒有制定標準規(guī)范的時候，各家瀏覽器廠商幾乎在自家瀏覽器上都有各自的功能，非常混亂。直到后來W3C 把各家瀏覽器都有的部分，以及確定已經(jīng)(或未來會) 加入的功能，統(tǒng)一集合起來納入了HTML5 的標準中，這也就是我們現(xiàn)在看到的BOM API。
BOM 有時也有人非正式地稱它為Level 0 DOM。因為它在DOM level 1 標準前就已存在，而不是真的有文件去規(guī)范這些，所以Level 0 DOM與BOM兩者實際上指的是同一個東西。
BOM的核心window對象
從上圖可以看出BOM的核心是window對象。
而window對象提供的屬性主要為document、location、navigator、screen、history以及frames。
在瀏覽器里的window對象會扮演著兩種角色：
ECMAScript 標準里的全局對象 (Global Object)
JavaScript 用來與瀏覽器溝通的窗口
凡是在全局作用域內(nèi)聲明的變量、對象、函數(shù)等，都會自動變成全局對象的屬性。通常這樣的變量，我們會稱它們叫做全局變量，可以通過window.xxx的方式取得它們。比如：
var a = 10;
console.log( window.a ); // 10
除此之外，在全局作用域內(nèi)聲明的全局變量還有一個特性，就是無法使用delete關(guān)鍵字來移除：
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
現(xiàn)在我們已經(jīng)知道了全局對象是怎么回事了，那么window對象扮演的另一個角色，用來與瀏覽器溝通的窗口又是什么意思呢？
瀏覽器內(nèi)建的對話框先來個最常見的例子：alert()警告對話框：
(alert on Chrome)
我想不管是不是剛接觸JavaScript的朋友，對alert應(yīng)該都不陌生，alert的完整語法其實是這樣：
window.alert("message");
如同我們所熟知的全局變量一樣，window對象下的成員，window是可以省略不打的。
一行代碼就可以生成一個對話框，很神奇吧？
而這就是瀏覽器環(huán)境的BOM提供給JavaScript控制的功能之一。
類似的對話框還有用來提供確定/取消的window.confirm()，以及開放式問答的window.prompt()對話框。
當然BOM 提供的API 很多，包含開啟/關(guān)閉視窗，改變視窗大小，計時器與取得網(wǎng)址等等。這些在之后的文章當中還會再細說。
DOM 是什么");DOM(Document Object Model，文件對象模型)，是一個將HTML文件以樹狀的結(jié)構(gòu)來表示的模型，而組合起來的樹狀圖，我們稱之為DOM Tree。
簡單來說，我們把HTML每個節(jié)點的關(guān)系連接起來倒著看，就好像是一棵樹一樣。假設(shè)我們有一個基本的HTML如下：
米淇淋的個人博客
這是主題
這是一個簡單的段落
在最根部的地方，就是document，就是BOM圖中window下面的那個。
往下可以延伸出一個個的HTML 標簽，一個節(jié)點就是一個標簽，往下又可以再延伸出文本節(jié)點與屬性的節(jié)點。
而DOM API 就是定義了讓JavaScript 可以存取、改變HTML 結(jié)構(gòu)、樣式和內(nèi)容的方法，甚至是對節(jié)點綁定的事件。
JavaScript 就是通過DOM 提供的API 來對HTML 做存取與操作。
DOM 與 BOM 的區(qū)別前面介紹BOM時，我們已經(jīng)知道DOM的document其實也就是window對象的子對象之一。
而 DOM 與 BOM 最大的區(qū)別在于：
BOM: JavaScript 與瀏覽器溝通的窗口，不涉及網(wǎng)頁內(nèi)容。
DOM: JavaScript 用來控制網(wǎng)頁的節(jié)點與內(nèi)容的標準。
BOM完全依賴于瀏覽器廠商實作本身無標準規(guī)范，而DOM有著W3C 所制定的標準來規(guī)范。
想要通過DOM API 取得節(jié)點，JavaScript 可以這樣寫：
// 根據(jù)傳入的值，找到 DOM 中 id 為 "xxx" 的元素。
document.getElementById("xxx");
// 針對給定的 tag 名稱，返回所有符合條件的 NodeList 對象(節(jié)點的集合)
document.getElementsByTagName("xxx");
// 針對給定的 class 名稱，返回所有符合條件的 NodeList 對象。
document.getElementsByClassName("xxx");
// 針對給定的 Selector 條件，返回第一個 或 所有符合條件的 NodeList。
document.querySelector("xxx");
document.querySelectorAll("xxx");
而透過DOM API選取出來的節(jié)點，我們可以通過操作textContent屬性來變更它的文字。
假設(shè)有一個HTML 節(jié)點：
<h1 id="greet">h1>
再來我們就可以先通過document.querySelector()方法來取得節(jié)點，然后修改textContent屬性：
<script>
document.querySelector("#greet").textContent = "Hello World!"
script>
JS Bin on jsbin.com
看到這里，恭喜你已經(jīng)可以通過JavaScript 在網(wǎng)頁上輸出"Hello World!" 啦！
在后續(xù)的內(nèi)容中，我們會繼續(xù)來介紹各種操作網(wǎng)頁的DOM/BOM API。
畢竟對前端工程師來說，搞懂怎么與瀏覽器打交道、怎么操作網(wǎng)頁內(nèi)容，就是做好WebUI最重要的基礎(chǔ)。
如果覺得文章對你有些許幫助，歡迎在我的GitHub博客點贊和關(guān)注，感激不盡！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/7358.html
摘要：講作用域鏈首先要從作用域講起，下面是百度百科里對作用域的定義作用域在許多程序設(shè)計語言中非常重要。原文出處談?wù)務(wù)Z法里一些難點問題二 3) 作用域鏈相關(guān)的問題 作用域鏈是javascript語言里非常紅的概念，很多學習和使用javascript語言的程序員都知道作用域鏈是理解javascript里很重要的一些概念的關(guān)鍵，這些概念包括this指針，閉包等等，它非常紅的另一個重要原因就...
摘要：由于表達式偏啰嗦，于是最近便開始采用來減輕負擔。規(guī)范是這么說的在規(guī)范，有如下描述搬譯一下操作符產(chǎn)生式按如下流程解釋令為解釋執(zhí)行的結(jié)果。而如果把換成操作符寫成，她的就不會減了，因為操作符不會對求值。 由于JS表達式偏啰嗦，于是最近便開始采用Coffeescript來減輕負擔。舉個栗子，當我想取屋子里的第一條dog時，首先要判斷house對象是否存在，然后再判斷house.dogs是否存在...
摘要：引子前不久我建立的技術(shù)群里一位問了一個這樣的問題，她貼出的代碼如下所示執(zhí)行結(jié)果如下所示第一個第二個這是一個令人詫異的結(jié)果，為什么第一個彈出框顯示的是，而不是呢這種疑惑的原理我描述如下一個頁面里直接定義在標簽下的變量是全局變量即屬于對象的變量 1) 引子 前不久我建立的技術(shù)群里一位MM問了一個這樣的問題，她貼出的代碼如下所示： var a = 1; function hehe...
摘要：作為構(gòu)造函數(shù)使用，綁定到新創(chuàng)建的對象。內(nèi)部實現(xiàn)類和類的繼承構(gòu)造函數(shù)構(gòu)造函數(shù)調(diào)用父類構(gòu)造函數(shù)參考請盡可能詳盡的解釋的工作原理的原理簡單來說通過對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用來操作而更新頁面。 1 . 請解釋事件代理 (event delegation) 當需要對很多元素添加事件的時，可以通過將事件添加到它們的父節(jié)點通過委托來觸發(fā)處理函數(shù)。其中利用到了瀏覽器的事件冒泡機...
摘要：作用域的概念所謂作用域，作用就是指讀，寫等操作，而域便是指空間，范圍等中的域有是全局的域，相應(yīng)地里面的變量就是全局變量，函數(shù)就是全局函數(shù)如果有多個包住的域的話，函數(shù)會自上而下執(zhí)行，比如寫了兩的時候便會從上到下先執(zhí)行第一個再執(zhí)行第二個的代碼比 作用 域的概念 所謂作用域，作用就是指讀，寫等操作，而域便是指空間，范圍等 js中的域有 1.script script是全局的域，相應(yīng)地里面的變...
閱讀 1524·2021-11-24 11:16
閱讀 2753·2021-07-28 12:32
閱讀 2336·2019-08-30 11:22
閱讀 1471·2019-08-30 11:01
閱讀 629·2019-08-29 16:24
閱讀 3585·2019-08-29 12:52
閱讀 1654·2019-08-29 12:15
閱讀 1364·2019-08-29 11:18
