Ajax- 使用DOM Inspector搜索節(jié)點

導航: 上一頁 | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion

在Mozilla Suite和Firefox瀏覽器中打包了一個DOM Inspector工具。如果利用DOM Inspector，則可以查看Web頁面的結構化表示，甚至能搜索某些特定的節(jié)點，并自動更新DOM中的節(jié)點。在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頁面中的每個節(jié)點都列在這個根元素下面。對于大多數(shù)Web頁面，根節(jié)點幾乎都是HTML。如果在結構化視圖窗格中選擇了一個節(jié)點，右上窗格會給出這個節(jié)點的詳細信息。如果主窗口下部沒有打開一個瀏覽器窗口，則可以選擇View→Browser菜單項打開一個瀏覽器窗口。
文件:1.gif DOM Inspector是一個功能強大的工具，利用這個工具，你可以快速地遍歷給定Web頁面的結構和視圖，并修改Web頁面DOM中的各個節(jié)點。通常，可以通過結構化視圖中的菜單項手工地查找節(jié)點，也可以使用Search→Find Nodes菜單項來查找各個節(jié)點。利用這個搜索功能，你可以根據(jù)ID屬性、標記名或屬性名和值來查找節(jié)點（見圖5-8）。

要在DOM Inspector中查找節(jié)點，最容易的方法是使用鼠標。在結構化視圖中查找一個節(jié)點時，可以選擇Search→Select Element by Click菜單項，并點擊瀏覽器窗口中的這一項。所選項會以紅色邊框突出顯示，而且在結構化視圖窗格中選中相應的節(jié)點。

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

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

你還能在右上方的信息窗格中發(fā)現(xiàn)更多功能。對于結構化視圖窗格中選中的節(jié)點，這個窗口會顯示有關該節(jié)點的各類信息。上方標題區(qū)中的下拉列表圖標用于切換信息的類型，可選的信息類型包括DOM Node、Box Model、XBL Bindings、CSS Style Rules、Computed Style和JavaScript Object。當使用Mozilla的XML用戶界面語言（XML User Interface Language，XUL）工具包開發(fā)應用時，Box Model和XBL Bindings信息類型更有用。

DOM Node信息類型會顯示有關節(jié)點的基本信息，如其標記名、節(jié)點值，以及節(jié)點的屬性。右鍵點擊一個節(jié)點會顯示一個上下文菜單，選擇其中的Edit菜單項就可以修改節(jié)點屬性的值。例如，可以選擇一個font（字體）節(jié)點，修改size（大?。傩?。如圖5-10所示，使用這種技術可以增大Google搜索頁面中輸入框上方的字體大小。

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

圖5-10　使用DOM Inspector，動態(tài)修改輸入框上方的字體大小

如果設置為JavaScript Object信息類型，則在信息窗格中右鍵點擊就會顯示一個帶有Evaluate JavaScript菜單項的上下文菜單。選擇這個菜單項會彈出一個窗口，可以針對所選節(jié)點計算一個JavaScript表達式。圖5-11顯示了針對Google搜索頁面的body（體）節(jié)點打開的JavaScript計算窗口，可以看到，如果執(zhí)行計算窗口所示的JavaScript表達式，就會在頁面的最后追加指定的文本。注意target作為變量名，它指示所選的節(jié)點，在這里就是body元素。

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

CSS Style Rules和Computed Style信息類型會顯示所選節(jié)點樣式規(guī)則的有關信息。Computed Style信息類型會列出瀏覽器的呈現(xiàn)引擎所看到的所有與樣式相關的屬性，包括使用style屬性顯式設置的樣式，在外部CSS文件中指定的樣式，或者從父節(jié)點繼承的樣式。

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