1, getElementById (ID)
The element is accessed through the ID of the element, which is a basic way for the DOM to access the page elements, and we need to use it frequently.
For example, in the following example, we can quickly access it with the ID of the div without having to traverse through the DOM layer,
Copy Code code as follows:
<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 When you use this function, if the ID of the element is not unique, you will get the first qualifying element.
In IE6 if input, Checkbox,radio. Element name matches the specified ID and is also accessed to the
For example, in the following example, the element obtained is input:
Copy Code code 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)
Returns an array of elements named Name, in which the element ID matches the name, and the element is included in the IE6, and Getelementsbyname () is used only for element objects like Input,radio,checkbox.
As in the following example, the length of the Georges Array should be 0.
Copy Code code as follows:
<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 a list of child elements (arrays) with the specified tagname. You can iterate through this array to get each individual child element. When dealing with a large DOM structure, using this method can be very easy to narrow down all areas.
Copy Code code as follows:
<title></title>
<script>
function Start () {
Get all tagname is the element of the body (of course each page has only one)
Mydocumentelements=document.getelementsbytagname ("body");
Mybody=mydocumentelements.item (0);
Get all the P elements of the body child element species
Mybodyelements=mybody.getelementsbytagname ("P");
Get a second P element
Myp=mybodyelements.item (1);
Display text for this element
alert (MyP.firstChild.nodeValue);
}
</script>
<body onload= "Start ()" >
<p>hi</p>
<p>hello</p>
</body>
common methods for DOM Element
1, appendchild (node)
The Append node to the current node object. Often used to add content dynamically to a page.
For example, add a text node to the div below:
Copy Code code as follows:
<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>
The above example adds text to the Div, or it can be implemented with newdiv.innerhtml= "A new Div",
But innerHTML doesn't belong to DOM.
2, RemoveChild (childreference)
Removes the child node of the current node and returns the removed node. This removed node can be inserted somewhere else in the document tree.
Copy Code code as follows:
<div id= "Father" ><div id= "Child" >a child</div></div>
<script type= "Text/javascript" >
var Childnode=document.getelementbyid ("Child")
var Removednode=document.getelementbyid ("Father"). RemoveChild (Childnode)
</script>
3, CloneNode (Deepboolean)
Copies and returns the replication node for the current node, which is an orphaned node and is not in the document tree. Copy the attribute value of the original node, including the id attribute, so before adding the new node to document, be sure to modify the id attribute so that it remains unique. Of course, if the uniqueness of ID is not important, it can be done without processing.
This method supports a Boolean parameter that replicates all child nodes of the current node, including text within that node, when Deepboolean sets true.
Copy Code code as follows:
<p id= "Mypara" >11111</p>
P=document.getelementbyid ("Mypara")
Pclone = P.clonenode (true);
P.parentnode.appendchild (Pclone);
4, ReplaceChild (newchild, Oldchild)
Swap one child node of the current node for another node
For example:
Copy Code code as follows:
<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)
Inserts a new node into the current node, and if the targetelement is set to NULL, the new node is inserted as the last child node, otherwise the new node should be inserted in the nearest position before Targetelement.
Copy Code code as follows:
<body>
<span id= "Lovespan" > Bear paw I want to also!</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 that can be used to trigger the OnClick function through the script
Copy Code code as follows:
<script>
function Wow () {
Alert ("I don't seem to have a mouse!");
}
</script>
<div id= "test" onclick= ' Wow () ' >hhh</div>
<script type= "Text/javascript" >
var div = document.getElementById ("test");
Div.click ();
</script>
Properties of DOM element: (The following are common.) IE5.0 above, Mozllia are supported)
1, Childenodes returns all child node objects,
For example
Copy Code code as follows:
<table id= "MyList" >
<tr><td> a monk has water to drink. </td></tr>
<tr><td> two monks fetch water and drink. </td></tr>
<tr><td> three a monk has 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 that is not part of the consortium DOM, but almost all browsers that support DOM support this attribute. With this property we can easily modify the HTML of an element.
Copy Code code as follows:
<p><b> new man, what?! </b></p>
<script type= "Text/javascript" >
Window.onload=function () {
document.getElementsByTagName ("P") [0].innerhtml=] <b> New Humanity, what?! </b> "
}
</script>
3, Style
Returns a reference to the style object of an element through which 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 child node
5. LastChild returns the last child node
6, ParentNode returns the object of the parent node.
7, NextSibling returns the object of the next sibling node
8, PreviousSibling return to the previous sibling node object
9. nodename returns the HTML tag name of the node, using uppercase letters in English, such as P, FONT
For example
Copy Code code as follows:
<div id= ' test ' >ddd</div>
<script>
if (document.getElementById ("test"). nodename== "DIV")
Alert ("This is a DIV");
</script>
First example:
Dynamically create an HTML table using DOM1.0 JavaScript.
Copy Code code as follows:
<title>sample Code </title>
<script>
function Start () {
Get a reference to 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
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 a new text element to the unit TD
Mycurrent_cell.appendchild (Currenttext);
Appends the cell TD into the row TR
Add unit TD to Line TR
Mycurrent_row.appendchild (Mycurrent_cell);
}
Add line tr to the Tbody
Mytablebody.appendchild (Mycurrent_row);
}
Add Tbody to TABLE
Mytable.appendchild (Mytablebody);
Add TABLE to Body
Mybody.appendchild (mytable);
Set the MyTable border property to 2
Mytable.setattribute ("Border", "2");
}
</script>
<body onload= "Start ()" >
</body>
First, we create a TABLE element
Next, create a TBODY element, which should be a child element of the table element,
But now there is no connection between them.
Then, using a loop to create the TR element, they 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've created these table, TBODY, TR, TD, and text elements, but the hierarchy between them
Relations have not been established. Then we add each object to its parent node in the opposite order.
Mycurrent_cell.appendchild (Currenttext);
Mycurrent_row.appendchild (Mycurrent_cell);
Mytablebody.appendchild (Mycurrent_row);
Mytable.appendchild (Mytablebody);
Now the DOM hierarchy is as follows:
Body
TABLE
Tbody
TR-------------------TR------------------TR
TD-----TD-----TD TD-----TD-----TD TD-----TD-----
