Home > Developer > JavaScript
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:
<Html>
<Head>
<Title> never-online's website </title>
</Head>
<Body>
<Div> tutorial of DHTML and javascript programming </div>
</Body>
</Html>
Draw the DOM tree of the HTML document structure by referring to the concept of the tree:
Html
Body head
Div 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 div under doby, and a text node under div.
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 div node in the above HTML document, how can I do this? [Code] <Head>
<Title> never-online's website </title>
<Script>
Function changedivText (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>
</Head>
<Body>
<Div> tutorial of DHTML and javascript programming </div>
<Input onclick = "changedivText ('change? ') "Type =" button "value =" change "/>
</Body>
</Html>
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.
A careful friend may have discovered that when writing the HTML code above, the <> and </> packages are a node. Is this actually the case? 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 div 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.
<Html>
<Head>
<Title> never-online's website </title>
<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 <bodyChild. length; I ++) {// simple traversal (the depth of the child under the body is 1)
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>
</Head>
<Body>
<Div id = "aTestNode"> </div>
<Div id = "textNode"> tutorial of DHTML and javascript programming </div>
<Input onclick = "TestGetElementById ('textnode')" type = "button" value = "change"/>
</Body>
</Html>
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:
<Html>
<Head>
<Title> never-online's website </title>
<Script>
Function changedivText (strText ){
Var node = document. getElementById ("textNode ");
Node. innerHTML = strText;
}
</Script>
</Head>
<Body>
<Div id = "textNode"> tutorial of DHTML and javascript programming </div>
<Input onclick = "changedivText ('change? ') "Type =" button "value =" change "/>
</Body>
</Html>
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.
<Html>
<Head>
<Title> never-online's website </title>
<Script>
Function changedivText (strText ){
Var node = document. getElementsByTagName ("DIV ");
Node [0]. innerHTML = strText;
}
</Script>
</Head>
<Body>
<Div> tutorial of DHTML and javascript programming </div>
<Input onclick = "changedivText ('change? ') "Type =" button "value =" change "/>
</Body>
</Html>
Take another example. Note that the depth of the node under the BODY is 2.
<Html>
<Head>
<Title> never-online's website </title>
<Script>
Function changedivText (strText ){
Var node = document. getElementById ("nodeTest ");
Var myNode = node. getElementsByTagName ("DIV ");
MyNode [0]. innerHTML = strText;
}
</Script>
</Head>
<Body>
<Div id = "nodeTest">
<Div> tutorial of DHTML and javascript programming </div>
<Input onclick = "changedivText ('change? ') "Type =" button "value =" change "/>
</Div>
</Body>
</Html>
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.
<Html>
<Head>
<Title> never-online's website </title>
<Script>
Function insertNode (strText ){
Alert ("body HTML before inserting an element: \ n" + document. body. outerHTML );
Var node = document. createElement ("DIV ");
Node. innerHTML = strText;
Document. body. appendChild (node );
Alert ("body HTML after element insertion: \ n" + document. body. outerHTML );
}
</Script>
</Head>
<Body>
<Div> tutorial of DHTML and javascript programming </div>
<Input onclick = "insertNode ('change? ') "Type =" button "value =" change "/>
</Body>
</Html>
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
<Html>
<Head>
<Title> never-online's website </title>
<Script>
Function insertNode (strText ){
Alert ("body HTML before inserting an element: \ n" + 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 element insertion: \ n" + document. body. outerHTML );
}
</Script>
</Head>
<Body>
<Div id = "textNode"> tutorial of DHTML and javascript programming </div>
<Input onclick = "insertNode ('change? ') "Type =" button "value =" change "/>
</Body>
</Html>
3. Remove a node.
1) object. parentNode. removeChild (oChildNode). This is the syntax. See the example below.
<Html>
<Head>
<Title> never-online's website </title>
<Script>
Function insertNode (strText ){
Alert ("body HTML before inserting an element: \ n" + 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 element insertion: \ n" + document. body. outerHTML );
}
Function removeCreateNode (){
Alert ("body HTML: \ n" + document. body. outerHTML before removing an element );
Var node = document. getElementById ("textNode ");
Node. parentNode. removeChild (node );
Alert ("body HTML: \ n" + document. body. outerHTML before removing an element );
}
</Script>
</Head>
<Body>
<Div id = "textNode"> tutorial of DHTML and javascript programming </div>
<Input onclick = "insertNode ('change? ') "Type =" button "value =" insert "/>
<Input onclick = "removeCreateNode ()" type = "button" value = "remove"/>
</Body>
</Html>
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
