Dom Document Object Model knowledge

This article is not my original, but I feel that it is useful for me to learn. I hereby declare that.

Document. createelement () is an object created in the object. It must be used together with the appendchild () or insertbefore () method. The appendchild () method adds a new subnode at the end of the subnode list of the node. The insertbefore () method inserts a new node anywhere in the node's subnode list.

 

The following is an exampleDocument. createelement () Usage. <Div id = "board"> </div>

 

Example 1:

<SCRIPT type = "text/JavaScript">
VaR board = Document. getelementbyid ("Board ");
VaR E =Document. createelement("Input ");
E. type = "button ";
E. value = "this is a small example of test loading ";
VaR object = board.Appendchild(E );
</SCRIPT>

Effect:Load a button in the tab board with the property value "this is a small example of test loading ".

Example 2:

<SCRIPT type = "text/JavaScript">
VaR board = Document. getelementbyid ("Board ");
VaR e2 = Document. createelement ("select ");
E2.options [0] = New Option ("add-on 1 ","");
E2.options [1] = New Option ("add-on 2 ","");
E2.size = "2 ";
VaR object = board. appendchild (E2 );
</SCRIPT>

Effect:Load a drop-down list box on the tab board. The attribute values are "add-on 1" and "add-on 2 ".

 

Example 3:

<SCRIPT type = "text/JavaScript">
VaR board = Document. getelementbyid ("Board ");
VaR E3 = Document. createelement ("input ");
E4.setattribute ("type", "text ");
E4.setattribute ("name", "Q ");
E4.setattribute ("value", "Use setattribute ");
E4.setattribute ("onclick", "javascript: Alert ('this is a test! ');");
VaR object = board. appendchild (E3 );
</SCRIPT>

Effect:Load a text box in the tab board with the property value "use setattribute ". When you click this text box, the "this is a test!" dialog box is displayed !".

 

According to the above example, we can see that the parameters are the same by loading the object attributes. Use E. type = "text" and E. setattribute ("type", "text") to achieve the same effect.

Next, we will use an example to describe the differences between the appendchild () method and the insertbefore () method..

For example, when we want to insert a subnode P in the following Div: <Div id = "test"> <p id = "X1"> node </P> <p> node </P> </div>

We can write as follows:

<SCRIPT type = "text/JavaScript">
VaR otest = Document. getelementbyid ("test ");
VaR newnode = Document. createelement ("p ");
Newnode. innerhtml = "this is a test ";
// The test starts from here.
// Appendchild method:
Otest. appendchild (newnode );
// Insertbefore method:
Otest. insertbefore (newnode, null );
</SCRIPT>

Through the above code, we can test that a new node is created under the node Div, And the node is a divLast Node. Obviously, through this example, we can know that both appendchildhild and insertbefore can be used to insert nodes.

In the above example, there is a code: otest. insertbefore (newnode, null). Here, insertbefore has two parameters that can be set. The first parameter is the same as appendchild, but the second parameter is unique to it.It can be either null or:

<SCRIPT type = "text/JavaScript">
VaR otest = Document. getelementbyid ("test ");
VaR refchild = Document. getelementbyid ("X1 ");
VaR newnode = Document. createelement ("p ");
Newnode. innerhtml = "this is a test ";
Otest. insertbefore (newnode, refchild );
</SCRIPT>

Effect:In this example, a new node is inserted before the X1 node.

 

Or:

<SCRIPT type = "text/JavaScript">
VaR otest = Document. getelementbyid ("test ");
VaR refchild = Document. getelementbyid ("X1 ");
VaR newnode = Document. createelement ("p ");
Newnode. innerhtml = "this is a test ";
Otest. insertbefore (newnode, refchild. nextsibling );
</SCRIPT>

Effect:In this example, a new node is inserted before the next node of the X1 node.

 

It can also be:

<SCRIPT type = "text/JavaScript">
VaR otest = Document. getelementbyid ("test ");
VaR newnode = Document. createelement ("p ");
Newnode. innerhtml = "this is a test ";
Otest. insertbefore (newnode, otest. childnodes [0]);
</SCRIPT>

In this example, a new node is inserted before the first subnode. You can also insert a new node in another location by changing childnodes [,...].

As you can see, the insertbefore () method inserts a new node before an existing subnode.But in Example 1, The insertbefore () method can also be used to insert a new node at the end of the subnode list. The two conditions are combined to find that the insertbefore () method can insert nodes anywhere in the subnode list.

The following examples show that:

　　Appendchild () method adds a new subnode at the end of the subnode list of the node.

　　The insertbefore () method inserts a new node anywhere in the node's subnode list.

Related attributes and methods in the DOM Model

Attribute:

• Nextsibling returns the next sibling node of the current node (read-only)
• Previussibling returns the previous sibling node of this node (read-only)
• Parentnode returns the parent node (read-only)
• List of child nodes of the childnodes storage node (read-only)
• Nodevalue returns the node text (read/write)
• Text returns the text content of the node and its descendants (read/write)
• Nodename: return the node name (read-only)
• Attribute list of the attributes storage node (read-only)
• Datatype returns the Data Type of this node
• Definition defines nodes in DTD or XML mode (read-only)
• Doctype specifies the file type node (read-only)
• Documentelement returns the root element of the document (read/write)
• Firstchild returns the first child node of the current node (read-only)
• Implementation returns the xmldomimplementation object
• Lastchild returns the last child node of the current node (read-only)
• Nodetype return node type (read-only)
• Nodetypedvalue stores node values (read/write)
• Ownerdocument returns the root document containing this node (read-only)
• Parsed: returns whether the node and Its subnodes have been parsed (read-only)
• Prefix returns the namespace prefix (read-only)
• Preservewhitespace specifies whether to retain white space (read/write)
• URL returns the URL of the recently loaded XML document (read-only)
• XML returns the XML Representation of the node and its descendants (read-only)

Method:

• Getelementsbytagname returns the set of elements with the specified name.
• Appendchild adds a new subnode to the current node, which is placed after the last subnode
• Createelement: Create an element node
• Createtextnode: Create a text node that includes the given data
• Removechild deletes a specified subnode from the subnode list.
• Haschildnodes: returns whether the current node has subnodes.
• Clonenode returns the copy of the current node
• Createattribute
• Createcdatasection create CDATA segments that contain the given data
• Createcomment create a comment Node
• Createdocumentfragment create a documentfragment object
• Createentityreference: Create an entityreference object
• Createnode creates nodes of the given type, name, and namespace.
• Createporcessinginstruction
• Insertbefore inserts a subnode before a specified Node
• Load import the XML document at the specified position
• Loadxml import the XML document of the specified string
• ReplaceChild replaces the specified child node from the child node list
• Save the XML file to the specified Node
• Selectnodes matches the specified node and returns the list of matched nodes.
• Selectsinglenode matches the specified node and returns the first matching node.
• Transformnode converts nodes and their descendants using the specified style table.
• Transformnodetoobject: Use the specified style sheet to convert nodes and their descendants to objects.

Dom Document Object Model knowledge