Getting started with Javascript Article 9 Javascript DOM summary page 1/2

1. Create a node.
CreateElement ():
Var a = document. createElement ("p ");
It creates an element node, so nodeType is equal to 1.
A. nodeName will return p;
Note: The new element node created by the createElement () method will not be automatically added to the document. Since it is not added to the document, it indicates that it is still in a free state. Therefore, it does not have the nodeParent attribute.
If you want to add it to the document, you can use the appendChild (), insertBefore (), or replaceChild () methods. Of course, in the previous example, we wrote an insertAfter () method;
For example:
Var a = document. createElement ("p ");
Document. body. appendChild ();
Note: appendChild () is added to the end of the document by default. That is, the lastChild subnode.
If you want to add it to a certain place, you can use insertBefore ().
If you want to add attributes to an element before it is inserted. You can do this:
Var a = document. createElement ("p ");
A. setAttribute ("title", "my demo ");
Document. body. appendChild ();

CreateTextNode ():
Var B = document. createTextNode ("my demo ");
It creates a text node, so nodeType is equal to 3.
B. nodeName will return # text;
Like createElement (), nodes created with createTextNode () are not automatically added to the document. You must use the appendChild (), insertBefore (), or replaceChild () methods.
He often works with createElement (). Do you know why? (One Element Node and one text node .)
Var mes = document. createTextNode ("hello world ");
Var container = document. createElement ("p ");
Container. appendChild (mes );
Document. body. appendChild (container );


2. Copy the node.
CloneNode (boolean ):
It has a parameter.
Var mes = document. createTextNode ("hello world ");
Var container = document. createElement ("p ");
Container. appendChild (mes );
Document. body. appendChild (container );
Var newpara = container. cloneNode (true); // difference between true and false
Document. body. appendChild (newpara );
Note:
True: <p> aaaa </p> clone.
False: Only <p> </p> is cloned, and the text in it is not cloned.
You can write an example by yourself and use firebug to see it.

The new node after cloning will not be automatically inserted into the document like createTextNode. AppendChild () is required ();
Another note: If the id is the same after cloning, do not forget to use setAttribute ("id", "another_id");
Change the ID of the new node.

3. Insert nodes.
AppendChild ():
Append a subnode to the element, and insert the new node to the end.
Var container = document. createElement ("p ");
Var t = document. createTextNode ("cssrain ");
Container. appendChild (t );
Document. body. appendChild (container );
He often works with createElement (), createTextNode (), and cloneNode.
In addition, appendChild () can be used not only to append new elements, but also to move existing elements in the document.
See the following example:
<P id = "msg"> msg </p>
<P id = "content"> content </p>
<P id = "aaa"> aaaaaaaa </p>
<Script>
Var mes = document. getElementById ("msg ");
Var container = document. getElementById ("content ");
Container. appendChild (mes );
</Script>
// It is found that msg is placed behind content.
Js internal processing method:
Delete the object whose ID is msg from the document and insert the object to the content as the last node of the content.
Result:
<P id = "content">
Content
<P id = "msg"> msg </p>
</P>
<P id = "aaa"> aaaaaaaa </p>

InsertBefore ():
As the name implies, a new node is inserted before the target node.
Element. insertBefore (newNode, targerNode );

The second parameter is optional. If the second parameter is not written, it is added to the end of the document by default, which is equivalent to appendChild ();
Let's see how to use insertBefore:
<Div id = "cssrian">
<P id = "content"> 1111 </p>
<Div id = "msg"> msg <div> test </div>
<P id = "content"> 222 </p>
<P id = "aaa"> aaaaaaaa </p>
</Div>
<Script>
Var msg = document. getElementById ("msg ");
Var aaa = document. getElementById ("aaa ");
Var test = document. getElementById ("cssrian ");
Test. insertBefore (msg, aaa );
</Script>
// We find that the ID msg is inserted before aaa.
The Js internal processing method is similar to appendChild.


4. delete a node.
RemoveChild ():
<Body>
<Div id = "cssrain">
<Div id = "a"> a </div>
<Div id = "B"> B </div>
<Div id = "c"> c </div>
</Div>
</Body>
<Script>
Var msg = document. getElementById ("cssrain ");
Var B = document. getElementById ("B ");
Msg. removeChild (B );
</Script>
If you do not know the parent node of the node to be deleted? You can use the parentNode attribute.
For example:
<Body>
<Div id = "cssrain">
<Div id = "a"> a </div>
<Div id = "B"> B </div>
<Div id = "c"> c </div>
</Div>
</Body>
<Script>
Var B = document. getElementById ("B ");
Var c = B. parentNode;
C. removeChild (B );
</Script>

Note: If you want to move a node from one place to another, you do not need to use removeChild ().
You can use the previous appendChild () and insertBefore (). They will automatically delete the node and then move it to the specified place. ,


5. Replace nodes.
Element. repalceChild (newNode, oldNode );
The OldNode must be a subnode of the Element.
<Body>
<Div id = "cssrain">
<Div id = "a"> a </div>
<Div id = "B"> B </div>
<Div id = "c"> c </div>
</Div>
</Body>
<Script>
Var cssrain = document. getElementById ("cssrain ");
Var msg = document. getElementById ("B ");
Var para = document. createElement ("p ");
Cssrain. replaceChild (para, msg );
</Script>