The knowledge point comb of DOM tree

Why do you mention the DOM tree, perhaps it is helpful for us to have a good understanding of the various elements of the page, the label and the control collocation, and the loading of various js,css and so on. The author encountered some minor problems in the project, the essence of which is that the DOM tree is not a solid grasp of things. So let's comb it.
1.HTML DOM
OK, let's take a look at how this concept and structure are explained in W3school. W3school is a very good site, very suitable for beginners and the foundation is not solid people.

The HTML DOM defines the standard way to access and manipulate HTML documents. The DOM expresses the HTML document as a tree structure.

The Document Object Model (DOM) is a platform-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
The standard of the consortium DOM is divided into 3 different parts:
Core DOM-a standard model for any structured document
XML DOM-Standard model for XML documents
HTML DOM-Standard Model for HTML documents
We mainly look at HTML DOM
The HTML DOM is:
Standard object model for HTML
Standard programming Interface for HTML
Standard of the Consortium

DOM node
All content in an HTML document is a node, based on the HTML DOM standard of the consortium:
The entire document is a document node
Each HTML element is an element node
Text within an HTML element is a text node
Each HTML attribute is an attribute node
Comments are annotation nodes

2. Get the node's native method

Node operations in 3.JS
Write several common APIs to manipulate the DOM nodes.
(1) document.getElementById () This is the most basic.
(2) Object.innerhtml this property to set or return HTML between object
(3) Document.createelement () creates the Node object.
(4) Document.body.appendChild () tail insertion node.
(5) Object.parentNode.removeChild (ochildnode); removing nodes

Node operation in 4.jQuery
(1) Add nodes
A. Append () and Appendto (), two methods are exactly the corresponding pair of child operations.

$ (' #parentNodeId '). Append (Childnode);

$ (' #childeNode '). Appendto (ParentNode);

B. prepend () and Prependto (), which is also a pair of the corresponding operation method. The effect is to add a node to the parent node and place the predecessor. The usage is the same as the last pair.

C. With the corresponding and after, InsertAfter; Before, InsertBefore and so on, their use is the same as above. The effect is to insert the newly created element after/before the specified element, and to be adjacent to the target element as a sibling node.

(2) Delete node
A. Remove ()
The Remove () method deletes all matching elements, the parameters passed in are used to filter the elements, which can delete all the child nodes in the element, and when the matching node and descendants are deleted, the method return value is a reference to the deleted node, so you can use the reference and then use the deleted element.

$span = $ (' span '). Remove ();
$span. InsertAfter (' ul ');

We can see that in this example, first delete all the span elements, delete the elements using $span to receive, the deleted elements added to the UL behind, as the UL brother node. The effect of this operation is to move all span elements and descendant elements back to ul.
B. Empty ()
The empty () method is not strictly a deletion element, it simply empties the node, which clears all the child nodes in the element.

(3) Modify the DOM node
A. Replication node, when the Clone () method has parameters and is true, indicates that the attribute is replicated at the same time, and if there are no arguments, the attribute is not replicated.

$ (Element). Clone (True);

B. Replacing nodes
Both of these methods can implement the problem of replacing nodes.

$ (Element). ReplaceWith ();
$ (Element). ReplaceAll ();

C. Parcel Node

$ (Element). Wrap () $ (Element)
. Wrapall ()
$ (Element). Wraplnner ()

(4) Property action
attr () and removeattr (). The attr () method can get element properties and set element properties. The Removeattr () method deletes a specific property by specifying the property name in the parameter.

$ (' P '). attr (' title ');
$ (' P '). attr (' title ': ' title ');
$ (' P '). attr ({' title ': ' topic ', ' name ': ' Fruit '});

(5) Style operation
AddClass (), Removeclass () The method is to add and remove styles.
Toggleclass () The method is used to toggle the style of the target element.
(6) Other common operations
The first sentence is to get the value, and the second sentence is to set the value.

$ (' id '). val ();
$ (' id '). val (' Hello ');

CSS Actions
Set Add CSS Style

$ (' P '). CSS (' Color ', ' red ');

So far, the approximate DOM operation has been combed out.

By convention, make a list of some information that can be referenced
Http://www.cnblogs.com/ini_always/archive/2011/11/09/2243671.html
Http://wenku.baidu.com/view/a6b9673783c4bb4cf7ecd119.html
Http://www.nowamagic.net/librarys/posts/jquery/5
Http://www.blogjava.net/DLevin/archive/2012/11/25/391933.html
Http://www.w3school.com.cn/htmldom/dom_nodes.asp
Http://www.2cto.com/kf/201205/130535.html
Http://group.cnblogs.com/topic/39811.html
Http://www.cnblogs.com/bro-ma/p/3063942.html