Home > Developer > JavaScript
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
as mentioned in the beginning, DHTML is essentially an operation DOM tree. How to operate it?
if I want to change the text of the DIV node in the preceding HTML document, what should I do? [Code]
never-Online's website
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 the HTML written on itCodeWhen you use the <> and </> packet, it 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 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.
never-Online's website
<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
