javascript xml parsing

arndale65 used Ask the Experts™

I have the following XML....

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:media="">
            <title>Push Entertainment Playlist</title>
                  <title>Media Item 1</title>
                  <media:content url="video.flv" type="video/x-flv"/>
                  <description>Media Item 1 Description</description>
                  <media:thumbnail url="preview.jpg" />
                  <title>Media Item 2</title>
                  <media:content url="video.flv" type="video/x-flv" />
                  <description>Media Item 4 Description</description>
                  <media:thumbnail url="preview.jpg" />
                  <title>Media Item 3</title>
                  <media:content url="video.flv" type="video/x-flv" />
                  <description>Media Item 4 Description</description>
                  <media:thumbnail url="preview.jpg" />
                  <title>Media Item 4</title>
                  <media:content url="video.flv" type="video/x-flv" />
                  <description>Media Item 4 Description</description>
                  <media:thumbnail url="preview.jpg" />


The xml is loaded OK but I'm struggling with the syntax to access the nodes. I want....

title, content url, content type, description & thumbnail url

... for each <item>. What JS do I need?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Here we go. A custom made code just for you.

<script type="text/javascript">
var xmlhttp;
function GetXmlHttpObject() {
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		return new XMLHttpRequest();
	if (window.ActiveXObject) {
		// code for IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	return null;

function loadXMLDoc(url) {
	xmlhttp = GetXmlHttpObject();
	if (xmlhttp == null) {
		alert ("Your browser does not support XMLHTTP!");
	xmlhttp.onreadystatechange = onResponse;"GET", url, true);

function onResponse() {
	if(xmlhttp.readyState!=4) return;
	if(xmlhttp.status!=200) {
		alert("Problem retrieving XML data");

	txt="The retrieved data<br><br>";
	xmlData = xmlhttp.responseXML.documentElement;
	musicAlbums = xmlData.getElementsByTagName("item");
	for(var i=0; i<musicAlbums.length; i++) {
		currentAlbum = musicAlbums[i];
		var title = currentAlbum.getElementsByTagName("title")[0].firstChild.nodeValue;
		var descr = currentAlbum.getElementsByTagName("description")[0].firstChild.nodeValue;
		var content = currentAlbum.getElementsByTagName("media:content")[0];
			var content_url = content.getAttribute("url");
			var content_type = content.getAttribute("type");
		var thumbnail = currentAlbum.getElementsByTagName("media:thumbnail")[0];
			var thumbnail_url = thumbnail.getAttribute("url");
		txt+="<br>Title : "+title;
		txt+="<br>Description : "+descr;
		txt+="<br>&nbsp;&nbsp;&nbsp;&nbsp;Content URL : "+content_url;
		txt+="<br>&nbsp;&nbsp;&nbsp;&nbsp;Content Type : "+content_type;
		txt+="<br>&nbsp;&nbsp;&nbsp;&nbsp;Thumnail URL : "+thumbnail_url;
		txt+="<br><br>";//adding a space
	document.getElementById('copy').innerHTML = txt;


<div id="copy">
<button onclick="loadXMLDoc('')">Get XML Data</button>

Open in new window

The basic code is from w3schools but I edited the onResponse function so it reads from your XML file's structure instead!


Perfect, thankyou.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial