Webpage tool-use Dom inspector to search nodes

Use Dom inspector to search nodes

A Dom Inspector tool is packaged in Mozilla Suite and Firefox browsers. If Dom inspector is used, you can view the structured representation of the web page, even search for certain nodes, and automatically update the nodes in the Dom. In Firefox, you can use the Tools menu to access Dom inspector. To use Dom inspector to check a Web page, you need to enter the desired URL in the text box and click the inspect box. Alternatively, you can select a window from the file → inspect a window menu, this will list the web pages currently opened in the browser (see Figure 5-7 ).

Figure 5-7 Dom Inspector Main Window

The Dom Inspector main window has three panes. The upper left pane is a hierarchical view of the web page Dom. The root element is often the document itself. Each node on the Web page is listed under this root element. For most web pages, the root node is almost HTML. If you select a node in the structured View pane, the upper right pane displays the node details. If no browser window is opened in the lower part of the main window, you can select View> browser menu 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. Generally, you can manually search for nodes using menu items in the structured view, or you can use the search → find nodes menu item to find each node. With this search function, you can search for 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 Dom inspector is to use the mouse. When searching for a node in the structured view, you can select the search → select element by click menu item and click this item in the browser window. The selected nodes are highlighted with a red border and selected in the structured View pane.

Once a specific node is selected in the structured View pane, you can check and modify its attributes. For example, you can right-click a node, select cut from the context menu, select another node in the structured View pane, right-click it, and select Paste from the context menu, in this way, you can set the selected node in the DOM Valid From one place to another. Figure 5-9 shows how to use this method to move the master image on the Google search page to another part of the page.

Figure 5-9 result of using Dom inspector to move the Google search page's primary image

You can also find more features in the Information pane in the upper right corner. For a node selected in the structured View pane, this window displays information about the node. The drop-down list icon in the title area above is used to change the information type. optional information types include Dom node, box model, XBL bindings, CSS style rules, computed style, and JavaScript Object. When using Mozilla's XML user interface language (XUL) Toolkit to develop applications, the box model and XBL bindings information types are more useful.

The Dom node information type displays the basic information about the node, such as its Tag Name, node value, and node attributes. Right-click a node and a context menu is displayed. Select the edit menu to modify the node attribute value. For example, you can select a font node and modify the size attribute. As shown in Figure 5-10, this technology can increase the font size above the input box on the Google search page.

The JavaScript Object Information type lists available Dom attributes and methods of the selected node. It is a useful feature to determine the available attributes and methods of a specific Dom node. For example, in addition to normal methods (such as appendchild), table nodes also list methods such as insertrow and deleterow.

Figure 5-10 use Dom inspector to dynamically modify the font size above the input box

If it is set to the JavaScript Object Information type, right-click in the Information pane and a context menu with the evaluate JavaScript menu item is displayed. If you select this menu item, a window is displayed. You can calculate a javascript expression for the selected node. Figure 5-11 shows the Javascript computing window opened for the body (body) node of the Google search page. You can see that if you execute the Javascript expression shown in the computing window, the specified text will be appended at the end of the page. Note that target is used as the variable name to indicate the selected node. Here it is the body element.

Figure 5-11 use the Javascript computing window to dynamically Add a text node (left) in the page body and the results in the browser pane (right)

The CSS style rules and computed style information types display information about the selected node style rules. The computed style information type lists all style-related attributes seen by the browser's rendering engine, including the styles explicitly set using the style attribute and the styles specified in the external CSS file, or the style inherited from the parent node.

I have briefly understood the features of Dom inspector. As you can imagine, it will be a very useful tool in your development environment. You can use Dom inspector to check the DOM nodes dynamically created through the document. createelement method to ensure that the required attribute values are available. If a specific node does not apply the style rules you want, you can also use Dom inspector to find out the cause. As you become more familiar with the functions of Dom inspector, you will surely find that Dom inspector will be an important and powerful tool in Web development.