Dom model usage Summary-Reading Notes

Source: Internet
Author: User
In Ajax, the DOM model is actually the core structure and the infrastructure of all Ajax development. If there is no Dom model, no

When the page content is changed on the client side, all partial refresh and asynchronous requests cannot be implemented. Familiar with Dom Model

Technology, truly grasp the essence of Ajax development.
In the DOM model, the entire document is composed of multiple nodes at different levels. It can be said that the node represents all the content, each knot

Points can be regarded as the root node of a tree. The entire document is a recursive structure. Therefore, you have mastered the usage of nodes.

The usage of the DOM model. There are three types of nodes: Element nodes, text nodes, and attribute nodes. Each node is an object.
There are many ways to reference a node in the DOM model.
1. Use document. getelementbyid () to reference the node of the specified ID
In the htnl document, each tag can have an id attribute. The standard stipulates that this ID must be unique throughout the document.
2. Use document. getelementsbytagname () to reference the node with the specified tag name
This method can be used to obtain the set of element nodes with specified tags, and return an array containing references to these nodes.
3. Reference a subnode
Each node has a childnodes set attribute, which is an array object and represents a set of all child nodes of the node. These

Sub-nodes are arranged in the order they appear in the document. Therefore, you can access each sub-node at a time through an index. For example

The root node of the HTML document <HTML>. You can use the following code:
Document. childnodes [0];
The Document. childnodes [0]. childnodes [0]; // reference the Document. childnodes [1]. childnodes [1]; // reference the <body> node
In addition to the childnodes attribute, two attributes can be used to reference subnodes. They are:
Element. firstchild;
Element. lastchild;
They represent the first subnode and the last subnode respectively.
4. reference the parent node
The HTML node hierarchy is a tree structure. Apart from the root node, each node has only one parent node. You can

The parentnode attribute is referenced. The syntax is as follows:
Element. parentnode
5. Reference sibling nodes
Nodes at the same document level are called sibling nodes. Two attributes can be used for mutual reference between sibling nodes:
Element. nextsibling; // reference the previous sibling Node
Element. previussibling; // reference the next sibling Node
If the node does not have a sibling node, the property returns NULL. If you know that the current node is in the parent node collection, you can

The parentnode and childnodes attributes are used for mutual reference between sibling nodes. Generally, the following format can be used:
Element. parentnode. childnodes [index + 1]; // equivalent to nextsibling
Element. parentnode. childnodes [index-1]; // equivalent to previussibling

Get node Information
After obtaining the reference of a node, there are some methods to obtain the information of the node, which are described below.
1. Get the node name using the nodename attribute
Syntax:
Node. nodename;
For different node types, the return value of nodename is different:
(1) element node: return the tag name. For example, <span> </span> Returns "span"
(2) Property node: return the name of the property. For example, id = "span1" returns "ID"
(3) text node: return text content
2. Use the nodetype attribute to obtain the node type
Syntax:
Node. nodetype;
Corresponding to three types of nodes, nodetype Returns their types in the form of numbers:
(1) element node: return 1;
(2) attribute node: return 2;
(3) text node: return 3.
3. Use the nodevalue attribute to get the node Value
(1) element node: return NULL;
(2) attribute node: Return undefined;
(3) text node: return text content.
The nodevalue attribute can be viewed as specially set for text nodes.
4. Use haschildnodes () to determine whether a given node has a subnode
Syntax:
Node. haschildnodes ();
Returns whether a given node has a subnode. Returns true if at least one subnode exists. returns false if no subnode exists.

.
5. Use the tagname attribute to return the Tag Name of the element node.
This attribute is unique to an element node. It has the same return value as nodename, that is, the name of the returned tag.

Process attribute nodes
As a special node, attribute nodes are dependent on element nodes.
1. Get and set the attribute node Value
Each attribute node is an attribute of an element node and can be accessed as follows:
Element Node. attribute name
Imgnode = Document. getelementbyid ("img1 ");
Imgnode. src = "chinazk.gif ";
2. Use setattribute () to add an attribute
Syntax:
Elementnode. setattribute (attributename, attributevalue );
Where:
Elementnode is the node for adding attributes;
Attributename is the name of the attribute to be added;
Attributevalue is the attribute value.
This is a recommended method for adding attributes to Dom annotations. You can also add attributes using node names and attribute names.
3. Use the getattribute () method to obtain an attribute value.
Syntax:
Elementnode. getattribute (attributename );
Where:
Elementnode is the node for retrieving attributes.
Attributename is the name of the attribute to get the value.

Process text nodes
To obtain the text in a node, you can usually use the innerhtml attribute, for example:
Document. getelementbyid ("span1"). innerhtml;
The text in a node is a text node, so you can obtain its value through a common node processing method, for example:
Document. getelementbyid ("span1"). childnodes [0]. nodevalue;

Use innerhtml to change node content
In addition to the standard DOM method, the innerhtml attribute is well supported by most browsers for its flexibility.

. This attribute represents all the content between two HTML tags in the form of code. For example:
VaR div1 = Document. getelementbyid ("divtest ");
Alert (div1.innerhtml );
The innerhtml attribute is not limited to operations on a node, but can be used to directly fill the page with HTML fragments or directly obtain HTML fragments,

This greatly improves the flexibility of development.

Change the document hierarchy
1. Use the document. createelement method to create an element node
The syntax for creating an element node is as follows:
Document. createelement (elementname );
Here, document is the document object, and elementname is the Tag Name of the node to be created, for example:
VaR divelement = Document. createelement ("Div ");
2. Use the document. createtextnode method to create a text node
Syntax:
Document. createtextnode (text );
Text is the text value in the text node to be created. The text here is plain text and does not need to be escaped by HTML. For example:
Document. createtextnode ("<Hello> ");
When this text node is directly displayed, the angle brackets (<Hello>) are correctly displayed without HTML encoding.
3. Use the appendchild method to add nodes
After the node is created, it is not immediately attached to the document hierarchy. We can use the appendchild method and the insertbefore method.

Add to document. The appendchild method adds a node to all the child nodes of the referenced parent node.
Syntax:
Parentelement. appendchild (childelement );
Here, parentelement is the reference of the parent node, and childelement is the reference of the child node to be added. This method returns

Point reference. For example:
<DL id = "dl1">
<DT> dt1 </DT>
<DD> DD1 </DD>
</Dl>
<Script language = "JavaScript" type = "text/JavaScript">
VaR dl1 = Document. getelementbyid ("dl1 ");
VaR dd = Document. createelement ("DD ");
VaR Tn = Document. createtextnode ("dd2 ");
Dd. appendchild (TN );
Dl1.appendchild (dd );
</SCRIPT>

4. Use the insertbefore method to insert a subnode
The appendchild method can only add nodes to all child nodes, while the insertbefore method can insert nodes

Before the specified node.
Syntax:
Parentnode. insertbefore (newnode, referencenode );
Here, parentnode is the parent checkpoint; newnode is the new node to be inserted; referencenode is the existing node in the parent node

, The new node will be inserted before this node. This method returns the reference of the new node.
5. Replace the subnode with the replaceChild Method
This method can replace one node with another node.
Syntax:
Parentnode. replaceChild (newnode, oldnode );
Here, parentnode is the parent node, newnode is the node to be inserted, and oldnode is the replaced node. This method returns replaced

And the node does not exist in the document. The oldnode parameter must be a child node of the parentnode.
6. Use the clonenode method to copy nodes
This method copies a node to another location.
Syntax:
Node. clonenode (includechildren );
Node is the node to be copied, and includechiledren is a Boolean value, indicating whether to copy the child node. Return of this method

The value is the new node that is copied.
7. Delete the child node using the removechild Method
This method can be used to delete a subnode.
Syntax:
Parentnode. removechild (childnode );
Parentnode is the parent node and childnode is the child node to be deleted. This method returns the reference of the deleted subnode.

Table operations
In DHTML, a table is a table object, which consists of table row objects, and table rows are structured by cell objects.

. All row objects are arranged in a linear order in table objects, and all cells are arranged in a linear order in tables.

Row object. To reference a table unit, you must first obtain a reference to the table row object.
1. Create a table object
Example:
VaR _ TABLE = Document. createelement ("table ");
2. Add a row
Adding a row uses the insertrow method of the table object.
Syntax:
Table. insertrow (INDEX );
This method creates a new row and inserts it into the specified index of the table. This method returns a reference to the inserted row. Create a new row

The row object in the table does not contain any cells. It can be correctly displayed only after cells are added to the table.
3. Add Cells
Adding cells is the insertcell method that uses table row objects.
Syntax:
Tablerow. insertcell (INDEX );
This method creates a cell and inserts it into the specified index of the table row.
Example:
// Obtain the reference of the container Div
VaR Container = Document. getelementbyid ("tabletest ");
// Create a table object
VaR _ TABLE = Document. createelement ("table ");
// Set table attributes
_ Table. setattribute ("border", "1 ");
_ Table. setattribute ("bordercolor", "black ");
_ Table. setattribute ("width", "200 ");
// Create 5 rows
For (VAR I = 0; I <5; I ++ ){
VaR _ TR = _ table. insertrow (I );
// Create 4 columns
For (var j = 0; j <4; j ++ ){
VaR _ TD = _ tr. insertcell (j );
VaR _ Tn = Document. createtextnode (I. tostring () + J. tostring ());
_ TD. appendchild (_ Tn );
}
}
// Display the table and page
Container. appendchild (_ table );
4. Reference Cells
After a cell is created, in addition to directly obtaining a reference to it, you can also reference

This is done through the row set attribute rows of the table object and the cell set attribute cells of the table row object. For example

Reference a row I. The cell in column J can use the following syntax:
Table. Rows. Cells [J];
5. Use cell objects
You can operate on a cell after obtaining its reference. Any element can be added to a cell using the appendchild method.

. For example:
VaR cb = Document. createelement ("input ");
CB. type = "checkbox ";
_ Table. Rows [0]. cells [0]. appendchild (CB );
6. Delete rows and cells
Delete rows and cells
Syntax for deleting rows:
Table. deleterow (INDEX );
Syntax for deleting cells:
Tablerow. deletecell (INDEX );

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.