Introduction to Javascript Part 6 js DOM Programming_Basic Knowledge

The questions that puzzled me in the previous article will be slowly solved in this chapter and the following chapters. Starting from today, start learning DOM programming and let us slowly become a junior js programmer. Then develop in the direction of js craftsman.

Learn English:
Dom: Document Object Model. Document object model
Bom: Browser object model.
Note: It can also be called window object model. (window object model.)
API: Application Programming Interface.
Note: DOM can actually be regarded as an API.
Node: Node.
Note: Nodes are divided into: element nodes, attribute nodes, and text nodes.
Element nodes include attribute nodes and text nodes.
Dom tree:
Let’s see directly how to operate the DOM.
1, Create element node. createElement():

Output; nodeType is 1. a.nodeName is p;
So it creates an element node... You may wonder why the document Node p is not found in it?
Let’s look at the following example:



Check it with firebug and find that the document already has the results we need.


It turns out that 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 means that it is still in a free state. If you want to add it to the document, you can use the appendChild() or insertBefore() method or the replaceChild() method (described later).

2, create a text node. createTextNode():
var b = document.createTextNode("my demo");
alert( "The node type is: " b.nodeType " ", the node name is: " b.nodeName);
output ; NodeType is 3 . a.nodeName is #text ;
So it creates a text node... You may also wonder why this text node is not found in the document? Is it the same as createElement(), which needs to be added to the document using appendChild().

Yes, your idea is very right.
Let’s look at the following example:




3, Copy the node. cloneNode(boolean): One parameter:
Look at an example:



Look at the results under firebug:


See the difference between true and false.
If true: it is a

hello world

clone.
false: Only clone

, the text inside is not cloned.
Same as createElement(), the new node after cloning will not be automatically inserted into the document. AppendChild() is required;
Another note: If the ids are the same after cloning, don’t forget to use setAttribute(“id”, “new_id “);
to change the ID of the new node.

4, Insert node. appendChild():
I have used it several times before, so I should know the general usage.
The specific explanation is:
Append a child node to the element, and insert the new node at the end.
var container = document.createElement("p");
var t = document.createTextNode("cssrain");
container.appendChild(t);
document.body.appendChild(container);

In addition, appendChild() can not only be used to append new elements, you can also move existing elements in the document.
Look at the example below:

msg

content

aaaaaaaa

<script> <br>var mes = document.getElementById("msg"); <br>var container = document.getElementById("content"); <br> container.appendChild(mes); <br></script>
//I found that msg was placed behind content.
Js internal processing method:
First delete the document with ID msg from the document, then insert it into content and insert it as the last node of content.
The result is:

content

msg

aaaaaaaa

5, Insert node. insertBefore():
As the name suggests, it inserts a new node in front of the target node.
Element.insertBefore( newNode , targerNode );
// Note that the first parameter is the new node, followed by the target node (the insertion position).
// The new node is a guest, so we must serve him first. . . ^_^

The second parameter is optional. If the second parameter is not written, it will be added to the end of the document by default, which is equivalent to appendChild();
Let’s see how to use insertBefore() ：

1111

msg

test< ;/p>

222

aaaaaaaa

< /p>
<script> <br>var msg = document.getElementById("msg"); <br>var aaa = document.getElementById("aaa"); <br>var test = document.getElementById( "cssrian"); <br>test.insertBefore( msg , aaa ); <br></script>
// We found that the ID of msg was inserted in front of aaa.
The internal processing method of Js is similar to appendChild(). Also:
First delete the one with ID msg from the document, and then insert it before aaa as the previous node of aaa.


Everyone should write by hand, otherwise it will not be easy to remember just by reading.
Okay, that’s it for now, let’s continue tomorrow.
Today we talked about using dom method to create nodes, copy nodes, and insert nodes.
Tomorrow we will talk about deleting nodes, replacing nodes, finding nodes, etc. . . . . .
If you still don’t understand, you can search for information on Google.