1. Obtain HTML elements
1. getelementbyid (ID)
By accessing the element ID, this is a basic DOM method for accessing the page element.
Example:
<Div id = "divid"> test </div>
<Script language = "JavaScript">
VaR DIV = Document. getelementbyid ("divid ");
Alert (Div. nodename); // display element name
</SCRIPT>
If the ID is not unique in the element, the first ID is obtained.
2. getelementsbyname (name)
Only used for input radio checkbox and other elements. An array of elements named name is returned.
Example:
<Div name = "George"> </div>
<Input name = "George"> </div>
<Script language = JavaScript>
VaR Ge = Document. getelementsbyname ("George ");
Alert (Georges. Length); // gets the number of Georges, which does not affect Div.
</SCRIPT>
3. getelementsbytagname (tagname)
Returns an array of element lists with tagnames. It is used to process a large Dom structure.
2. Dom Element Common Methods
1. appendchild (node) // Add content
Append a node to the current object. Example:
<Div id = "test"> 123 </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>
Of course, the above functions can be implemented using document. getelementbyid ("test"). innerhtml = "test". Unfortunately, innerhtml does not belong to Dom.
2, removechild (childreference)
Remove the child node of the current node and return to the node
<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 current copy node. Attribute So you need to change the ID in the document tree. Attribute To ensure that the ID is unique.
4. insertbefore (newelment, targetelement) inserts a new node.
Insert a new node into the current node. If targetelement is null, the new node is the last node.
Example:
<Body>
<Span id = "lovespan"> I love it! </Span>
</Body>
<SCRIPT type = "text/JavaScript">
VaR lovespan = Document. getelementbyid ("lovespan"); // obtain the ID
VaR newspan = Document. createelement ("span ");
VaR newspanref = Document. Body. insertbefore (newspan, lovespan );
Newspanref. innerhtml = "fish and ";
</SCRIPT>
3. Dom Element Common Attribute
1. childenodes returns all child node objects,
For example
<Ul id = "mylist">
<Li> USA </LI>
<Li> Italy </LI>
<Li> Canada </LI>
</Ul>
<SCRIPT>
VaR MSG = "";
VaR mylist = Document. getelementbyid ("mylist ")
For (I = 0; I <mylist. childnodes. length; I ++ ){
VaR li = mylist. childnodes [I];
MSG + = Li. innertext;
}
Alert (MSG );
</SCRIPT>
2, innerhtml
This is a standard, but it is not written to Dom
For example:
<Div id = "BBB"> <span id = "AAA"> pull me </span> </div>
<Input type = button value = "click to see">
<Script language = "JavaScript">
Function Change ()
{
Document. getelementbyid ("AAA"). innerhtml = "modify ";
}
</SCRIPT>
3, Style
This is extremely important Attribute , You can obtain and modify each individual style.
Example: Document. getelementbytagname ("body") [0]. style. backgroundcolor = "# cccccc"
4. firstchild returns the first subnode
Lastchild returns the last subnode
Parentnode returns the object of the parent node.
Nextsibling returns the object of the next sibling Node
Previussibling returns the object of the previous sibling node.
Nodename: return the node's HTML Tag name, which uses uppercase letters, such as P and font.
5. Click ()
One click of the execution element, which can be used to trigger the onclick function through the script
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
