« Check those Parameters passed to PHP proxy | Main | How to Use Dynamic Javascript and JSON »

Example of how to use "getElementsByTagName"

The .getElementsByTagName (GEBTN) is a very useful DOM method for navigating both HTML and XML structures.

It is important to remember that this method returns an array of dom elements that match the tag name. It is up to the developer to know the structure of the DOM in order to get the right elements in the array.

Here is an example of parsing xml data from a variable called "xml" (This data is modified from an actual Yahoo! movie feed):

<channel>
<title>Movies Opening This Week</title>
<link>http://movies.yahoo.com</link>
<description>Movies Opening in Theatres This Week</description>
<item>
<title>Perfect Stranger opens April 13th, 2007 (wide)</title>
<description>An undercover reporter tracks down a killer.</description>
</item>
<item>
<title>Pathfinder opens April 13th, 2007 (wide)</title>
<description>A legion of Vikings battles Native Americans.</description>
</item>
<item>
<title>Disturbia opens April 13th, 2007 (wide)</title>
<description>A man under house arrest witnesses a crime</description>
</item>
</channel>

Suppose we want to retrieve data from the upcoming movies and display in an alert box. In this case, we want the titles and description of the movies.

We can't just use GEBTN on "title" because that would also return the <title> node for the channel and we only want the ones related to the movies. We can see that all the movies are contained within <item> tags, so that will be our starting point.


var movies = xml.getElementsByTagName("item");

We now have the contents of all the <item> tags referenced in an array called movies. After assigning these tags to the array, we want to access the title and descriptions of the movies, so we must iterate through the array using an index.

The easiest way to iterate through is using a "for" loop.

for (var i = 0; i < movies.length; i++) {

   var vTitle = movies[i].getElementsByTagName("title")[0].firstChild.nodeValue;

   var vDescription = movies[i].getElementsByTagName("description")[0].firstChild.nodeValue;

   alert(vTitle + "\n" + vDescription);

}

The "movies[i]" is referencing a specific <item> in the zero based array. "movies[2]" for example will correspond to the <item> tag that contains the <title> tag of "Disturbia...". We again use the .getElementsByTagName to get an array of tags called "title" that are INSIDE the current <item> tag as referenced in the movies[] array.

For this example, we know that there is only one <title> tag under our selected <item> tags, so we can select it with the index of [0]. We also know that the <title> tag contains one child and that it is a text node, so we reference it with ".firstChild.nodeValue".

I hope this is useful to anyone that might be having problems using xml from javascript. This is just a basic example of getting data out of xml using dom methods, but I hope it is informative enough that a reader can understand the basic concepts.

Archives