Script Categories

Page Details >>> Dom Browser.

The DOM Browser is a visual, interactive representation of the DOM (Document Object Model). It's helpful to beginners learning to interact with the DOM in JavaScript. It's also a great tool for side-by-side comparisons of Netscape, Internet Explorer, and other browsers and how they interpret the document and its elements.

Add the below code to the <body> section of your page:

<script language="javascript" type="text/javascript">      
/* Visit for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Original:  Cyanide_7 ( -->
<!-- Web Site: -->

<!-- Begin
var objects = new Array(), browser = null, expanded = null;

// begin objects array with the document
objects[0] = new Array(document, "_document", false);

function openDOMBrowser(activeElement){
// finds index of incoming object by its key
activeIndex = arrayIndexOf(objects, activeElement, 1);
// toggles its expanded boolean
objects[activeIndex][2] = !objects[activeIndex][2];
// opens/reopens the window
args = "width=500,height=600,left=20,top=20,scrollbars,resizable,top=0,left=0";
browser ='',"DOMBrowser",args);
// clears the expanded array (to avoid infinate loops in the DOM)
expanded = new Array();
// document is about to be expanded
expanded["_document"] = true;
// writes HTML to the window"text/html","replace");
browser.document.writeln("<HTML><HEAD><TITLE>DOM Browser</TITLE></HEAD>");
browser.document.writeln("<BODY BGCOLOR=BBBBBB link=FFFFF vlink=FFFFF>");
// calls recurrsive property writing function
// finishes writing HTML and closes
// returns false for event handlers
return false;
// recurrsive function to get properties of objects
function getProps(obj){
// for loop to run through properties of incoming object
for(var prop in obj){
// if the property is an object itself, but not null...
if(typeof(obj[prop])=="object" && obj[prop]!=null){
// get index of object in objects array
valIndex = arrayIndexOf(objects, obj[prop], 0);
// if not in index array, add it and create its key
valIndex = objects.length;
key = ((new Date()).getTime()%10000) + "_" + (Math.floor(Math.random()*10000));
objects[valIndex] = new Array(obj[prop], key, false);
// write link for this object to call openDOMBrowser with its key
"</b> : <a href=\"javascript:void(0)\" onClick=\"window.opener.openDOMBrowser('"+
objects[valIndex][1]+"');return false;\">"+(new String(obj[prop])).replace(/</g,"<")+"</a>");
// determine whether object should be expanded/was already expanded
if(objects[valIndex][2] && !expanded[objects[valIndex][1]]){
// if it needs to be expanded, add to expanded array
expanded[objects[valIndex][1]] = true;
// write nested list tag and recurrsive call to getProps
// if not an object, just write property, value pair
browser.document.writeln("<b>"+prop+"</b> : " + (new String(obj[prop])).replace(/</g,"<"));
// function to find object in an array by field value
function arrayIndexOf(array, value, field){
var found = false;
var index = 0;
while(!found && index < array.length){
// field may be object reference or key
found = true;
return (found)?index:-1;
//  End -->
type=button value="Open DOM Browser" onClick="openDOMBrowser('_document');">

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.

Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).