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:Copy codeThe Code is as follows: <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)
an 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 element objects such as input, radio, and checkbox.
In the following example, the length of the Georges array is 0. copy Code the code is as follows:
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. copy Code the code is as follows:
Hi
Hello
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 below: copy Code the code is as follows:
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.Copy codeThe Code is as follows: <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.Copy codeThe Code is as follows: <p id = "mypara"> 11111 </P>
P = Document. getelementbyid ("mypara ")
Pclone = P. clonenode (true );
P. parentnode. appendchild (pclone );
4. replaceChild (newchild, oldchild)
replace one subnode of the current node with another node.
example: copy Code the code is as follows:
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.Copy codeThe Code is as follows: <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>
6. Click ()
One click of the execution element, which can be used to trigger the onclick function through the scriptCopy codeThe Code is as follows: <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>
Dom element attributes: (The following are commonly used. Ie5.0 or above, all supported by mozllia)
1. childenodes returns all subnode objects.
for example, copy Code the code is as follows:
| A monk has water to drink. |
| two monks pick water and drink water. |
| three monks have no water to drink. |
2. innerhtml
This is a de facto standard and does not belong to W3C Dom. However, almost all browsers that support DOM support this attribute. Through this attribute, we can easily modify the HTML of an element. copy Code the code is as follows:
New humans, what ?!
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 exampleCopy codeThe Code is as follows: <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. Copy code The Code is as follows: <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>
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.
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
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
