如果你需要更多關(guān)于DOM的信息，請參考 W3C Schrool 的 DOM 教程。

整個 HTML 文檔是由樹狀組織的節(jié)點及其屬性構(gòu)成的。那么如何在Javascript中操作它呢？請看例子：

  
    

      
Carrot
      
Apple
      
Banana
    
    
  

// file: dom.js
// 獲得id為fruits的節(jié)點
var ul = document.getElementById("fruits"),
    carrot = ul.firstElementChild;
ul.removeChild(carrot);
var pear = document.createElement("li");
// 設(shè)置pear的style屬性
pear.setAttribute("style", "color: red");
// 設(shè)置pear的內(nèi)容
pear.innerHTML = "pear"
ul.appendChild(pear);

這段代碼給出了一個簡單的操作DOM元素過程。找到id為fruits的標簽并刪除其第一個子節(jié)點；然后創(chuàng)建一個新的元素pear并添加到

中。更多 DOM 操作的方法請參考 W3C School: DOM 方法。
3.事件

正是 DOM 事件使得頁面可以與用戶進行交互，例如點擊、移入、移出、滾動等。同樣地，來個例子：

  


  

    Mouse Over Me ! 
  

// file: event.js
function over(obj) {
  obj.innerHTML="mouse is over!!!"
}
function out(obj) {
  obj.innerHTML="mouse is out..."
}
window.onload = function(){
    var div = document.getElementById("block");
    div.setAttribute("style", "background:lightgreen; width:200px;height:50px; margin: 50px;");
};

通過設(shè)置HTML元素的屬性，可以設(shè)置其事件處理函數(shù)。我們在

上綁定了兩個事件：mouseover（鼠標移入）和mouseout（鼠標移出）。

那么window.onload是什么呢？注意到我們在中引入了event.js，然而因為HTML是流式文檔，在執(zhí)行event.js時，還沒有得到渲染，此時直接document.getElementById("block")只會得到空。因此我們需要綁定窗口載入事件的處理函數(shù)，在窗口已經(jīng)載入后，再進行 DOM 操作。

而window便是我們接下來要介紹的 BOM。

3.BOM

瀏覽器對象模型 (Browser Object Model，BOM) 使 JavaScript 有能力與瀏覽器“對話”。雖然尚無正式標準，但大多現(xiàn)代瀏覽器都實現(xiàn)了相同的交互方法和屬性。其功能包括：操作瀏覽器窗口、瀏覽歷史與導航、Cookie操作、各類提醒框等。

window 是瀏覽器中一個特殊的對象。所有 JavaScript 全局對象、函數(shù)以及變量均自動成為 window 對象的成員。全局變量是 window 對象的屬性。全局函數(shù)是 window 對象的方法。

3.1 導航

window.location對象用于訪問當前 URL，或者導航到新的頁面。location有如下幾個屬性：

hostname：web 主機的域名

pathname：當前頁面的路徑和文件名

port：web 主機的端口

protocol：所使用的 web 協(xié)議（http:// 或 https://）

href：當前url，對它賦值可以實現(xiàn)重定向

reload()：這是一個方法，調(diào)用后會刷新當前頁面

除了window.location外，還有window.history提供瀏覽器歷史的操作，常用的有：

history.back()：與在瀏覽器點擊后退按鈕相同

history.forward()：與在瀏覽器中點擊按鈕向前相同
更多瀏覽器導航的BOM對象可以參考W3C School:location、W3C School:history。

3.2 消息

彈出窗口對象使用簡單方便，但因其交互方式生硬，通常只用于調(diào)試?？梢栽?JavaScript 中創(chuàng)建三種消息框：警告框、確認框、提示框。

alert("some message")：警告框,點擊確定按鈕才能繼續(xù)進行操作；

confirm("something")：確認框，點擊確定或者取消才能繼續(xù)進行操作，相應(yīng)地，返回值為true或false；

prompt("something")：提示框，輸入內(nèi)容，并點擊確認或取消才能繼續(xù)進行操作，相應(yīng)地，返回輸入內(nèi)容，或者null（如果取消）。

注意這些彈窗都會阻塞當前的Javascript進程。

console我們已經(jīng)很熟悉了，除了常用的console.log()外，還有console.error()，console.info()，console.debug()等用以日志分級的函數(shù)。

console我們在Node.js的課程中已經(jīng)多次使用，但console并非 ECMAScript 標準提供的對象。只是瀏覽器和 Node.js 都實現(xiàn)都提供了這樣的全局對象而已。

4.AJAX

AJAX（Asynchronous JavaScript and XML，異步的 JavaScript 和 XML），是用來與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的技術(shù)，避免了重新加載整個頁面。

可以說AJAX是現(xiàn)代化的頁面的標志，可用來創(chuàng)建動態(tài)性極強的 web 界面，現(xiàn)在我們來學習它！絕大多數(shù)瀏覽器都提供了 XMLHttpRequest 對象來完成 AJAX。為了理解 AJAX 是如何工作的，我們還是首先看一個案例：

這里有一個按鈕，點擊按鈕將會向服務(wù)器請求當前時間，服務(wù)器返回后將時間顯示在下面。每次點擊按鈕時間都會更新，但頁面不會刷新。

為了實現(xiàn)上述的效果，首先需要在頁面上顯示類似這樣的元素：

點擊按鈕時將會調(diào)用ajaxload()函數(shù)，在該函數(shù)中進行 AJAX 請求：

function ajaxload(){
  var result = document.getElementById("result");
  // 創(chuàng)建一個 AJAX 請求
  var xhr = new XMLHttpRequest();
  // 打開URL：/date
  xhr.open("GET", "/date", true);
  // xhr 狀態(tài)改變的處理函數(shù)
  xhr.onreadystatechange=function(){
    // 狀態(tài)為4表示響應(yīng)已就緒；狀態(tài)碼200表示成功的響應(yīng)
    if (xhr.readyState==4 && xhr.status==200)
      // 顯示響應(yīng)文本
      result.innerHTML=xhr.responseText;
  }
  xhr.send();
}

更多關(guān)于 readyState 的信息，參見W3C School:ReadyState

上述的代碼在ajax.html中。除此之外，我們還需要一個服務(wù)器來處理這些請求。當請求根目錄/時，返回這個 HTML 文件；當請求/date時，返回當前時間。下面服務(wù)器代碼ajax.js：

// file: ajax.js
var http = require("http"),
    fs = require("fs"),
    html = fs.readFileSync("./ajax.html", "utf8");

http.createServer(function (req, res) {
  switch(req.url){
    case "/":
      res.writeHead(200, {"Content-Type": "text/html"});
      res.write(html)
      break;
    case "/date":
      var date = new Date();
      res.writeHead(200, {"Content-Type": "text/plain"});
      res.write(date.toString())
      break;
  }
  res.end();
}).listen(1337, "127.0.0.1")

這段代碼的意圖應(yīng)該比較容易理解吧？我們在下面的Chrome調(diào)試中，會詳細地介紹這些代碼產(chǎn)生的效果。

到這里，我們已經(jīng)介紹了常用的幾個瀏覽器全局變量。window下的全局變量還有：

innerHeight/innerWidth：瀏覽器窗口內(nèi)部高度/寬度；

navigator：包含有關(guān)訪問者瀏覽器的信息；

screen：訪問者屏幕的寬度，以像素計；

setTimeout()/clearTimeout()：定時器/取消定時；

document.cookie：現(xiàn)在多數(shù)網(wǎng)站使用Cookie來識別用戶。

5.jQuery

一般的網(wǎng)站都會包含客戶端腳本，這些腳本的數(shù)量甚至比服務(wù)器代碼還要多，尤其是單頁APP這種交互性優(yōu)秀的站點。

jQuery 是一個javascript基礎(chǔ)框架，極大地方便了客戶端腳本的編寫，這里只做簡要介紹，此后的項目開發(fā)中，你會見到眾多的jQuery代碼。jQuery提供的API包括：

DOM操作：選擇、讀取和更改DOM元素的內(nèi)容、屬性；

AJAX：異步網(wǎng)絡(luò)請求；

動畫效果：滑動、延遲、淡入淡出等；

事件處理：鍵盤/鼠標事件、瀏覽器事件、表單事件等；

表單：表單的提交、表單的序列化、控件焦點變化等。

為了表現(xiàn)jQuery的強大，我們引入jQuery，使用jQuery重新實現(xiàn) DOM 一節(jié)中的參考代碼dom.html和dom.js。首先在dom-jquery.js之前引入jquery.js：

...


...

// file: dom-jquery.js
// 選擇 id 為 fruits 的元素集合（該集合中只有一個元素，即 ul ）
var $ul = $("#fruits");
// 找到該元素的第一個子元素（即 li）并將其移除
$ul.find(":first-child").remove();
// 創(chuàng)建一個 li 元素，并設(shè)置其 color 樣式為 red，其內(nèi)容為 pear
var $pear = $("
")
    .css("color", "red")
    .html("pear");
// 將 pear 添加到 ul 中
$ul.append($pear);

如果你是初識jQuery，可能會奇怪$是什么。其實$在javascript中是一個合法的標識符，也就是說$可以用來命名變量。

jQuery 提供的全局變量：$，它稱為 jQuery 對象。習慣上，通過 jQuery 選擇符得到的集合一般命名為以$起始的字符串，例如 $ul。

$ul是一個集合，只不過它只有一個元素。如果使用 $li = $("li")，那么該集合便會有3個元素，jQuery的所有方法都是對整個集合進行操作的。

6.Chrome 調(diào)試

Chrome和Firefox是Web開發(fā)中常用的調(diào)試工具，我們以Chrome為例。使用以下的任何一種方式都可以打開Chrome調(diào)試窗口：

在任何一個頁面上，點擊右鍵，選擇“審查元素”；

快捷鍵F12；

設(shè)置 -> 更多工具 -> 開發(fā)者工具。

打開的調(diào)試窗口中，有8個標簽頁。常用的有 Elements、Network、Sources、Console。

6.1 Elements

Elements 中，我們可以查看頁面元素，在左側(cè)可以點選某一個元素，該元素會在頁面上高亮，同時在右側(cè)顯示該元素的所有樣式。這些樣式還是可編輯的。

6.2 Network

Network 中，可以查看當前頁面的所有網(wǎng)絡(luò)請求。比如 AJAX 一節(jié)中我們會發(fā)送多個請求，在 Network 標簽頁中，可以看到訪問頁面時的請求，以及點擊按鈕獲取數(shù)據(jù)時的請求，如下圖所示：

從上圖中可以看到這兩個請求：

第一個請求的URL是localhost，方法為 GET，響應(yīng)狀態(tài)碼為 200，響應(yīng)的Content-Type為text/html，響應(yīng)大小為712B，文件大小為567B（其余為協(xié)議頭所占空間），載入時間為13毫秒。

第二個請求Content-Type為text/plain，這是在服務(wù)器代碼中決定的。另外其initiator即初始化該請求的代碼，在首頁（index）的第14行，我們這一行的代碼為：

 xhr.send();

text/html指示瀏覽器這是一個HTML文件，瀏覽器便會把它渲染為一個Web文檔。如果將Content-Type設(shè)置為text/plain，瀏覽器則會直接顯示HTML源碼。

不僅如此，我們還可以點擊第二個請求來查看其詳情，如下圖：

右側(cè)詳情窗口中有5個標簽頁，常用的是 Headers、Preview、Response。其中 Headers 中給出了請求和響應(yīng)的所有頭字段；Response 則給出了響應(yīng)體的內(nèi)容，這里是：

Mon Mar 30 2015 21:32:17 GMT+0800 (CST)

它就是xhr.responseText的值。

6.3 Sources

Sources標簽頁下，可以查看當前網(wǎng)站的HTML，及其引入的所有CSS、Javascript文件。重要的是，在Javascript文件中的任何一行，我們都可以設(shè)置斷點，腳本將會在這一行停下來。觸發(fā)斷點時，我們可以查看斷點所在的作用域內(nèi)的所有變量的值，如下圖所示：

右側(cè)窗格顯示了局部變量、監(jiān)視變量以及調(diào)用棧。右側(cè)窗格的上方有繼續(xù)、下一步、進入函數(shù)、跳出函數(shù)、禁用斷點等按鈕。

還可以切換至Console，在當前作用域下執(zhí)行任何Javascript語句。

6.4 Console

Console與Node.js的控制臺類似，這是一個Javascript的交互式環(huán)境。在這里可以執(zhí)行任何Javascript語句，如圖：

上圖中我們首先執(zhí)行了：

new Date()

控制臺中輸出了這個語句的返回值。接著執(zhí)行：

console.error("test error")

我們便在控制臺看到了一則錯誤，其內(nèi)容為test error。

在斷點觸發(fā)時（例如上圖中的情況），在控制臺可以訪問當前作用域的任何對象，讀取或設(shè)置它們的值，甚至在這里調(diào)用作用域內(nèi)的任何函數(shù)。如圖便是輸出了上述斷點觸發(fā)時的xhr對象。

版權(quán)聲明

本文由Harttle創(chuàng)作，轉(zhuǎn)載需署名作者且注明文章出處

云服務(wù)器 GPU云服務(wù)器 天碼營 javascript dom 編程藝術(shù) javascript dom編程藝術(shù) javascript的dom編程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/87725.html

• 上一篇：企業(yè)網(wǎng)站綜合布局實戰(zhàn)-imooc
• 下一篇：【JavaScript】【對象】更好地理解對象繼承