First, what is DOM?
What is called Dom,dom is the Document Object model, which is a set of API interfaces based on browser programming (in this tutorial, which can be said to be DHTML programming), the recommended standards for the Web, and each browser has some subtle differences, Among them, Mozilla's browser is closest to the standard. Simple JavaScript can be combined with DOM to do DHTML programming to make beautiful effects and apply to the Web. This is almost the same as any other language, just as C + + requires library support. Otherwise, it is a purely grammatical study.
Therefore, you must have a certain understanding of the DOM in order to apply JavaScript to the Web, or your RIA application, because DHTML is essentially manipulating the DOM tree.
In the future programming, I hope you can take dhtml.chm this manual also take, if you need to be compatible with Gecko, put Gecko Dom manual also. Because there are too many APIs, the interface you can't remember can be found in this manual. If you want to test whether the browser is DOM-enabled, a simple sentence can be used to determine
<script>
var issupportdom =!! document.getElementById; Two inversion, which has been said in the previous section, means forced transformation
Alert ("Your browser" + (issupportdom? "": "No") + "support dom! ");
</script>
Second, Dom tree
Note: The root of the DOM tree is unified for the document root-document,dom since it is a tree structure, then they naturally have the following kinds of relationships:
root node (document)
Parent node (parentnode)
Sub-node (childNodes)
Brother Knot, Brother knot.
(sibling) (sibling)
Example:
Suppose the HTML for the page is as follows
Program code
<title>never-online ' s website</title>
<body>
<div>tutorial of DHTML and JavaScript programming</div>
</body>
We draw the DOM tree of the HTML document structure by referring to the concept of the tree:
Html
Body Head
Div title
Text text
As you can see from the illustration above
HTML has two sub-nodes, and HTML is the parent node of these two children
Head has a node Title,title a text node
There is a text node under the body under the Div,div node
Third, manipulate the DOM tree
As the beginning has said, DHTML is essentially manipulating the DOM tree. How does it work?
Suppose I want to change the text of the DIV node in the HTML document above, how do I do it?
Program code
<title>never-online ' s website</title>
<script>
function Changedivtext (strText) {
var noderoot = document; This is a root knot.
var nodehtml = noderoot.childnodes[0]; This is the 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 property, we can change this property, and we have successfully manipulated a node in the DOM tree.
}
</script>
<body>
<div>tutorial of DHTML and JavaScript programming</div>
<input onclick= "Changedivtext (' Change? ')" type= "button" value= "Change"/>
</body>
As can be seen from the above example, we can manipulate any node on the DOM tree in this way. (Note: 1.) Cross-domain except, cross-domain is usually on the operation frame, simply speaking, is two frame does not belong to the same domain name. 2. Above operation in order to demonstrate, the method used is from the root node to the text node traversal, in the DOM method, there is a more concise method, which will be more examples to explain later, also described below.
Four, Dom node.
A careful friend may have found that the HTML code written in the above with <> and </> package is a node, in fact, is this? The answer is in the negative. The following is the node type, otherwise it will make mistakes in some cases. For example, if you put the above code in Mozilla Firefox's browser to run it, you will know.
There are many node types in the DOM, some of which are common in HTML documents (Note: XML is also a DOM tree structure).
1, Document_node
Document root node type, the value of this enumerated type is 9.
2, Element_node
element node type, the value of which is 1. Above the HTML, body, div these nodes belong to that type.
3, Text_node
(text) literal node type, the value of which is 3. The text above, such as: Tutorial of DHTML and JavaScript programming is the type that belongs to.
(Note: A space can also be a text node.)
It is often more important to note that a text node is possible, a carriage return, and a space is a text node. This point will encounter, of course, we also have the means to deal with, here first do not worry, will also be said in the future.
V. Common APIs for DOM
These commonly used APIs are to be written down, of course, in non-IE browser will also be effective, is consistent with the Internet. These APIs are often used in future programming. As with the API provided by each programming platform, it is often important to write down and save time to improve programming efficiency. Write only a few of the most common, and other APIs will be written in a later example. From shallow and deep, from easy to difficult.
1. Get Element_node, Element node
1), Method: document.getElementById (the ID of the element), the return value is the node reference of the element. You can imagine the principle of this API: As we have done is to traverse each node (from the root to our desired node), this API can also be thought of as a traversal from the root, query each node (except for the blank node and empty node), and get the ID of the node is the specified ID, if so, Return this node (note: In JS, arrays and objects are reference types), and if not, return null. 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.
<title>never-online ' s website</title>
<script>
function Mygetelementbyid (ID) {
var noderoot = document; This is a root knot.
var nodehtml = noderoot.childnodes[0]; This is the HTML node.
var nodebody = nodehtml.childnodes[1]; Body node.
var bodychild = nodebody.childnodes; Body of the child
for (var i=0; i< bodychild.length; i++) {//Simple traversal (refers to the body of the child under the depth of 1)
if (Bodychild[i].id==id) return bodychild[i];
};
return null;
}
function Testgetelementbyid (ID) {
var node = Mygetelementbyid (ID);
if (node!=null) {
Alert ("Find junction" +id+ "!");
alert (node.childnodes[0].data);
} else {
Alert ("No nodes Found" +id+ ");
}
}
</script>
<body>
<div id= "Atestnode" ></div>
<div id= "Textnode" >tutorial of DHTML and JavaScript programming</div>
<input onclick= "Testgetelementbyid (' Textnode ')" type= "button" value= "Change"/>
</body>
2), attribute: object.innerhtml, return value: The HTML value within a node. This property is a writable property. It's not a node, but it's often combined with a get node, so I put it in the Get node category, and its properties are similar to data in the Plain text node properties. Take the two APIs, document.getElementById and object.innerhtml, for example,
We can simplify the code written above, as shown in the following example:
<title>never-online ' s website</title>
<script>
function Changedivtext (strText) {
var node = document.getElementById ("Textnode");
node.innerhtml = StrText;
}
</script>
<body>
<div id= "Textnode" >tutorial of DHTML and JavaScript programming</div>
<input onclick= "Changedivtext (' Change? ')" type= "button" value= "Change"/>
</body>
3), Method: Object.getelementsbytagname (name of the tag), returns a collection that has elements that have the specified label. Access to the elements in the collection can be accessed using subscripts. The object in the syntax refers to the document (root) or a element_node. Example of this principle I will not write, as a job, you can write. Write some specific applications here. As in the above example, we can also write this.
<title>never-online ' s website</title>
<script>
function Changedivtext (strText) {
var node = document.getelementsbytagname ("DIV");
node[0].innerhtml = StrText;
}
</script>
<body>
<div>tutorial of DHTML and JavaScript programming</div>
<input onclick= "Changedivtext (' Change? ')" type= "button" value= "Change"/>
</body>
Take one more example and note that the node depth under the body is 2.
<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>
<body>
<div id= "NodeTest" >
<div>tutorial of DHTML and JavaScript programming</div>
<input onclick= "Changedivtext (' Change? ')" type= "button" value= "Change"/>
</div>
</body>
2. Dynamic creation and insertion of nodes
1), create the Node object. Document.createelement (tagname), tagname refers to a tag, such as a Div, which is document.createelement ("div"),
It returns a reference to this node.
2), at the end of body insert node with Document.body.appendChild (object), in order to easily understand, the following example, I used the IE proprietary properties
object.outerhtml, get an HTML tag content for that element (including itself), which makes it easier to see the effect.
<title>never-online ' s website</title>
<script>
function Insertnode (strText) {
Alert ("Body HTML before inserting element:" +document.body.outerhtml);
var node = document.createelement ("DIV");
node.innerhtml = StrText;
Document.body.appendChild (node);
Alert ("Body HTML after inserting the element:" +document.body.outerhtml);
}
</script>
<body>
<div>tutorial of DHTML and JavaScript programming</div>
<input onclick= "Insertnode (' Change? ')" type= "button" value= "Change"/>
</body>
3), insert the node at the element. Object.insertbefore (Onewnode [, Ochildnode]), Onewnode is a node that we create, Ochildnode is optional and is a child node under object. Similarly, in order to see the effect, I also used the outerhtml. Example
<title>never-online ' s website</title>
<script>
function Insertnode (strText) {
Alert ("Body HTML before inserting 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 inserting the element:" +document.body.outerhtml);
}
</script>
<body>
<div id= "Textnode" >tutorial of DHTML and JavaScript programming</div>
<input onclick= "Insertnode (' Change? ')" type= "button" value= "Change"/>
</body>
3, remove the node.
1) object.parentNode.removeChild (Ochildnode), this is the syntax, see the example below.
<title>never-online ' s website</title>
<script>
function Insertnode (strText) {
Alert ("Body HTML before inserting 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 inserting the element:" +document.body.outerhtml);
}
function Removecreatenode () {
Alert ("Body HTML before removing the element:" +document.body.outerhtml);
var node = document.getElementById ("Textnode");
Node.parentNode.removeChild (node);
Alert ("Body HTML before removing the element:" +document.body.outerhtml);
}
</script>
<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>
Like the parentnode and parentelement functions, childnodes and children function the same. But ParentNode and ChildNodes are in line with the standard, can be said to be more general. And the other two just IE support, not the standard, Firefox does not support
Python Route 16
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
