One, what is DOM?
What do you mean Dom,dom is the Document Object model, a set of API interfaces that are based on browser programming (in this tutorial, DHTML programming), the recommended standards for the Web, and each browser has some subtle differences, One of Mozilla's browsers is closest to the standard. Simple JavaScript can be used to make DHTML programming with DOM in order to make a beautiful effect and apply it to the Web. This is almost the same as any other language, just as C + + requires library support. Otherwise, it is simply to do research in grammar. Therefore, you must have some knowledge of the DOM to apply JavaScript to the Web, or to your RIA application, because DHTML is essentially manipulating the DOM tree.
Later in the program, I hope you will be able to take dhtml.chm this manual also, if you need to be compatible with Gecko, put the Gecko Dom manual also. Because the API is too many, can not think of the interface may also look up this manual.
If you want to test whether the browser is support DOM, a simple sentence can be judged
<script>
var issupportdom =!! document.getElementById; Two, which has been said in the last section, means forced transformation.
Alert ("Your browser" + (issupportdom? "": "No") + "support dom! ");
</script>
Second, the DOM tree
Note that the root of the DOM tree is unified as a document root-document,dom since they are tree-like structures, they naturally have several relationships as follows:
root node (document)
Parent node (parentnode)
Child nodes (ChildNodes)
Brother Knot, Brother knot.
(sibling) (sibling)
Example:
Suppose the HTML of the page is as follows
<title>never-online ' s website</title>
<body>
<div>tutorial of DHTML and JavaScript programming</div>
</body>
We refer to the tree concept and draw the DOM tree of the HTML document structure:
Html
Body Head
Div title
Text text
You can see from the diagram above
HTML has two child nodes, and HTML is the parent node of these two subnodes
There is a text node under the head node Title,title
There is a text node under the Doby node Div,div
Iii. manipulating the DOM tree
The beginning has already said that the nature of DHTML is manipulating the DOM tree. How do you manipulate it?
Suppose I want to change the text of the DIV node in the HTML document above, how do I do it? [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 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 property of data, so we can change this property and successfully manipulate 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 you can see from the example above, we can manipulate any node on the DOM tree in this way. (Note: 1.) Except for Cross-domain, the cross-domain is usually on the action frame, simply put, two frame does not belong to the same domain name. 2. The above operation in order to demonstrate, using the method is from the root node to the text node traversal, in the DOM method, there are more concise methods, which will be more examples later, described below will also be introduced.
Three, DOM nodes.
Careful friends may have found that the HTML code written above with <> and </> package is a knot, in fact, is this? The answer is in the negative. Here is the node type, otherwise it will make mistakes in some cases. For example, if you put the above code in a Mozilla Firefox browser and run it, you'll find out.
There are more node types in the DOM, and here are a few types of nodes that are common in HTML documents (Note: XML is also a DOM tree structure).
1, Document_node
Document root node type, which has a value of 9.
2, Element_node
(element) Element node type, the value of the enum type is 1. Above the HTML, body, div These nodes are all belong to the type.
3, Text_node
(text) text node type, the value of which is 3. The text above, such as: Tutorial of DHTML and JavaScript programming, is the type.
(Note: A space can also be a text node.)
Usually more attention is the text node, there is a possibility of a carriage return, a space is a text node. This point will be met, of course, we also have the means to deal with, here first do not worry, will also be said.
Four, Dom common API
These commonly used APIs are to be written down, of course, in non-IE browsers will also be effective, is consistent with the Internet. These APIs are often used in future programming. As with the APIs provided by each programming platform, common needs to be written down to save time and improve programming efficiency. Write only a few of the most commonly used, and other APIs will be written in a later example. From the 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 element's node reference. You can imagine the principle of this API: as we've done above, we're traversing each node (from the root to our desired node), this API can also be thought of as traversing from the root, querying each node (except for blank nodes and empty nodes), and getting the ID of the node as the specified ID, if so, Return this node (note: In JS, the array and object are reference types), if not, return null. We can write this code to help us understand document.getElementById. Here 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 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 the Node" +id+ "!");
alert (node.childnodes[0].data);
} else {
Alert ("Failed to find node" +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: HTML value within a node. This property is a writable property. It's not getting the node, but it's often combined with getting the node, so I put it in the Get-node category, whose properties are similar to the data in the Plain text node attribute. Taking the two APIs document.getElementById and object.innerhtml as examples, 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 (the name of the label), returns a collection, the set of elements are the elements of the specified label. Access to the elements in the collection, which can be accessed by subscript. The object in the grammar refers to the document (root) or a element_node. The principle of this example I will not write, can be used as a job, you can write. Write some specific applications here. As 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>
To take another example, 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>
Ii. dynamic creation and insertion of nodes
1), create the Node object. Document.createelement (tagname), tagname refers to a tag, such as a Div, is document.createelement ("div"), which returns the reference to this node.
2), at the end of the body Insert node with Document.body.appendChild (object), in order to be easy to understand, the following example, I used ie proprietary attribute object.outerhtml to get an HTML tag for the element (including itself), which makes it easier to see the effect.
<title>never-online ' s website</title>
<script>
function Insertnode (strText) {
Alert ("Body html:\n before inserting elements" +document.body.outerhtml);
var node = document.createelement ("DIV");
node.innerhtml = StrText;
Document.body.appendChild (node);
Alert ("Body html:\n after inserting 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 point. Object.insertbefore (Onewnode [, Ochildnode]), Onewnode for a node we created, Ochildnode is optional, 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:\n before inserting elements" +document.body.outerhtml);
var node = document.createelement ("DIV");
var mynode = document.getElementById ("Textnode");
node.innerhtml = StrText;
Document.body.insertBefore (Node,mynode);
Alert ("Body html:\n after inserting 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>
Third, 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:\n before inserting elements" +document.body.outerhtml);
var node = document.createelement ("DIV");
var mynode = document.getElementById ("Textnode");
node.innerhtml = StrText;
Document.body.insertBefore (Node,mynode);
Alert ("Body html:\n after inserting element" +document.body.outerhtml);
}
function Removecreatenode () {
Alert ("Body html:\n before removing elements" +document.body.outerhtml);
var node = document.getElementById ("Textnode");
Node.parentNode.removeChild (node);
Alert ("Body html:\n before removing elements" +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>
This section is written here, the next section we can use these simple APIs to do a lot of things, several APIs can write a lot of results. :D
