Home > Developer > JavaScript
This section mainly describes some useful basic Dom methods and how to use them using JavaScript.
For example, you can dynamically create and control mobile HTML elements.
Common Methods for document objects
1. getelementbyid (ID)
Access an element through the element ID. This is a basic DOM method for accessing the page element, which is frequently used.
For example, in the following example, we can quickly access it with the ID of the DIV, instead of having to traverse it through the DOM layer by layer,
<Body>
<Div id = 'divid'> <p> H </P>
Just for testing;
</Div>
<Div id = 'divid'>
Just for testing;
</Div>
<SCRIPT>
VaR DIV = Document. getelementbyid ('divid ');
Alert (Div. nodename );
</SCRIPT>
</Body>
Note that when using this function, if the element ID is not unique, the first qualified element will be obtained.
In IE6, if the input, checkbox, radio. And other element names match the specified ID
In the following example, the obtained element is input:
<Body>
<Input name = 'divid' type = "text"/>
<Div id = 'divid'>
Just for testing;
</Div>
<SCRIPT>
VaR DIV = Document. getelementbyid ('divid ');
Alert (Div. nodename );
</SCRIPT>
</Body>
2. getelementsbyname (name)
The array of elements whose names are name is returned. If the element ID matches this name in IE6, this element will also be included, and getelementsbyname () is only used for input, radio, checkbox and other element objects.
In the following example, the length of the Georges array is 0.
<Body>
<Div name = "George"> F </div>
<Div name = "George"> F </div>
<SCRIPT type = "text/JavaScript">
VaR Georges = Document. getelementsbyname ("George ");
Alert (Georges. Length );
</SCRIPT>
</Body>
3. getelementsbytagname (tagname)
Getelementbytagname can be used for document or element. Getelementsbytagname returns the list of child elements (arrays) with the specified tagname ). You can traverse this array to obtain each individual sub-element. When processing a large Dom structure, this method can be easily used to narrow down the scope.
<HTML>
<Head>
<Title> </title>
<SCRIPT>
Function start (){
// Obtain all the elements whose tagnames are the body (of course, each page has only one)
Mydocumentelements = Document. getelementsbytagname ("body ");
Mybody = mydocumentelements. Item (0 );
// Obtain all P elements of the body sub-element
Mybodyelements = mybody. getelementsbytagname ("p ");
// Obtain the second P element
Myp = mybodyelements. Item (1 );
// Display the text of this element
Alert (myp. firstchild. nodevalue );
}
</SCRIPT>
</Head>
<Body onload = "Start ()">
<P> Hi </P>
<P> Hello </P>
</Body>
</Html>
Common Dom Element Methods
1. appendchild (node)
Append a node to the current node object. It is often used to dynamically add content to pages.
For example, add a text node to the DIV:
<Div id = "test"> </div>
<SCRIPT type = "text/JavaScript">
VaR newdiv = Document. createelement ("Div ")
VaR newtext = Document. createtextnode ("A New Div ")
Newdiv. appendchild (newtext)
Document. getelementbyid ("test"). appendchild (newdiv)
</SCRIPT>
In the preceding example, add text to the DIV, or use newdiv. innerhtml = "A New Div,
However, innerhtml does not belong to Dom.
2. removechild (childreference)
Remove the child node of the current node and return the removed node. The removed node can be inserted somewhere else in the document tree.
<Div id = "father"> <Div id = "child"> A Child </div>
<SCRIPT type = "text/JavaScript">
VaR childnode = Document. getelementbyid ("child ")
VaR removednode = Document. getelementbyid ("father"). removechild (childnode)
</SCRIPT>
3. clonenode (deepboolean)
Copy and return the copy node of the current node. The copied node is an isolated node, not in the document tree. Copy the attribute value of the original node, including the ID attribute. Therefore, before adding the new node to the document, you must modify the ID attribute to keep it unique. Of course, if the uniqueness of the ID is not important, you can leave it alone.
This method supports a Boolean parameter. When deepboolean is set to true, all subnodes of the current node are copied, including the text in the node.
<P id = "mypara"> 11111 </P>
P = Document. getelementbyid ("mypara ")
Pclone = P. clonenode (true );
P. parentnode. appendchild (pclone );
<Div id = "adiv"> <span id = "innerspan"> span </span> </div>
<SCRIPT type = "text/JavaScript">
VaR oldel = Document. getelementbyid ("innerspan ");
VaR newel = Document. createelement ("p ");
VaR text = Document. createtextnode ("ppppp ");
Newel. appendchild (text );
Document. getelementbyid ("adiv"). replaceChild (newel, oldel );
</SCRIPT>
5. insertbefore (newelement, targetelement)
Insert a new node to the current node. If the targetelement is set to null, the new node is inserted as the last subnode. Otherwise, the new node should be inserted to the nearest node before the targetelement.
<Body>
<Span id = "lovespan"> I love it! </Span>
</Body>
<SCRIPT type = "text/JavaScript">
VaR lovespan = Document. getelementbyid ("lovespan ")
VaR newspan = Document. createelement ("span ")
VaR newspanref = Document. Body. insertbefore (newspan, lovespan)
Newspanref. innerhtml = "fish and ";
</SCRIPT>
<SCRIPT>
Function Wow (){
Alert ("I don't seem to have clicked the mouse ");
}
</SCRIPT>
<Div id = "test" onclick = 'Wow () '> hhh </div>
<SCRIPT type = "text/JavaScript">
VaR DIV = Document. getelementbyid ("test ");
Div. Click ();
</SCRIPT>
Attributes of Dom element: (The following are commonly used. For ie5.0 and later versions, mozllia supports)
1. childenodes returns all child node objects,
For example
<Table id = "mylist">
<Tr> <TD> A monk has water to drink. </TD> </tr>
<Tr> <TD> two monks pick water to drink. </TD> </tr>
<Tr> <TD> three monks have no water to drink. </TD> </tr>
</Table>
<SCRIPT>
VaR MSG = ""
VaR mylist = Document. getelementbyid ("mylist ")
For (I = 0; I <mylist. childnodes. length; I ++ ){
VaR TR = mylist. childnodes [I];
For (j = 0; j <tr. childnodes [J]. length; j ++ ){
VaR TD = tr. childnodes [J];
MSG + = TD. innertext;
}
}
Alert (MSG );
</SCRIPT>
2. innerhtml
This is a de facto standard, not W3C Dom, but almost all browsers that support DOM support this attribute. Through this attribute, we can easily modify the HTML of an element.
<P> <B> New humans, what ?! </B> </P>
<SCRIPT type = "text/JavaScript">
Window. onload = function (){
Document. getelementsbytagname ("p") [0]. innerhtml = "<B> what are new humans ?! </B>"
}
</SCRIPT>
3. Style
Returns a reference to the style object of an element. With this, we can obtain and modify each individual style.
For example, the following script can modify the background color of an element.
Document. getelementbyid ("test"). style. backgroundcolor = "yellow"
4. firstchild returns the first subnode
5. lastchild returns the last subnode.
6. parentnode returns the object of the parent node.
7. nextsibling returns the object of the next sibling node.
8. previussibling returns the object of the previous sibling node.
9. nodename: return the node's HTML Tag name, which must contain uppercase letters, such as P and font.
For example
<Div id = 'test'> DDD </div>
<SCRIPT>
If (document. getelementbyid ("test"). nodename = "Div ")
Alert ("this is a div ");
</SCRIPT>
Example 1:
Use dom1.0 JavaScript to dynamically create an HTML table.
<Head>
<Title> Sample Code </title>
<SCRIPT>
Function start (){
// Obtain the reference of the body
VaR mybody = Document. getelementsbytagname ("body"). Item (0 );
// Create a <Table> </table> element
Mytable = Document. createelement ("table ");
// Create a <tbody> </tbody> element
Mytablebody = Document. createelement ("tbody ");
// Create a row and column
For (j = 0; j <3; j ++ ){
// Create a <tr> </tr> element
Mycurrent_row = Document. createelement ("TR ");
For (I = 0; I <3; I ++ ){
// Create a <TD> </TD> element
Mycurrent_cell = Document. createelement ("TD ");
// Create a text element
Currenttext = Document. createtextnode ("cell is row" + J + ", column" + I );
// Add the new text element to the unit TD
Mycurrent_cell.appendchild (currenttext );
// Appends the cell TD into the row tr
// Add the unit td to the row tr.
Mycurrent_row.appendchild (mycurrent_cell );
}
// Add the row tr to the tbody.
Mytablebody. appendchild (mycurrent_row );
}
// Add the tbody to the table
Mytable. appendchild (mytablebody );
// Add the table to the body
Mybody. appendchild (mytable );
// Set the border attribute of mytable to 2
Mytable. setattribute ("border", "2 ");
}
</SCRIPT>
</Head>
<Body onload = "Start ()">
</Body>
</Html>
Then, create tr elements in a loop, which should be child elements of the tbody element.
For each TR, we use a loop to create TD elements, which are child elements of TR.
For each TD, we create a text node Element
Now, we have created these tables, tbody, TR, TD, and text elements, but the layers between them
The link is not established. Then we add each object to its parent node in the reverse order.
Mycurrent_cell.appendchild (currenttext );
Mycurrent_row.appendchild (mycurrent_cell );
Mytablebody. appendchild (mycurrent_row );
Mytable. appendchild (mytablebody );
The Dom hierarchy is as follows:
Body
|
Table
|
Tbody
|
TR-------------------TR------------------TR
|
TD-----TD-----TD
First, create a table element.
Then, create a tbody element, which should be a child element of the table element,
But now there is no connection between them.
6. Click ()
One click of the execution element, which can be used to trigger the onclick function through the script
4. replaceChild (newchild, oldchild)
Replace one subnode of the current node with another node.
For example:
This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/aking8736/archive/2007/07/20/1700467.aspx
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
