In the front-end development, JS and HTML are most closely related to the operation of the DOM, this article for you to share some of the basic operation of the DOM node.
First, create a DOM node
The command used is
var odiv = document.createelement (' div ');
This creates a div tag.
Inserting a DOM node
Moving the DOM node is to insert this node somewhere in the HTML document where JS gives us two methods:
1.appendChild (): Inserts a node at the end of the parent node.
Document.body.appendChild (ODIV); Inserts a div into the body and at the end
2.insertBefore (): Inserts a node in front of a sibling node of the parent node.
var OP = createelement (' P '); Create a P node
Document.body.insertBefore (OP,ODIV); Insert the P node in front of the Div
Three. Delete a DOM node
The way to delete a DOM node is removechild ().
Document.body.removeChild (OP); Delete P node
Four. Find DOM nodes
There are a number of ways to find DOM nodes, commonly used:
getElementById ()//via element ID, uniqueness
such as HTML documents are as follows:
<body>
<div id= ' box ' ></div>
</body>
This is a div that you can use getElementById () to get to the ID box.
var odiv = document.getElementById (' box ');
2.getElementsByTagName ()//select element by tag name of element
var adiv = getElementsByTagName (' div ');
Note that getElementsByTagName () gets a set of elements, so if you want to get the div above that ID box, add [0] to the back;
var odiv = getElementsByTagName (' div ') [0];
V. Replace the DOM node
The way to replace a DOM node is replacechild ().
var Ospan = document.createelement (' span '); Create a span label
Document.body.replaceChild (Ospan,obox); Replace div tags with span labels
The most common DOM operations are these, and there are many other ways, for now, browser compatibility is not very good, so it is recommended that you use these methods for the time being.
Add an example: DOM node creation, deletion, substitution
As long as the three button buttons on the screen are OK, here is the interface when the program is run:
<title></title>
<script type= "Text/javascript" >
function CreateNode () {
var pnode = document.createelement (' P ');
var tnode = document.createTextNode (' Fireworks in the march of Yangzhou ');
Pnode.appendchild (tnode);
Document.body.appendChild (Pnode);
}
function ReplaceNode () {
var pnode = document.createelement (' P ');
var tnode = document.createTextNode (' The Yellow Crane Tower of the West ");
Pnode.appendchild (tnode);
Get the P node to replace
var oldnode = document.getelementsbytagname (' P ') [0];
Oldnode.replacenode (Pnode, OldNode); This method only supports IE
Oldnode.parentNode.replaceChild (Pnode,oldnode)/General
}
function Removenode () {
var oldnode = document.getelementsbytagname (' P ') [0];
Oldnode.parentnode returns the parent node of the P node, this is the body, and then uses the RemoveChild method of the body node to delete the Pnode node below it
Oldnode.parentNode.removeChild (OldNode);
}
</script>
<body>
<input id= "Button1" type= "button" value= "Create Node" onclick= "CreateNode ();" /><br/>
<input id= "Button2" type= "button" value= "Replace node" onclick= "ReplaceNode ();" /><br/>
<input id= "Button3" type= "button" value= "Delete node" onclick= "Removenode ();" />
</body>
When I click on the Create node, the following first picture appears; When I click on the replacement node, it is the effect of the second picture below;
When I click on the delete node is the following third picture, the previous node to delete.
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
