Home > Developer > JavaScript
I. Use dom
Consider an HTML file: <HTML>
<Head> <title> test </title> <Body>
<P> test </P>
</Body>
</Html>
1. access nodes:
Access HTML element: var ohtml#document.doc umentelement;
Get the head element: var ohead = ohtml. firstchild;
Get the body element: var obody = ohtml. lastchild; or var obody = Document. Body;
You can also use childnodes to do the same job:
VaR ohead = ohtml. childnodes [0] Or ohtml. childnodes. Item (0 );
VaR obody = ohtml. childnodes [1] Or ohtml. childnodes. Item (1 );
Determine the relationship between nodes: Alert (ohead. parentnode = ohtml );
Alert (obody. previussibling = ohead );
Alert (ohead. nextsibling = obody );
Alert (ohead. ownerdocument = document );
2. Check node type:
The node type is verified by the nodetype attribute of the node:
Alert (document. nodetype); // output 9
Note that Dom-compatible browsers (taking ff2.0 as an example) have constants such as node. document_node and node. element_node. The constant names and values are as follows: element_node 1
Attribute_node 2
Text_node 3
Cdata_section_node 4
Entity_reference_node 5
Entity_node 6
Processing_instrction_node 7
Comment_node 8
Document_node 9
Document_type_node 10
Document_fragment_node 11
Notation_node 12
IE6 is not supported, but you can customize a JS object node.
3. Processing Features
You can use the methods in the standard namenodemap for processing features:
Getnameditem (name) removenameditem (name) setnameditem (node) item (POS)
For example: <p id = "test"> test </P>
Assume that the variable op is referenced by the above P node. We want to access the ID attribute of OP:
VaR SID = op. Attributes. getnameditem ("ID"). nodevalue;
These methods are cumbersome to use, so Dom defines three more methods to simplify:
Getattribute (name) -- returns the value of the attribute named name.
Setattribute (name, value) -- as the name suggests
Removeattribute (name) -- as the name suggests
The preceding example can be rewritten:
VaR SID = op. getattribute ("name ");
4. Access a specified node:
The well-known getelementbytagname (name), getelementbyname (name), and getelementbyid (ID) methods are not expanded.
5. create and operate nodes:
(1) create a new node, a comparison table supported by IE (6.0) and FF for Dom level1 to create a new Node Method: Method ie FF
Createattribute (name) y
Createcdatasection (text) n y
Createcomment (text) y
Createdocumentfragment () y
Createelement (tagname) y
Createentityreference (name) n y
Createprocessinginstruction (
Target, data) n y
Createtextnode (text) y
The following describes several common methods.
(2) createelement (), createtextnode (), appendchild ()
Example: <HTML>
<Head>
<Title> createelement () Example </title>
<SCRIPT type = "text/JavaScript">
Function createmessage (){
VaR op = Document. createelement ("p ");
VaR otext = Document. createtextnode ("Hello world! ");
Op. appendchild (otext );
Document. Body. appendchild (OP );
}
</SCRIPT>
</Head>
<Body onload = "createmessage ()">
</Body>
</Html>
After loading the page, create a node op and create a text node otext. otext is appended to the OP node through the appendchild method. For actual display, appendchild is used to append the op node to the body node. This example shows Hello world!
(3) removechild (), replaceChild () and insertbefore ()
From the method name, you can know what to do: delete a node, replace a node, and insert a node. Note that the replaceChild and insertbefore parameters are both before and after the new node.
(4) createdocumentfragment ()
This method is mainly used to solve the slow speed when a large number of nodes are added. Create a File Fragment node and append the new node to be added to this fragment node. Then, append the File Fragment node to the body to replace multiple appends to the body node.
Example: <HTML>
<Head>
<Title> insertbefore () Example </title>
<SCRIPT type = "text/JavaScript">
Function addmessages (){
VaR arrtext = ["first", "second", "third", "fourth", "th", "Sixth", "seventh", "Eighth", "Ninth ", "Tenth"];
VaR ofragment = Document. createdocumentfragment ();
For (VAR I = 0; I <arrtext. length; I ++ ){
VaR op = Document. createelement ("p ");
VaR otext = Document. createtextnode (arrtext [I]);
Op. appendchild (otext );
Ofragment. appendchild (OP );
}
Document. Body. appendchild (ofragment );
}
</SCRIPT>
</Head>
<Body onload = "addmessages ()">
</Body>
</Html>
Ii. Features of HTML dom
The features and methods of HTML Dom are not standard DOM implementation. They are designed for HTML and make Dom operations easier.
1. Make the features the same as the properties
The getattribute (name) method is required to access the features of an element. For HTML Dom extensions, you can use attributes with the same name to obtain and set these values:
For example,
Assume that oimg references this element.
(Oimg. getattribute ("src") can be directly written as: oimg. SRC. The setting value is simplified:
Oimg. src = "test2.gif ";
The only special class attribute. Because the class is the reserved word of ecmascript, the alternative attribute name is classname.
2. Table series methods:
To simplify table creation, HTML Dom provides a series of table methods:
Cells -- return all cells in the </tr> element.
Rows -- a set of all rows in a table
Insertrow (position) -- Insert a new row at a specified position in the rows set
Deleterow (position) -- opposite to insertrow
Insertcell (position) -- Insert a new cell at a specified position in the cells set
Deletecell (position) -- opposite to insertcell
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
