Introduction
This JavaScript allows a web developer to view the DOM/parse the DOM of a website that they are working on in an easy, cross-browser fashion. I wasted a lot of time trying to determine what the DOM actually looked like in different browsers in order to do complex tasks. Some books helped, some websites helped, but no one had an actual easy-to-use piece of portable JavaScript code that simply helped.
Background
Understanding associate arrays in JavaScript is about the only possible prerequisite. See this website for information.
Using the Code
Getting the code to work is easy. Reference the JavaScript file in your web page and it will write itself to your page, as below:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<script language="javascript" type="text/javascript" src="includes/Jshell.js" >
</script>
<body>
<img src="images/myPageSimulation.JPG" id="TheImage" />
</body>
</html>
Once you have a script tag referencing the Jshell.js file, your web page should have a floating div appear, like so:
Let's go over how to use the control next. To move the control, click and hold your mouse over the gray bar and drag it around. Drag it to wherever you like. This allows you to still see vital data while searching the DOM. The ReOpac button toggles the opacity of the control between '.2'/''. This lets you see through the control in case it is blocking something important. The ReSize button toggles the width of the control between 230px/490px. The reason for this is if you have Jshell on a small page, like a pop up.
Let's talk about searching (we will discuss the Back, Forward and Search buttons while talking about searching). Jshell can search in a few ways. You can search via the text box below all the buttons. Simply type in what you want to search for and hit the Search button. Also, you can hit the Enter key on your keyboard while your mouse still has focus on the text box. While searching, you will notice the DOM pieces come back in multiple colors:
- Blue means the value of the DOM is text, and more than likely cannot be parsed any further.
- Orange means the value cannot be parsed any further. If something is orange and it is a list, try adding a
[0] to the end of your search string; it might get you back on track. - Red means the given data could not be evaluated, typically coming back as undefined.
- Green indicates that further enumeration is possible. You can click on the green text to search on it.
After searching on some things, you can use the Back and Forward buttons. These buttons let you move through the last 10 searches you have performed. When Jshell first starts up, the Back button already has the following 4 searches at your disposal: document.location, navigator, window and document.
So now that you know the basics, click around and have fun! Try searching through the DOM in multiple browsers and you will see some interesting differences. You can even search on things like document.getElementById('JavaScriptSearch_Div') if you want to look at a particular object, or navigator for all your browser info.
Thanks
To God, for everything. To PPK, the JavaScript masta. If you ever need to know anything about JavaScript, especially cross-browser scripting, this is the site. To Dean Edwards for the ForEach portion of my code.
Points of Interest
The two things that really grabbed my attention while writing this code were...
- Associate Arrays. CRAZY KOOL! I wish someone would have taught me about them earlier on in my career.
- The whole issue of opacity, talk about a cross browser horror story...
.style.filter = 'alpha(opacity=20)';
.style['-moz-opacity'] = '.20';
.style.opacity = '0.2';
Having to do one thing 3 different ways for X amount of browsers is a big chunk of the cross-browser issue.
History
Version 1.0.0, when I wrote this article, 1/29/2008.
Submit an article or tip
