1. getElementById(id) Access elements through the ID of the element. This is a basic method of accessing page elements in DOM. We need to use it frequently.
For example, in the following example, we You can quickly access it with the ID of the DIV without having to traverse through the DOM layers.
Just for testing;
<script> <br>var div=document.getElementById('divid'); <br>alert(div.nodeName); <br></script>
Note that when using this function, if the ID of the element is not unique, then the first A qualifying element.
In IE6, if the input, checkbox, radio. and other element names match the specified ID, they will also be accessed
. For example, in the following example, the obtained element is input:
2. getElementsByName(name) Returns an array of elements whose name is name. In IE6, if the element ID matches this name, this element will also be included, and getElementsByName() is only used for element objects such as input, radio, checkbox, etc.
Like the example below, the length of the georges array should be 0.
3. getElementsByTagName( tagname) getElementByTagName can be used for DOCUMENT or elements. getElementsByTagName returns a list (array) of child elements with the specified tagname. You can iterate over this array to obtain each individual child element. When dealing with very large DOM structures, this approach makes it easy to narrow down the entire structure.
<script> <br>function start() { <br>// Get all elements whose tagName is body (of course only one per page) <br>myDocumentElements =document.getElementsByTagName("body"); <br>myBody=myDocumentElements.item(0); <br>// Get all P elements of body sub-elements <br>myBodyElements=myBody.getElementsByTagName("p"); <br>//Get the second P element<br>myP=myBodyElements.item(1); <br>//Display the text of this element<br>alert(myP.firstChild.nodeValue); <br>} <br></script>
hi
hello< ;/p>
DOM Element common methods 1. appendChild(node)
Append nodes to the current node object. Often used to dynamically add content to pages.
For example, add a text node to the div as follows:
In the above example, adding text to DIV can also be achieved using newdiv.innerHTML="A new div".
However, innerHTML does not belong to the DOM.
2. removeChild(childreference)
Remove the current node. The child node of , returns the removed node. The removed node can be inserted elsewhere in the document tree
3 , cloneNode(deepBoolean)
Copy and return the copied node of the current node. The copied node is an isolated node and is not in the document tree. Copies the attribute values of the original node, including the ID attribute, so before adding this new node to the document, be sure to modify the ID attribute to make it unique. Of course, if the uniqueness of the ID is not important, it does not need to be processed.
This method supports a Boolean parameter. When deepBoolean is set to true, all child nodes of the current node will be copied, including the text within the node.
11111< /p>
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
4 , replaceChild(newChild, oldChild)
Replace a child node of the current node with another node
For example:
span
< 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);
5. insertBefore(newElement, targetElement)
Insert a new node into the current node. If targetElement is set to null, the new node is inserted as the last child node. Otherwise, the new node should be inserted as the nearest child node before targetElement. Location.
I want whatever I want!
DOM Element attributes: (The following are commonly used. IE5.0 and above are supported by mozllia)
1. childeNodes returns all child node objects,
For example,
| A monk has water to drink. |
| Two monks carry water to drink. |
| The three monks had no water to drink. |
<script> <br>var msg=”” <br>var mylist=document.getElementById("mylist") <br> for (i=0; i<mylist.childNodes.length; i ){ <br>var tr=mylist.childNodes[i]; <br>for(j=0;j<tr.childNodes[j].length; j ) { <br>var td=tr.childNodes[j]; <br>msg =td.innerText; <br>} <br>} <br>alert(msg); <br></script>
2. innerHTML
This is a de facto standard and does not belong to w3c DOM, but almost all browsers that support DOM support this attribute. Through this attribute we can easily modify the HTML of an element.
3. style
Return a A reference to the element's style object, 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 returns the object of the previous sibling node
9. nodeName returns the HTML tag name of the node, using English capital letters, such as P, FONT
For example
<script> <br>if (document.getElementById("test").nodeName=="DIV") <br>alert("This is a DIV"); <br> </script>
First example:
Use DOM1.0 javascript to dynamically create an HTML table.
Sample code <script> <br>function start() { <br>//Get the reference of body<br>var mybody=document.getElementsByTagName("body").item(0); <br>//Create a <table></table> element<br>mytable = document.createElement("TABLE"); <br>//Create a <TBODY></TBODY> element<br>mytablebody = document.createElement("TBODY"); <br>//Create rows and columns<br>for(j=0;j<3;j ) { <BR>//Create a<TR></TR> ;Element<BR>mycurrent_row=document.createElement("TR"); <BR>for(i=0;i<3;i ) { <BR>//Create a <TD></TD> element<br>mycurrent_cell=document.createElement("TD"); <br>//Create a text element<br>currenttext=document.createTextNode("cell is row " j ", column " i); <br>//Put New text elements are added to the cell TD <br>mycurrent_cell.appendChild(currenttext); <br>// appends the cell TD into the row TR <br>//Add the cell TD into the row TR <br>mycurrent_row. appendChild(mycurrent_cell); <br>} <br>//Add row TR to TBODY <br>mytablebody.appendChild(mycurrent_row); <br>} <br>//Add TBODY to TABLE <br>mytable. appendChild(mytablebody); <br>// Add TABLE to BODY <br>mybody.appendChild(mytable); <br>// Set the border attribute of mytable to 2 <br>mytable.setAttribute("border"," 2"); <br>} <br></script>
