Common methods of Document objects_Basic knowledge

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.

Copy the code The code is as follows:

h

Just for testing;

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:

Copy code The code is as follows:

Just for testing;

<script> <br>var div=document.getElementById('divid' ); <br>alert(div.nodeName); <br></script>

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.

Copy code The code is as follows:

f

f

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.

Copy code The code is as follows:

<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:

Copy the code The code is 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

Copy code The code is as follows:

A child

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.

Copy code The code is as follows:

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:

Copy code The code is as follows:

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.

Copy code The code is as follows:

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,

Copy code The code is as follows:

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.

Copy code The code is as follows:

New human, what? ? !

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

Copy code The code is as follows:

<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.

Copy code The code is as follows:

<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&gt ;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>

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.
Next, use a loop to create TR elements, which should be children of the TBODY element.
For each TR, we use a loop to create TD elements, which are children of TR.
For each TD, we create a text node element
Now, we have created these TABLE, TBODY, TR, TD and text elements, but the hierarchical
relationship between them has not been established. . Then we add each object to its parent node in reverse 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-----TD

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn