DOM Elements

I know part of the problem I have been having with this book is that it shows you how to do one thing. It does not show you the other DOM elements that you might want to use. I thought it might be nice to know what else we can do with the DOM.

Well, I found a list of DOM elements and what they can do. JavaScript Kit lists the DOM methods that are most used by programmers. The page is rather long so they have added a search function.

Here is an example:It also tells you if that DOM is supported or not supported by the listed browsers. The headache that are spared is endless.

More DOM Help

I am still struggling with DOM and parsing. I tried using a loop on my individual project and got a "child not found" error. This baffled me.

The more I worked with the code, I would get other errors. Some of the error were like "Results Expected" and Request not well formed.

Then I tried using the code that my teammate Jeremy had for our Iteration 2 group project. I pulled it in and modified it. I loaded up with no results at all!

I keep trying find a site that will explain how DOM and Simple XML parsing works. I have posted several other sites and now I have another one to add to the list.

Quirksmode has a nice introduction to W3C DOM. It shows a lot of code examples and I have posted a sample from the site:

function test2(val) {
 if (document.getElementById && document.createElement)
 {
  node = document.getElementById('hereweare').parentNode;
  node.setAttribute('align',val);
 }
 else alert('Your browser doesn\'t support the Level 1 DOM');
}

AJAX is a PAIN

I just posted on about the great stuff I was finding on XML.com. I found something else that will be of interest to all of us here.

Bruce Perry posted a blog about using a open source Javascript library called Prototype. Why did he do this? Here are his own words on the subject.

"Why didn't I just create a plain old JavaScript object (POJO) for my application, instead of introducing an open source library? For one, Prototype includes a nifty collection of JavaScript shortcuts that reduce typing and help avoid the reinvention of the wheel. The commonly touted shortcut is $("mydiv"), which is a Prototype function that returns a Document Object Model (DOM) Element associated with the HTML tag with id "mydiv". That sort of concision alone is probably worth the cost of setting up Prototype. It's the equivalent of:

document.getElementById("mydiv");

Another useful Prototype shortcut is $F("mySelect"), for returning the value of an HTML form element on a web page, such as a selection list. Once you get used to Prototype's austere, Perlish syntax, you will use these shortcuts all the time. Prototype also contains numerous custom objects, methods, and extensions to built-in JavaScript objects, such as the Enumeration and Hash objects (which I discuss below).

Finally, Prototype also wraps the functionality of XMLHttpRequest with its own Ajax.Request and related objects, so that you don't have to bother with writing code for instantiating this object for various browsers."

He goes on to SHOW YOU how to set up your files for using prototype by adding certain lines of code and files. And finally he finishes up the blog with examples on how to use the library.

Next Step: XML Parsing

I found Dr. Drake's example of parsing to complex as it had that drop down box in it. I need an example with out the code for the drop down to walk through to find out where the code for drop down started and stopped.

I found this website called Kirupa.com and there was a nice walk through of what you needed to parse using SimpleXML. It included a brief description of XML in case you had stumbled on to the page. Then it went in to showing you the code and what each line was and why it was needed.

I also found a decent explanation on the DOM parser at the W3 Schools. It is good example of looping through the xml to pulled it out in to readable text. See code posted from the site below:


$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");

$x = $xmlDoc->documentElement;
foreach ($x->childNodes AS $item)
{
print $item->nodeName . " = " . $item->nodeValue . "
";
}
?>

If I get time before class tomorrow I will see if I can get my rss feed for Iteration 2 parsed out.

Inserting multiple lines of text with innerHTML

I know there have been several posts about the DOM but I found a fabulous site that, in my opinion, is better than the W3Schools stuff. I have been trying to figure out how to display multiple Events using innerHTML with no success. Every time I looped through the Events all I would end up with is the last one. I thought about using the createElement, createTextNode and appendChild methods but that would involve re-thinking things and It was just not real clear how that all works.

I have looked for better explanations about some of these functions, especially innerHTML. Till I stumbled on this site it seemed like I wasn’t going to get it to work and would end up createElement, createTextNode and appendChild to displayed event information.

This is what I did to get innerHTML to work with multiple Events:

for (i =0; i < something.length; i++) // loop
{
// initialcontent stores the initial text in my "eventDetails" DIV
var initialcontent = document.getElementById("eventDetails").innerHTML;

// I put some text into the evnetDetails DIV
var state = xmlDoc.getElementsByTagName('state')[i].firstChild.nodeValue;
document.getElementById("eventDetails").innerHTML = "State: " + state;

// finalcontent stores the information I just put in eventDetails DIV
var finalcontent = document.getElementById("eventDetails").innerHTML;

// I use innerHTML to display initialcontent + finalcontent
document.getElementById("eventDetails").innerHTML = initialcontent + finalcontent;
}
// end for loop

I have run accross quite a few comments stating that we shouldn't use innerHTML.

I may try and use createElement, createTextNode and appendChild and what ever else I need to displayed event information.

This site has excellent explainations and examples on how use, from what I can tell, all the DOM functions.

The Document Object Model

We used PHP to retrieve information from web pages last week. But there are other methods, which appear interesting. One such method is the Document Object Model standard. The DOM provides the information needed for Javascript to communicate with the elements on the web page. The DOM itself isn't Javascript. It's a standard from the World Wide Web Consortium that most browser manufactures have adopted and add to their browsers.

The Document Object Model is the representation of the way the web browser remembers the HTML tags, their attributes and the order in which they appear in the file. There are two methods for selecting nodes. Nodes are the tags, tag attributes, and text of the web page. The two main methods for selecting nodes are:
getElementById() and getElementByTagName()

Getting an element by ID means locating a single node that has a unique ID applied to it. We would use the following Javascript to select the node:

document.getElementById('header')

We can also use a variable instead of a string such as:

var lookfor = 'header';
var foundNode = document.getElementById(lookfor);

When we assign the result of this method to a variable, it allows us to store a reference to a particular tag so that we can later manipulate it in our program. The getElementById() command returns a reference to a single node. The getElementByTagName () command is used to retrieve multiple items.

For example, to retrieve all the links on a page, you could do something like:

var pageLinks = document.getElementByTagName('a');

The varaible “pageLinks “ would store all the links from the selected page in same matter as a array. Therefore pageLinks[0] would be the first link from the selected page.

Beyond the methods I mentioned moving around a page using the DOM method becomes difficult and time consuming. Each browser interprets the DOM differently. Javascript makes using the DOM method almost a waste of time, because of the difficulty of getting the standard to function correctly with all the available browsers.