responseXML.documentElement; // grabs the root node
var books = doc.getElementsByTagName('book'); // get all song nodes
var container = document.getElementById('books');
var book, title, author, description, text;
for(var i=0;i
{
// create the book container
book = document.createElement('div');
book.className = 'book';
book.id = books[i].getAttribute('id');
// create the title
title = document.createElement('h2');
text = document.createTextNode(books[i].childNodes[1].firstChild.data);
title.appendChild(text);
book.appendChild(title);
// create the author line
author = document.createElement('p');
author.className = 'author';
text = document.createTextNode(books[i].childNodes[3].firstChild.data);
author.appendChild(text);
book.appendChild(author);
CHAPTER 5 n AJAX AND DATA EXCHANGE 108
// create the description
description = document.createElement('p');
text = document.createTextNode(books[i].childNodes[5].firstChild.data);
description.appendChild(text);
book.appendChild(description);
// add the entire book node to the document
container.appendChild(book);
}
The code retrieves the first, third, and fifth elements. Remember that empty text nodes
are considered elements, too, so you have to skip over them. The nice thing is that this behavior
is consistent in all browsers including IE. The firstChild of the element is the text node
and then the data property retrieves the text contained within.
Pages:
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173