Master AJAX: Part 5: Manipulating DOM Using JavaScript Instant Update Web Page

April 27, 2006

The previous Brett introduces the document object model (DOM), and its elements define the web page behind the scenes. He will further explore the DOM in this article. Learn how to create, delete and modify the various parts of the DOM tree, learn how to implement web page instant updates!

If you read the previous article, you are very clear about everything happening behind the web page when the web browser shows the web. As mentioned earlier, the web page is converted into an object model from the text when HTML or CSS defined for the page is sent to a web browser. This is the case no matter the simple or complex code, it is the case. Then the browser directly uses the object model instead of the text file you provide. The model used by the browser is called the document object model (Document Object Model, DOM). It connects to the objects of elements, properties, and text in document. All styles, values, and even most spaces in HTML and CSS are merged into the object model. The specific model of a given web page is called the DOM tree of the page.

Understand what is the DOM tree, and know how it means that HTML and CSS are just the first step in controlling the web page. Next, you also need to know how to handle the DOM tree of the web page. For example, if an element is added to the DOM tree, this element will immediately appear in the user's web browser - do not need to reload the page. Remove some text from the DOM tree, those text will disappear from the user screen. You can modify the user interface via the DOM or interact with the user interface, which provides strong programming capabilities and flexibility. Once you have learned how to deal with DOM trees, you have taken a big step towards achieving rich, interactive dynamic sites.

Note, the following discussion is based on the article "Web response using DOM". If you have not read it, please read the previous article before you continue to read.

Crossiler, cross-language

The document object model is a W3C standard (see Referring to the link). Therefore, all modern web browsers support DOM - at least to some extent. Although different browsers have some differences, if Dom core features are used and pay attention to a few special circumstances and exceptions, the DOM code can be used in any browser in the same way. Modifying the code of the Opera webpage can also be used for Apple's Safari®, Firefox®, Microsoft® Internet Explorer® and Mozilla®.

DOM is also a specification across language, in other words, most mainstream programming languages ​​can use it. W3C defines several language bindings for DOM. A language bind is to let you use the DOM API for a particular language. For example, you can use the DOM language binding defined by C, Java, and JavaScript. Therefore, DOM can be used from these languages. There are several language bindings for other languages, although many are defined by third parties other than W3C.

This series of articles mainly discuss the DOM binding of JavaScript. This is because most asynchronous application development needs to write JavaScript code running in a web browser. Using JavaScript and DOM can instantly modify user interfaces, respond to user events and inputs, etc. - is completely standard JavaScript.

In short, it is recommended that you also try the DOM bindings in other languages. For example, using Java language binding not only handles HTML, but also can process XML, which will be discussed in later articles. Therefore, the techniques described herein can also be used in other languages ​​other than HTML, other environments other than client JavaScript.

Node concept

The node is the most basic object type in the DOM. In fact, you will see this article, all other objects defined by the DOM are extension of node objects. However, before analyzing semantics, you must understand the concepts represented by nodes, and then the specific properties and methods of the node are very simple. In the DOM tree, basically everything is a node. Each element is a node in the DOM tree on the bottom. Each attribute is a node. Each text is a node. Even annotations, special characters (such as copyright symbol ©), DOCTYPE declaration (if you have any words in HTML or XHTML) all nodes. Therefore, you must clearly grasp what is a node before discussing these specific types.

The node is ...

In the simplest, anything in the DOM tree is a node. The reason why the word "things" is blurred because it can only be clear to this extent. For example, elements in HTML (such as IMG) and text fragments in HTML (such as "scroll down for more details) do not have much significant similarities. But this is because you may consider the function of each type, focusing on their differences.

But if you observe from another perspective, each element in the DOM tree has a father, this parent node may be another element (such as the child of IMG nested in P element), or DOM tree The top layer element (this is a special case in each document, even if the HTML element is used). In addition, elements and text have a type. Obviously, the type of element is element, the type of text is text. Each node has some definition structure: Is there any nodes (such as child elements) below? Is there a brother node (adjacent to elements or text "" node)? Which document belongs to each node?

Obviously, most of the content sounds abstract. In fact, the type of an element is that the element seems to be a bit stupid. However, we must truly recognize the value of the node as a common object type, must be considered abstract.

Universal node type

The most common task in the DOM code is to navigate in the DOM tree in the page. For example, you can locate a Form through its "ID" attribute, then start processing the elements and text in the form in the Form. It may contain text descriptions, labels, real INPUT elements, and other HTML elements (such as IMG) and links (A elements). If the elements and text are completely different, you must write a completely different code for each type.

If you use a generic node type, it is different. At this time, you only need to move from one node to another, and you need to consider the type of node only when you need a particular processing for the element or text. If you move only in the DOM tree, you can move to the element's parent node or child node using the same operation as the other node type. Only when the special nature of a certain node type is needed, such as elements' properties, the node type is required to be dedicated. Watch all objects in the DOM tree as nodes can simplify operations. After remember this, let's take a specific look at what the DOM node structure will provide, first starting with the properties and methods.

Node's properties

Some properties and methods are required when using the DOM node, so we first discuss the properties and methods of nodes. The properties of the DOM node are mainly:

NodeName Report Name of Node (see hereina). NodeValue provides a "value" of nodes (see later described later). ParentNode returns the parent node of the node. Remember, each element, attribute, and text have a parent node. ChildNodes is a list of children's nodes in nodes. For HTML, the list is only meaningful for elements, and there is no child in text nodes and attribute nodes. Firstchild is just a shortcut to the first node in the ChildNodes list. Lastchild is another shortcut that represents the last node in the ChildNodes list. Previoussibling returns the node before the current node. In other words, it returns the node in front of the node in the ChildNodes list of the parent node of the current node (if confusing, rereading the previous sentence). NextSibling is similar to the Previoussibling property, returns the next node in the ChildNodes list of the parent node. Attributes is only used for element nodes, returns a list of properties of elements. Other minority properties are actually only used for more general XML documents, and there is not much place in processing HTML-based webpages.

Uttrand

The significance of most of the above properties is clear, except for NodeName and NodeValue properties. We don't simply explain these two properties, but two strange problems: What should the nodename of the text node? Similarly, what should the element NodeValue?

If these problems are difficult to take over, you have already understood the vague of these attributes. NodeName and NodeValue are actually not applicable to all node types (so that other minority properties of nodes). This illustrates an important concept: any of these properties may return null values ​​(sometimes called "undefined" in JavaScript). For example, the NodeName property of the text node is a null value (or is called "undefined" in some browsers) because there is no name in the text node. If you expect, NodeValue returns the text of the node.

Similarly, the elements have nodename, namely the element name, but the NodeValue attribute value of the element is always empty. Attributes have NodeName and NodeValue. The next section I will also discuss these individual types, but because these attributes are part of each node, it is necessary to mention here.

Take a look at the list 1, it uses some node properties.

Listing 1. Using the node properties in the DOM

// THESE FIRST TWO LINES GET THE DOM TREE for The Current Web Page,

// and daml> Element for That Dom Tree

Var myDocument = document;

Var htmlelement = myDocument.documentelement;

// What's the name of the Element? "Html"

Alert ("The Root Element of the Page IS" HTMLELEMENT.NODENAME);

// Look for the ELEMENT

Var headelement = htmlelement.getlementsBytagname ("Head") [0];

IF (headelement! = null) {

Alert ("We Found The Head Element, Named" HeadeElement.NodeName); // Print Out The title of the page

Var titleElement = headelement.getlementsBytagname ("Title") [0];

IF (titleElement! = null) {

// TEXT WILL BE FIRST CHILD NODE OF TITLE> ELEMENT

VAR Titletext = TitleElement.firstChild;

// we can get the text of the text node with nodevalue

Alert ("The page title is '" titleText.NodeValue "'");

}

// after IS

Var boodlelement = headelement.nextsibling;

While (BodyElement.nodeName.tolowerCase ()! = "body") {

BodyElement = bodyElement.nextsibling;

}

// We found the Element ...

// We'll Do More When We know Some Methods on the nodes.

}

Node method

Next, look at all nodes have a method (like the node properties, I omitted a few ways to actually do not apply to most HTML DOM operations):

INSERTBEFORE (NewChild, ReferenceNode) Put the NewChild node before the ReferenceNode. Remember, this method should be called for NewChild's target parent nodes. Replacechild (Newchild, Oldchild) replaces the OldChild node with the NewChild node. RemoveChild (Oldchild) removes the OldChild node from the node running the method. Appendchild (Newchild) Adds NewChild into the node running the function. NewChild is added to the end of the target node child list. HaschildNodes () returns true when you call the node of the method, otherwise returns false. Hasattributes () Returns true when calling the node of the method, otherwise returning false.

Note that all of these methods are handled in most cases. This is their main use. If you just want to get a text node value or an element name, you don't need to call these methods, you can use the node properties. Listing 2 Adds the method to use on the list 1.

Listing 2. Node method in DOM

// THESE FIRST TWO LINES GET THE DOM TREE for The Current Web Page,

// and daml> Element for That Dom Tree

Var myDocument = document;

Var htmlelement = myDocument.documentelement;

// What's the name of the Element? "Html"

Alert ("The Root Element of The Page IS" HTMLELEMENT.NODENAME); // Look for the Element

Var headelement = htmlelement.getlementsBytagname ("Head") [0];

IF (headelement! = null) {

Alert ("We Found The Head Element, Named" HeadeElement.NodeName);

//Print out the title of the page

Var titleElement = headelement.getlementsBytagname ("Title") [0];

IF (titleElement! = null) {

// TEXT WILL BE FIRST CHILD NODE OF TITLE> ELEMENT

VAR Titletext = TitleElement.firstChild;

// we can get the text of the text node with nodevalue

Alert ("The page title is '" titleText.NodeValue "'");

}

// after IS

Var boodlelement = headelement.nextsibling;

While (BodyElement.nodeName.tolowerCase ()! = "body") {

BodyElement = bodyElement.nextsibling;

}

// We found the Element ...

// Remove All the top-level Elements in The Body

IF (BodyElement.HaschildNodes ()) {

For (i = 0; i

Var currentnode = bodyElement.childNodes [i];

IF (currentnode.nodeename.tolowercase () == "img") {

BodyElement.RemoveChild (currentnode);

}

}

}

}

have a test!

At present, although only two examples, list 1 and 2, you should be able to learn what you can do with the DOM tree through these two examples. If you want to try this code, you only need to drag your list 3 into an HTML file and save it, and open it with a web browser.

Listing 3. HTML files containing JavaScript code using DOM