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

導(dǎo)航: 上一頁(yè) | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion

在Mozilla Suite和Firefox瀏覽器中打包了一個(gè)DOM Inspector工具。如果利用DOM Inspector，則可以查看Web頁(yè)面的結(jié)構(gòu)化表示，甚至能搜索某些特定的節(jié)點(diǎn)，并自動(dòng)更新DOM中的節(jié)點(diǎn)。在Firefox中，你可以通過(guò)Tools菜單項(xiàng)來(lái)訪問(wèn)DOM Inspector。要使用DOM Inspector來(lái)檢查一個(gè)Web頁(yè)面，需要在文本框中輸入所需的URL，并點(diǎn)擊Inspect框；或者也可以從File→Inspect a Window菜單選擇一個(gè)窗口，這就會(huì)列出當(dāng)前在瀏覽器中打開(kāi)的Web頁(yè)面（見(jiàn)圖5-7）。

圖5-7　DOM Inspector主窗口

DOM Inspector主窗口有3個(gè)窗格。左上窗格是Web頁(yè)面DOM的一個(gè)層次結(jié)構(gòu)視圖。根元素往往是文檔本身，Web頁(yè)面中的每個(gè)節(jié)點(diǎn)都列在這個(gè)根元素下面。對(duì)于大多數(shù)Web頁(yè)面，根節(jié)點(diǎn)幾乎都是HTML。如果在結(jié)構(gòu)化視圖窗格中選擇了一個(gè)節(jié)點(diǎn)，右上窗格會(huì)給出這個(gè)節(jié)點(diǎn)的詳細(xì)信息。如果主窗口下部沒(méi)有打開(kāi)一個(gè)瀏覽器窗口，則可以選擇View→Browser菜單項(xiàng)打開(kāi)一個(gè)瀏覽器窗口。
文件:1.gif DOM Inspector是一個(gè)功能強(qiáng)大的工具，利用這個(gè)工具，你可以快速地遍歷給定Web頁(yè)面的結(jié)構(gòu)和視圖，并修改Web頁(yè)面DOM中的各個(gè)節(jié)點(diǎn)。通常，可以通過(guò)結(jié)構(gòu)化視圖中的菜單項(xiàng)手工地查找節(jié)點(diǎn)，也可以使用Search→Find Nodes菜單項(xiàng)來(lái)查找各個(gè)節(jié)點(diǎn)。利用這個(gè)搜索功能，你可以根據(jù)ID屬性、標(biāo)記名或?qū)傩悦椭祦?lái)查找節(jié)點(diǎn)（見(jiàn)圖5-8）。

要在DOM Inspector中查找節(jié)點(diǎn)，最容易的方法是使用鼠標(biāo)。在結(jié)構(gòu)化視圖中查找一個(gè)節(jié)點(diǎn)時(shí)，可以選擇Search→Select Element by Click菜單項(xiàng)，并點(diǎn)擊瀏覽器窗口中的這一項(xiàng)。所選項(xiàng)會(huì)以紅色邊框突出顯示，而且在結(jié)構(gòu)化視圖窗格中選中相應(yīng)的節(jié)點(diǎn)。

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

圖5-9　使用DOM Inspector移動(dòng)Google搜索頁(yè)面主圖片的結(jié)果

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

DOM Node信息類(lèi)型會(huì)顯示有關(guān)節(jié)點(diǎn)的基本信息，如其標(biāo)記名、節(jié)點(diǎn)值，以及節(jié)點(diǎn)的屬性。右鍵點(diǎn)擊一個(gè)節(jié)點(diǎn)會(huì)顯示一個(gè)上下文菜單，選擇其中的Edit菜單項(xiàng)就可以修改節(jié)點(diǎn)屬性的值。例如，可以選擇一個(gè)font（字體）節(jié)點(diǎn)，修改size（大?。傩浴Ｈ鐖D5-10所示，使用這種技術(shù)可以增大Google搜索頁(yè)面中輸入框上方的字體大小。

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

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

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

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

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

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