User:Proteins/Writing scripts for Wikipedia: Difference between revisions

Content deleted Content added

Inline

Revision as of 12:55, 30 October 2008

How to access the DOM tree in your browser

The DOM tree is created by the browser, and most browsers allow you to see it. The following instructions should allow you to see it in different browsers:

In Firefox 3, the best approach is to download an add-on known as "DOM inspector". Once added, it should appear under the "Tools" menu in the top bar of the browser, which is next to the "Bookmarks" menu". DOM Inspector can also be activated using the keycode Ctrl-Shift-I.

In Google Chrome, right-clicking on any part of the page summons a menu. At the bottom of that menu is the choice "Inspect element", which shows the position of the element in the DOM tree.

In Internet Explorer 7, the "IE Developer Toolbar" is used to show the DOM tree. This toolbar can be found at the far right, behind the double arrows that are to the right of the "Tools" menu, which is itself to the right of the "Page" menu.

In Safari, one clicks on the "Develop" menu and selects the choice "Show Web Inspector". The Develop menu is located in the topmost menu bar, between the "Bookmarks" and "Window" menus. If the Develop menu is not found there, click on the "Eedit" menu and select its last element, "Preferences". A window will pop up, on which you choose the last tab, labeled "Advanced". At the bottom of the Advanced screen is a checkbox labeled "Show Develop menu in menu bar." Clicking this checkbox should introduce the Develop menu in the menu bar.

In Opera, the equivalent DOM inspector can be turned on by clicking on the "Tools" menu in the top menu bar (sandwiched between the "Widgets" and "Help" menus). Under the Tools menu, click on the "Advanced" submenu, and from the resulting sub-sub-menu, choose "Developer Tools". This should turn on an analysis system at the bottom of the screen, which incidentally can also be detached into a window of its own. Within this analysis window, clicking on the "DOM" tab should reveal the DOM tree. One drawback of this inspector seems to be that it does not reveal the changes in the DOM tree after your script has run. Instead, it reloads the webpage afresh, always showing the original unmodified DOM tree.

The DOM tree of typical Wikipedia pages

Inspecting the DOM tree of Wikipedia articles will reveal a common architecture.

@@ Line 10: / Line 10: @@
 * In [[Safari (web browser)|Safari]], one clicks on the "Develop" menu and selects the choice "Show Web Inspector".  The Develop menu is located in the topmost menu bar, between the "Bookmarks" and "Window" menus.  If the Develop menu is not found there, click on the "Eedit" menu and select its last element, "Preferences".  A window will pop up, on which you choose the last tab, labeled "Advanced".  At the bottom of the Advanced screen is a checkbox labeled "Show Develop menu in menu bar."  Clicking this checkbox should introduce the Develop menu in the menu bar.
+* In [[Opera (web browser)|Opera]], the equivalent DOM inspector can be turned on by clicking on the "Tools" menu in the top menu bar (sandwiched between the "Widgets" and "Help" menus).  Under the Tools menu, click on the "Advanced" submenu, and from the resulting sub-sub-menu, choose "Developer Tools".  This should turn on an analysis system at the bottom of the screen, which incidentally can also be detached into a window of its own.  Within this analysis window, clicking on the "DOM" tab should reveal the DOM tree.  One drawback of this inspector seems to be that it does ''not'' reveal the changes in the DOM tree after your script has run.  Instead, it reloads the webpage afresh, always showing the original unmodified DOM tree.
 ==The DOM tree of typical Wikipedia pages==