The responseXML property - AJAX

Where as the responseText property of the XMLHTTPRequest object contains a string, responseXML can be treated as if it were an XML document.

More JavaScript DOM Methods
You met some of the JavaScript DOM methods, such as getElementById and getElementsByTagName, in previous lessons. In those cases, we were mostly concerned with reading the values of the nodes to write those values into HTML page elements.

This lesson looks at the DOM methods that can be used to actually create elements, thereby changing the structure of the page.

The Document Object Model can be thought of as a tree like structure of nodes. As well as reading the values associated with those nodes, you can create and modify the nodes themselves, thereby changing the structure and content of your document.

To add new element to a page, you need to first create the elements and then attach them to the appropriate point in your DOM tree. Let’s look at a simple example using the following HTML document:

In this example, we want to add the text “Hello World!” to the <div> container in the document body.We’ll put our JavaScript routine into a function that we’ll call from the body’s onLoad() event handler.

First, we’ll use the JavaScript DOM method createTextNode() to, well, create a text node:

We now need to attach textnode to the DOM tree of the document at the appropriate point.

You first learned about child nodes in this Lesson“Client-Side Coding Using JavaScript”; hopefully, you recall that nodes in a document are said to have children if they contain other document elements. JavaScript has an appendChild() method, which allows us to attach our new text node to the DOM tree by making it a child node of an existing document node.

In this case, we want our text to be inside the <div> container having the id displaydiv:

Let’s look at the complete source of the page, after wrapping up this JavaScript code into a function and adding the onLoad() event handler to execute it:

Below it shows the browser display after loading this page.

The DOM says "Hello World"

The DOM says

When you want to create other page elements besides text nodes, you can do so using the createElement() method, which works pretty much like create TextNode().We could, in fact, have used createElement() to create the <div> container itself, prior to adding our ‘Hello World!’ text node:

In general, you simply pass the type of the required page element as an argument to createElement() to generate the required type of element.

An Overview of DOM Methods
This book is about Ajax, not just about JavaScript DOM techniques, so we’re not going to reproduce here a comprehensive guide to all the available methods and properties. However, Table itemizes some of the more useful ones.

Some JavaScript DOM Properties and Methods

Some JavaScript DOM Properties and Methods

Node properties

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

AJAX Topics