Web頁工具 - 使用DOM Inspector搜尋節點

使用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開發過程中将是一個舉足輕重的強大工具。