JavaScript DOM Manipulation techniques

In general, we operate the DOM is relatively straightforward, especially after jquery, we will find that the operation of the DOM has become so simple, but there will be a lot of hidden pits, so sometimes the operation of the DOM is not as simple as imagined;

Simple and common operations:

Access Node

document.getElementById () Get element node by ID

Document.getelementsbyname () Gets the element node by name

Document.getelementsbyclassname () Gets the element node based on class

CreateSome of the most common methods are
createdocumentfragment ()--Create a document fragment node
createelement (tagname)--Create an element with the label named TagName
createTextNode (text)--Create a text node that contains textual text
createelement ()-- Create root node
createTextNode ()--Create Textnode node
AppendChild ()--Append node content

Dynamic scripting:
Now in our development of the introduction of scripts generally will be written in advance of a SRC feature contains external files, the other way is the entire HTML page contains script code, here is to say another kind of dynamic script, refers to the page load does not exist, But at some point in the future, the script is added dynamically by modifying the DOM;
function Loadscript (URL) {var script=document.createelement ("script"); Script.type= "Text/javascript"; <span style= "White-space:pre" ></span>script.src=url;<span style= " White-space:pre "></span>document.body.appendchild (script); <span style=" White-space:pre "></ Span>}
Dynamic style:
The dynamic style and the dynamic script are very similar here, the style can also be specified by the SRC file, can also be included, so we can also use our dynamic style to load;
function loadcss (URL) {var link=document.createelement ("link"), link.rel= "stylesheet"; link.type= "Text/css"; Link.href=rul;var head=document.getelementsbytagname ("Head") [0];head.appendchild (link);}
Action Form
The <table> element is one of the most complex structures in HTML. To create a table, you typically have to refer to a label that represents a table row, cell, or table first.
Here's a demonstration of using the DOM to create an HTML table.
<script Type= "Text/javascript" > var table=document.createelement ("table"); table.border=1;table.width= "100%";// Create Tbodyvar tbody=document.createelement ("tbody"); Table.appendchild (tbody);//Create First row var row1=document.createelement ("tr"); Tbody.appendchild (row1); var cell_1=document.createelement ("TD"); Cell_1.appendchild ( document.createTextNode ("cell")); Row1.appendchild (cell_1); var cell_2=document.createelement ("TD"); cell_2. AppendChild (document.createTextNode ("Cell 2,1")); Row1.appendchild (cell_2);//create second row var row2=document.createelement ("tr"); Tbody.appendchild (row2); var cel2_1=document.createelement ("TD"); Cel2_1.appendchild ( document.createTextNode ("cell")); Row2.appendchild (cel2_1); var cel2_2=document.createelement ("TD"); Cel2_2. AppendChild (document.createTextNode ("Cell 2,2")); Row2.appendchild (cel2_2);// Add a table to the document Body Document.body.appendChild (table);</script> 

Very primitive method of creating DOM tables, and no tricks;
Fortunately JS provides the Htmldom method

 NodeList  
Understanding NodeList and NamedNodeMap and Htmlcollection is the key to a thorough understanding of the DOM in general. These three collections are dynamically kept up-to-date with the most accurate information whenever the document structure changes, they are updated, all NodeList objects are queries that run in real time when accessing the DOM document. For example, the following code will die loop;
<script type= "Text/javascript" >  

The first row gets the htmlcollection of all DIV elements in the document. Since this set is dynamic, so long as a new div is added to the element, the collection gets more, and at the same time our divs.length increases, which means that our I and divs.length will never be equal;
If we want to iterate through the creation of a Div, it is best to create a temporary variable to preserve the length of the div;
<script type= "Text/javascript" >  

Summary:
1. The most basic node type is nodes, which is used to abstract a separate part of the document, and all other types inherit from node.
The 2.document type represents the entire document and is a set of hierarchical root nodes.
A 3.Element node represents all the HTML elements or XML elements in a document that can be used to manipulate the contents and attributes of those elements.
4. There are also node types, which represent text memory, annotations, document types, CDATA regions, and document fragments, respectively.
In our daily development, there are a lot of JS framework for us to choose, such as jquery and angularjs these are good for DOM encapsulation, but we still need to learn the DOM so as to help us in the future development and growth;
JavaScript DOM Manipulation techniques