Javascript & amp; DHTML instance programming (Tutorial) DOM basics and basic APIs 1. What is DOM?
What is DOM? DOM is a Document Object Model (Document Object Model), a set of API Interfaces Based on browser programming (in this tutorial, it can be said that it is DHTML programming). W3C introduces the Recommendation Standard, each browser has some subtle differences, with Mozilla's browser closest to the standard. Javascript alone must be combined with DOM to do DHTML programming, in order to make beautiful results and apply them to the WEB. This is almost the same as other languages, just as C/C ++ requires database support. Otherwise, we simply studied the syntax. Therefore, you must have a certain understanding of DOM to apply Javascript to the WEB or your RIA application, because DHTML is essentially an operation on the DOM tree.
In future programming, we hope you can also include the DHTML. chm manual. If you need to be compatible with gecko, you can also include the gecko DOM manual. Because there are too many APIs, you can check this manual for interfaces you cannot think.
If you want to test whether the browser supports DOM, you can simply judge
Script
Var isSupportDOM = !! Document. getElementById; // the inverse of the two elements. This is already mentioned in the previous section, which indicates forced transformation.
Alert ("your browser" + (isSupportDOM? "": "No") + "supports DOM! ");
Script
Ii. DOM tree
Note: the root of the DOM tree is the document root-document. since DOM is a tree structure, they naturally have the following relationships:
Root Node (document)
Parent node)
Child node (childNodes)
Sibling Node
(Sibling)
Example:
Assume that the HTML of the webpage is as follows:
Never-online's website
Tutorial of DHTML and javascript programming
Draw the DOM tree of the HTML document structure by referring to the concept of the tree:
Html
Body head
P title
Text
As shown in the figure above
Html has two child nodes, and html is the parent node of the two child nodes.
Head has a node title, and title has a text node.
There is a node p under doby and a text node under p.
3. Operate the DOM tree
The beginning has already said that the essence of DHTML is to operate the DOM tree. How to operate it?
Suppose I want to change the text of the p node in the preceding HTML document. How can I do this? [Code]
Never-online's website
Script
Function changepText (strText ){
Var nodeRoot = document; // This is the root node
Var nodeHTML = nodeRoot. childNodes [0]; // This is an html node.
Var nodeBody = nodeHTML. childNodes [1]; // body Node
Var nodeDiv = nodeBody. childNodes [0]; // DIV Node
Var nodeText = nodeDiv. childNodes [0]; // text node'
NodeText. data = strText; // The text node has the data attribute. Therefore, we can change this attribute to operate a node in the DOM tree.
}
Script
Tutorial of DHTML and javascript programming
As shown in the preceding example, we can use this method to operate any node on the DOM tree. (Note: 1. Except cross-origin, cross-origin is usually performed on the frame. Simply put, two frames do not belong to the same domain name. 2. in order to demonstrate the above operations, the method used is to traverse from the root node to the text node. There are more concise methods on the DOM method, and more examples will be provided in the future, this topic will also be introduced below)
3. DOM nodes.
Careful friends may find that when writing the HTML code above, using the <> package is a node. Is it actually like this? The answer is no. The following describes the node type. Otherwise, mistakes may occur. For example, you can run the above Code in the Mozilla firefox browser.
There are many types of nodes in the DOM. Here we write some common node types in HTML documents (Note: XML is also a DOM tree structure.
1. DOCUMENT_NODE
(Document) document root node type. The enumerated value is 9.
2. ELEMENT_NODE
(Element) element node type. The enumerated value is 1. All the preceding html, body, and p nodes belong to this type.
3. TEXT_NODE
(Text) text node type. The enumerated value is 3. The text above, such as tutorial of DHTML and javascript programming, belongs to this type.
(Note: A Space may also be a text node)
Generally, you need to pay more attention to the text node. A carriage return may be used, and a space is the text node. This will happen in the future. Of course, we also have a solution. Don't worry about it here, and we will talk about it later.
4. Common DOM APIs
These common APIs should be noted down. Of course, they will also be valid in non-IE browsers and are in line with w3c. These APIs are often used in future programming. Just like the APIS provided by each programming platform, you must write them down frequently to save time and improve programming efficiency. Write only a few of the most commonly used APIs. Other APIs will be written in future examples. From shallow to deep, from easy to difficult.
1. Obtain ELEMENT_NODE, Element Node
1) method: document. getElementById (element Id). The returned value is the node reference of the element. Imagine the principle of this API: as we have done above, we can traverse each node (from the root to the node we need). This API can also be thought of as traversing from the root, query each node (except blank and empty nodes) and obtain whether the node id is a specified ID. If yes, return this node (Note: In JS, array and object are of reference type). If not, null is returned. We can write this code to help us understand document. getElementById. The following is an example of a simple traversal of elements in the BODY.
Never-online's website
Script
Function myGetElementById (id ){
Var nodeRoot = document; // This is the root node
Var nodeHTML = nodeRoot. childNodes [0]; // This is an html node.
Var nodeBody = nodeHTML. childNodes [1]; // body Node
Var bodyChild = nodeBody. childNodes; // the child of the body
For (var I = 0; I If (bodyChild [I]. id = id) return bodyChild [I];
};
Return null;
}
Function TestGetElementById (id ){
Var node = myGetElementById (id );
If (node! = Null ){
Alert ("find node" + id + "! ");
Alert (node. childNodes [0]. data );
} Else {
Alert ("no node found" + id + ".");
}
}
Script
Tutorial of DHTML and javascript programming
2) attribute: object. innerHTML. Return Value: the HTML value in a node. This attribute is writable. Although it is not a get node, it is often combined with get nodes, so I put it in the get node class, its attributes are similar to the data in the plain text node attribute. Taking the document. getElementById and object. innerHTML APIs as examples, we can simplify the code written above, for example:
Never-online's website
Script
Function changepText (strText ){
Var node = document. getElementById ("textNode ");
Node. innerHTML = strText;
}
Script
Tutorial of DHTML and javascript programming
3) method: object. getElementsByTagName (Tag Name). A set is returned. All elements in the set are elements with specified tags. You can use subscript to access the elements in the set. The object in the syntax refers to the document (Root) or an ELEMENT_NODE. I will not write this example. You can write it as a job. Here are some specific applications. For the above example, we can also write it like this.
Never-online's website
Script
Function changepText (strText ){
Var node = document. getElementsByTagName ("DIV ");
Node [0]. innerHTML = strText;
}
Script
Tutorial of DHTML and javascript programming
Take another example. Note that the depth of the node under the BODY is 2.
Never-online's website
Script
Function changepText (strText ){
Var node = document. getElementById ("nodeTest ");
Var myNode = node. getElementsByTagName ("DIV ");
MyNode [0]. innerHTML = strText;
}
Script
Tutorial of DHTML and javascript programming
Ii. dynamically create and insert nodes
1) create a Node object. Document. createElement (tagname) refers to a tag. For example, a DIV is document. createElement ("DIV"), which returns a reference to this node.
2) Insert a node at the end of the body using document. body. appendChild (object), for ease of understanding, the following example uses the proprietary attribute object of IE. outerHTML to get the HTML Tag content of the element (including its own), which makes it easier to see the effect.
Never-online's website
Script
Function insertNode (strText ){
Alert ("body HTML before inserting an element:" + document. body. outerHTML );
Var node = document. createElement ("DIV ");
Node. innerHTML = strText;
Document. body. appendChild (node );
Alert ("body HTML after the element is inserted:" + document. body. outerHTML );
}
Script
Tutorial of DHTML and javascript programming
3) insert a node to the element. Object. insertBefore (oNewNode [, oChildNode]). oNewNode is a node we have created. oChildNode is optional and is a subnode under the object. Similarly, I used outerHTML to see the effect. Example
Never-online's website
Script
Function insertNode (strText ){
Alert ("body HTML before inserting an element:" + document. body. outerHTML );
Var node = document. createElement ("DIV ");
Var myNode = document. getElementById ("textNode ");
Node. innerHTML = strText;
Document. body. insertBefore (node, myNode );
Alert ("body HTML after the element is inserted:" + document. body. outerHTML );
}
Script
Tutorial of DHTML and javascript programming
3. Remove a node.
1) object. parentNode. removeChild (oChildNode). This is the syntax. See the example below.
Never-online's website
Script
Function insertNode (strText ){
Alert ("body HTML before inserting an element:" + document. body. outerHTML );
Var node = document. createElement ("DIV ");
Var myNode = document. getElementById ("textNode ");
Node. innerHTML = strText;
Document. body. insertBefore (node, myNode );
Alert ("body HTML after the element is inserted:" + document. body. outerHTML );
}
Function removeCreateNode (){
Alert ("body HTML before removing an element:" + document. body. outerHTML );
Var node = document. getElementById ("textNode ");
Node. parentNode. removeChild (node );
Alert ("body HTML before removing an element:" + document. body. outerHTML );
}
Script
Tutorial of DHTML and javascript programming
This section is written here first. In the next section, we can use these simple APIs to do many things, and several APIs can write a lot of results. : D
