The question that was puzzled in the previous article will be taken care of in this chapter and later chapters.
Starting today, Learning DOM programming lets us slowly call it a beginner JS programmer.
Then to the JS Craftsman direction development.
Learn English:
Dom: Document Object model. Document Object Model
Bom: Browser object model.
Note: You can also call the Window object model. (Window object model.)
API: Application programming interface.
Note: Dom can actually be viewed as an API.
Node: Nodes.
Note: Nodes are divided into: element node, attribute node, text node.
ELEMENT nodes contain attribute nodes and text nodes.
Dom Tree:
Let's look directly at how the DOM operates.
Creates an element node. CreateElement ():
<script language= "JavaScript" >
var a = document.createelement ("P");
Alert ("Node type is:" +a.nodetype + ", node name is:" + a.nodename);
</SCRIPT>
Output NodeType is 1. A.nodename is P;
So it creates an element node .... You may wonder why the node P is not found in the document?
Let's look at the following example:
<body>
</body>
<script language= "JavaScript" >
var a = document.createelement ("P");
Document.body.appendChild (a);
</SCRIPT>
With the Firebug view, we found that the document already has the results we need.
The original createelement () method created a new element node will not be automatically added to the document, since it is not added to the document, it is still a free state. If you want to add it to your document, you can use either the appendchild () or the InsertBefore () method or the ReplaceChild () method (described later).
2, create a text node. createTextNode ():
var B = document.createTextNode ("my Demo");
Alert ("Node type is:" +b.nodetype + ", node name is:" + b.nodename);
Output NodeType is 3. A.nodename is #text;
So it creates a text node ... you may wonder why the text node is not found in the document? As with createelement (), you need to use AppendChild () to add to the document.
Yes, you have a very good idea.
Let's look at the following example:
<body>
</body>
<script language= "JavaScript" >
var mes = document.createTextNode ("Hello World");
var container = document.createelement ("P");
Container.appendchild (MES);//First add the text node to the element node
Document.body.appendChild (Container), and/or add element nodes to the document
</SCRIPT>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
