Ajax基礎教程（5）- 5.3 使用DOM Inspector搜尋節點

3　使用DOM Inspector搜尋節點

在Mozilla Suite和Firefox瀏覽器中打包了一個DOM Inspector工具。如果利用DOM Inspector，則可以查看Web頁面的結構化表示，甚至能搜尋某些特定的節點，並自動更新DOM中的節點。在Firefox中，你可以通過Tools功能表項目來訪問DOM Inspector。要使用DOM Inspector來檢查一個Web頁面，需要在文字框中輸入所需的URL，並點擊Inspect框；或者也可以從File→Inspect a Window菜單選擇一個視窗，這就會列出當前在瀏覽器中開啟的Web頁面（見圖5-7）。

圖5-7　DOM Inspector主視窗

DOM Inspector主視窗有3個窗格。左上窗格是Web頁面DOM的一個階層視圖。根項目往往是文檔本身，Web頁面中的每個節點都列在這個根項目下面。對於大多數Web頁面，根節點幾乎都是HTML。如果在結構化視圖窗格中選擇了一個節點，右上窗格會給出這個節點的詳細資料。如果主視窗下部沒有開啟一個瀏覽器視窗，則可以選擇View→Browser功能表項目開啟一個瀏覽器視窗。

DOM Inspector是一個功能強大的工具，利用這個工具，你可以快速地遍曆給定Web頁面的結構和視圖，並修改Web頁面DOM中的各個節點。通常，可以通過結構化視圖中的功能表項目手工地尋找節點，也可以使用Search→Find Nodes功能表項目來尋找各個節點。利用這個搜尋功能，你可以根據ID屬性、標記名或屬性名稱和值來尋找節點（見圖5-8）。

要在DOM Inspector中尋找節點，最容易的方法是使用滑鼠。在結構化視圖中尋找一個節點時，可以選擇Search→Select Element by Click功能表項目，並點擊瀏覽器視窗中的這一項。所選項會以紅色邊框反白，而且在結構化視圖窗格中選中相應的節點。

一旦在結構化視圖窗格中選中一個特定節點，你就可以開始檢查和修改它的屬性了。例如，可以右鍵點擊一個節點，從操作功能表中選擇Cut，再選擇結構化視圖窗格中的另一個節點，右鍵點擊，從操作功能表中選擇Paste，這樣就能在DOM中將所選節點有效地從一處移到另一處。圖5-9顯示了使用這種方法可以將Google搜尋網頁面上的主圖片移到頁面的另一個部分。

圖5-9　使用DOM Inspector移動Google搜尋網頁面主圖片的結果

你還能在右上方的資訊窗格中發現更多功能。對於結構化視圖窗格中選中的節點，這個視窗會顯示有關該節點的各類資訊。上方標題區中的下拉式清單表徵圖用於切換資訊的類型，可選的資訊類型包括DOM Node、Box Model、XBL Bindings、CSS Style Rules、Computed Style和JavaScript Object。當使用Mozilla的XML使用者介面語言（XML User Interface Language，XUL）工具包開發應用時，Box Model和XBL Bindings資訊類型更有用。

DOM Node資訊類型會顯示有關節點的基本資料，如其標記名、節點值，以及節點的屬性。右鍵點擊一個節點會顯示一個操作功能表，選擇其中的Edit功能表項目就可以修改節點屬性的值。例如，可以選擇一個font（字型）節點，修改size（大小）屬性。如圖5-10所示，使用這種技術可以增大Google搜尋網頁面中輸入框上方的字型大小。

JavaScript Object資訊類型會列出所選節點可用的DOM屬性和方法。如果要確定一個特定DOM節點有哪些可用的屬性和方法，這就是一個很有用的特性。例如，除了一般的正常方法外（如appendChild），對於表格節點還會列出諸如insertRow和deleteRow的方法。

圖5-10　使用DOM Inspector，動態修改輸入框上方的字型大小

如果設定為JavaScript Object資訊類型，則在資訊窗格中右鍵點擊就會顯示一個帶有Evaluate JavaScript功能表項目的操作功能表。選擇這個功能表項目會彈出一個視窗，可以針對所選節點計算一個JavaScript運算式。圖5-11顯示了針對Google搜尋網頁面的body（體）節點開啟的JavaScript計算視窗，可以看到，如果執行計算視窗所示的JavaScript運算式，就會在頁面的最後追加指定的文本。注意target作為變數名，它指示所選的節點，在這裡就是body元素。

圖5-11　使用JavaScript計算視窗在頁面的體中動態增加一個文本節點（左圖），以及瀏覽器窗格中的結果（右圖）

CSS Style Rules和Computed Style資訊類型會顯示所選節點樣式規則的有關資訊。Computed Style資訊類型會列出瀏覽器的呈現引擎所看到的所有與樣式相關的屬性，包括使用style屬性顯式設定的樣式，在外部CSS檔案中指定的樣式，或者從父節點繼承的樣式。

前面已經簡要地瞭解了DOM Inspector的特性，可以想像，在你的開發環境中，這必將是一個非常有用的工具。你可以使用DOM Inspector來檢查通過document.createElement方法動態建立的DOM節點，以確保具有所需的屬性值。如果一個特定節點沒有應用你希望的樣式規則，也可以使用DOM Inspector來找出原因。隨著越來越熟悉DOM Inspector的功能，你肯定會發現DOM Inspector在Web開發過程中將是一個舉足輕重的強大工具。

返回“Ajax基礎教程-目錄”