Ajax Basics Tutorial (5)-5.3 Searching nodes using DOM Inspector

3 Searching for nodes using DOM Inspector

A DOM Inspector tool is packaged in the Mozilla Suite and Firefox browsers. With Dom Inspector, you can view the structured representation of web pages, even search for specific nodes, and automatically update nodes in the DOM. In Firefox, you can access the DOM Inspector through the Tools menu item. To use DOM inspector to check a Web page, enter the URL you want in the text box and click the Inspect box, or select a window from the File→inspect a Windows menu. This lists the Web pages that are currently open in the browser (see Figure 5-7).

Figure 5-7 DOM Inspector main window

The DOM Inspector main window has 3 panes. The upper-left pane is a hierarchical view of the Web page DOM. The root element is often the document itself, and each node in the Web page is listed under this root element. For most Web pages, the root node is almost always HTML. If you select a node in the Structured view pane, the upper-right pane gives details of the node. If a browser window is not open in the lower part of the main window, you can select the View→browser menu item to open a browser window.

DOM Inspector is a powerful tool that allows you to quickly traverse the structure and view of a given Web page and modify the nodes in the Web page DOM. Typically, you can find nodes manually by menu items in structured view, or you can use Search→find nodes menu items to find individual nodes. With this search function, you can find nodes based on the id attribute, tag name, or attribute name and value (see Figure 5-8).

The easiest way to find a node in the DOM inspector is to use the mouse. When you look up a node in a structured view, you can select the Search→select Element by click menu item and click on this item in the browser window. The selected items are highlighted with a red border, and the appropriate node is selected in the Structured view pane.

Once you have selected a specific node in the Structured view pane, you can start checking and modifying its properties. For example, you can right-click a node, select Cut from the context menu, select another node in the Structured view pane, right-click, and select Paste from the context menu to effectively move the selected node from one place to another in the DOM. Figure 5-9 shows the use of this method to move the main picture on the Google search page to another part of the page.

Figure 5-9 using DOM Inspector to move the results of the Google search page main picture

You can also find more features in the information pane on the top right. For the selected node in the Structured view pane, this window displays various types of information about the node. The Drop-down list icon in the top title area is used to toggle the type of information, which includes Dom Node, Box Model, XBL bindings, CSS style Rules, computed style, and JavaScript Object. Box model and XBL bindings information types are more useful when developing applications using the Mozilla XML User interface language (XML users Interface language,xul) toolkit.

The DOM node information type displays basic information about the node, such as its label, node value, and the properties of the node. Right click on a node will display a context menu, select the Edit menu item can modify the value of the node properties. For example, you can select a font (font) node to modify the size (size) property. As shown in Figure 5-10, using this technique can increase the font size above the input box in the Google search page.

The JavaScript object information type lists the DOM properties and methods available for the selected node. This is a useful feature if you want to determine what properties and methods are available for a particular DOM node. For example, a method such as InsertRow and DeleteRow is also listed for table nodes, in addition to normal methods such as appendchild.

Figure 5-10 using Dom Inspector, dynamically modifying the font size above the input box

If set to the JavaScript object information type, the right-click in the information pane displays a context menu with evaluate JavaScript menu items. Selecting this menu item pops up a window to compute a JavaScript expression for the selected node. Figure 5-11 shows the JavaScript Computing window opened for the body node of the Google search page, and you can see that if you execute the JavaScript expression shown in the Calculation window, you append the specified text to the end of the page. Note that target is the variable name, which indicates the selected node, which is the BODY element.

Figure 5-11 Using the JavaScript calculation window to dynamically add a text node (left) in the body of the page, and the results in the Browser pane (right)

The CSS style rules and the computed style information type display information about the selected node style rule. The computed style information type lists all the style-related properties that the browser's rendering engine sees, including styles that are explicitly set using the Style property, styles specified in an external CSS file, or styles inherited from the parent node.

With a brief overview of the features of Dom inspector, it is conceivable that this will be a very useful tool in your development environment. You can use DOM Inspector to check the DOM nodes that are created dynamically through the Document.createelement method to ensure that you have the desired property values. If a particular node does not apply the style rules you want, you can also use DOM inspector to find out why. As you become more familiar with the functionality of Dom inspector, you will surely find Dom inspector to be a powerful tool for web development.

Back to "Ajax Basics Tutorial-Directory"