Ajax Learning (2)-dom web response

This article is very basic, but very underlying. 1. simple HTML page
1 Tree View

Object Value

Now that you understand some basic terms, you should take a look at the small rectangle containing the element name and text (figure 1 ). Each rectangle is an object. The browser solves some text problems. By using objects to represent each part of an HTML document, you can easily change the organization, apply the style, and allow JavaScript to access the document.

Object Type and attribute

Each possible type of the tag has its own object type. For exampleElementObject type. Text in the documentTextType.AttributeType, and so on.

Therefore, Web browsers can not only use object models to represent documents (thus avoiding static text processing), but also use object types to immediately identify what a thing is. The HTML document is parsed and converted to an object set, as shown in Figure 1. Then, angle brackets and escape sequences (for example, use<Indicates<, Use>Indicates>. This makes it easier for the browser to work (at least after parsing the input html. It is easy to find out whether a thing is an element or an attribute and determine how to process the type of object.

By using objects, Web browsers can modify the attributes of these objects. For example, each element object has a parent element and a series of child elements. Therefore, to add a new child element or text, you only need to add a new child element to the child element list of the element. These objects also havestyleSo it is very easy to quickly change the style of an element or text segment. For example, to use JavaScript to changedivIs as follows:

someDiv.style.height = "300px";

In other words, Web browsers can easily change the tree's appearance and structure by using object properties. It is similar to the complex things that must be performed when the browser internally expresses the page as text. Every time you change the attribute or structure, the browser needs to re-compile the static file, re-parse the file, and re-display it on the screen. With the object, all this is done.

Introduction to Dom

So far, you know that the browser converts a web page to an object representation. You may even guess that the object representation is a DOM tree. Dom indicates the Document Object Model, which is a standard and can be obtained from the World Wide Web Consortium (W3C) (see some Dom-related links in references ).

But more importantly, Dom defines the object type and attributes, allowing the browser to indicate the tag. (The next article in this series will detail how to use DOM in JavaScript and Ajax code .)

Document Object

First, you need to access the object model itself. This is very easy; use built-in in any JavaScript code running on the web pagedocumentVariable, you can write the following code:

var domTree = document;

Of course, this code is useless, but it demonstrates that every web browser makesdocumentThe object can be used in JavaScript code and demonstrates the complete tree of the object that represents the mark (figure 1 ).

Each item is a node

Apparently,documentObjects are very important, but this is just the beginning. Before further exploration, you need to learn another term:Node. You already know that each part of the tag is represented by an object, but it is not just an arbitrary object, it is a specific type of object, a DOM node. More specific types, such as text, elements, and attributes, all inherit from this basic node type. Therefore, there can be text nodes, element nodes, and attribute nodes.

If you already have a lot of JavaScript programming experience, you may already be using Dom code. If you have been tracking this Ajax series so farYesDom code has been used for some time. For example, the code linevar number = document.getElementById("phone").value;Use the Dom to search for a specific element and then retrieve the value of the element (in this example, it is a form field ). So even if you are not aware of thisdocumentDom is used when you type JavaScript code.

To explain in detail the terms that have been learned, the DOM tree is the object tree, but more specifically, it isNodeObject Tree. In Ajax applications or any other JavaScript, these nodes can be used to produce the following effects, such as removing elements and their content, highlighting specific text, or adding new image elements. Because it occurs on the client (the code running in the Web browser), these effects happen immediately without communicating with the server. The final result is usually that the application feels faster, because content changes on the Web page do not pause for a long time when the request is redirected to the server and the response is interpreted.

In most programming languages, you need to learn the actual object names of each node type, learn available attributes, and clarify the types and forced conversions. However, this is not necessary in JavaScript. You can create only one variable and assign it the object you want (as you can see ):

var domTree = document; var phoneNumberElement = document.getElementById("phone"); var phoneNumber = phoneNumberElement.value;

No type. Javascript creates variables as needed and assigns them the correct type. This is also a simple js to get Dom elements.