DOM manipulation and its application in JavaScript

JavaScript application in the DOM is a core issue, it embodies the meaning of JavaScript, it is our operation page becomes dynamic, the operation of the page is easier, but at the same time, a large number of use of DOM operation, will be the browser's execution efficiency is greatly compromised, The correct and efficient use of DOM operations is something we often encounter in our actual work, so let's take a look at DOM operations:

When we are going to do a variety of things with DOM elements, the first thing we need to do is to get this element first:

1 <div id= "Example" class= "Divdom" >dom operations </div>2 <input name= "input1" type= "button" >3 <script>4 alert (document.getElementById (' example ')); 5 6 alert (document.getelementsbytagname (' div ')); 7 alert (document.getelementsbyname (' input1 ')); 8 alert (document.getelementsbyclassname (' Divdom '));
9 Alert (document.getelementsbyname (' input1 '). getattribute (' name '); 9 </script>

As shown in the code above, there are several ways we commonly use to get DOM element nodes:

1>document.getelementbyid (); Gets to the node through the ID of the node,

2>document.getelementsbytagname () selects the node through the node tag name,

3>document.getelementsbyname () selects the label by using the Name property value set in the label.

4>document.getelementsbyclassname () gets all the elements of the specified class name, and returns the NODELIST,IE9 of the following incompatible

5>.getattribute () to get the value of a specific property of a particular element

6>setattribute () To set property values for a specific element

Once we get to the element node, we can get its properties by selecting the element node, usually with TagName and innerHTML

The latter is readable and writable, and can be innerhtml to change the content of the node.

Second, in DOM operations, nodes can be divided into text nodes, attribute nodes, and ELEMENT nodes:

From the hierarchical structure, it can be divided into parent-child nodes, sibling nodes, so when we get to a node, we can get the other nodes through the corresponding properties:

Children represents the search for the current sub-label,

ChildNodes is the acquisition of all child nodes of the current element.

FirstChild can get the first child node of the current element,

LastChild can get the last child node of the current element,

ParentNode Gets the parent node of the current node

PreviousSibling: Gets the previous sibling node of the current node,

NextSibling: Gets the next sibling node of the current node

Attributes this property is the property node that gets the current label,

When we get to the node and get to its parent or child node or sibling node through the current node, we can manipulate the node:

AppendChild () Adds a node to the end of the current node

CreateElement () can produce a node dynamically, which is one of our key applications.

Insertchild () Inserts a node in front of the specified position, where we can also extend:

 1  var  div1 = document.createelement (' div '  2  var  divparent = document.getElementById (' Divbox '  3  divparent.insertchild (Div1,oldnode);  4   This implements the insertion of an element into the specified element,  5  //  So we can do this based on insertchild. Insert element behind the specified node  6   Divparent.insertchild (div1,oldnode.nextsibling);  7   By nextsibling, you can add a  
 before the current element.

RemoveChild () Deletes the specified child node in the parent node

ReplaceChild () Replace the old node with the new node

CloneNode () clone node, that is, copy the current node

Above is our common use of some of the operating methods, because too much foundation, it is not a demonstration. The following question, in fact, is the problem of the event mechanism, is that many of us beginners in the event mechanism, use our DOM object in the event:

var div1 = document.getElementById (' div '= fun ; function Fun (e) {    var e = e | | window.event;     var tar = e.target;     // the target element is then acquired,}

This is in the application of the event, we commonly used to get DOM elements of the operation, of course, here we will in the event mechanism of the essay to do a detailed introduction, in the acquisition of the properties of the node, we inevitably encountered the style and getcomputedstyle the difference between the problem, This brings us to the question of how to get the size, width and height of the CSS, and so on when the property is calculated. First Look at

1 varDiv1 = document.getElementById (' div ');2 alert (div1.style.width);3alert (div1.style.height);//Here we use the style to get the various properties of DOM elements,4 //But the disadvantage of style is that it can only get the property of the style in the line, if there is a row, it5 //return, if not, it returns to NULL, that is, his search is too narrow.6 //then use getComputedStyle: by calculating the return style, it doesn't matter if you're in line, the chain7 //then, inline, everything can be computed to return to your style property value.8 //var style = window.getComputedStyle?9 //window.getcomputedstyle (box, NULL): null | | box.currentstyle;Ten //with this compatibility notation,

Of course, what follows is that we select the elements through the DOM, through the attributes of the elements to obtain a variety of width, height values to complete our operation:

1>clientwidth: To get the size of the viewable area, Clientheiht: To get the height of the viewable area, including the padding size

2>offsetwidth: To get the width of the node itself, offsetheight: to get the height of the node itself, including the bounding rectangle, padding, and scroll bars

3>offsetleft: To get the position distance of the current node to the parent node, clientleft to get the left border of itself

OffsetTop: To get the position of the current node to the parent node, ClientTop gets its own top border,

4>scrolltop: Gets the length above the scrolled content, ScrollLeft: Gets the length of the left side of the scrolling content

5>scrollwidth and scrollheight are used to get the width and height of the scrolling content,

Here we take a picture to explain in detail:

DOM manipulation and its application in JavaScript