Javascript--dom programming

1. Dom:document object Model (text object models):

--d: Document-html document or XML document;

--o: Object-document object's properties and methods;

--M: Model;

--dom is a tree-based API for XML (HTML);

--dom Tree: The Hierarchy of nodes (node);

--dom a document as a family tree (father, son, brother);

--dom defines node's interface and many node types to represent multiple aspects of an XML node.

2, node: From the network theory, representing a connection point in the network. A network is a collection of nodes.

--1) element node;

--2) attribute node: The attribute of the element, which can be manipulated directly by the property;

--3) Text node: is a child node of an element node whose contents are text.

3. Get the element node:

--1) document.getElementById: Gets the corresponding individual node according to the element id attribute;

--2) document.getElementsByTagName: Gets the data of the specified node name according to the tag name, which is the method of the node interface, each node has the method;

--3) Document.getelementsbyname: According to the Name property of the node to obtain a few matching conditions of the array, but the implementation of IE with the standard of the Internet, in the HTML document if a node (LI) does not have a name attribute, IE cannot use this method to get the specified node.

4. Read/write attribute node:

--Use the element node directly to get the corresponding attribute node and manipulate it accordingly:

= "ABCD";

--The attribute node is obtained through the GetAttributeNode method of the element node, and then the property value is read and written by NodeValue;

5. Gets the child nodes of the element node (only the element nodes have child nodes):

The--childnodes property can get all the child nodes, but because the specified child nodes can be obtained through the getelementsbytagname of the element node, the method is not practical;

The--firstchild property gets the first child node;

The--lastchild property gets the last child node.

6. Get the text node:

The text node is also a child node of the element node, which can get the text node directly through the element node, and then read and write its contents through the NodeValue property of the text node.

7, three types of nodes have the following three properties:

--nodetype: Node type: 1 for element node, 2 for Attribute node, 3 for text node

--nodename: node Name

--nodevalue: Node value

--where NodeType and nodename two properties are read-only, and nodevalue can be modified.

8. Create an element node:

--1) createelement (): Creates a new element node according to the given tag name;

--2) method has only one parameter: the name of the element node being created, which is the string type;

--3) The return value of the method is a reference pointer to the new node, an element node, and a nodetype of 1;

--4) The new element node is not automatically added to the document, it is simply an object that exists in the JavaScript context.

9. Create a text node:

--1) createTextNode (): Creates a new text node containing the given text;

--2) Parameter: The text string contained in the new text node;

--3) The return value of the method is a reference pointer to the new node, a text node with a nodetype of 3;

--4) new element nodes are not automatically added to the document.

10. Add a child node for the element node:

--1) appendchild (): var reference = Element.appendchild (NewChild);

--2) Specifies that the child node newchild will be a child of the last face of the given element node elements;

--3) The return value of the method is a reference pointer to the new child node.

11, the replacement of the node:

--1) ReplaceChild (): Replaces one child node in a given parent element with another given child node;

--2) var reference = Element.replacechild (NewChild, oldchild);

--3) The return value is a reference pointer to a child node that has been replaced;

--4) The Change node has the function of moving besides the function of replacing;

--5) method can only complete one-way substitution, if you need to use bidirectional substitution, you need to customize the function:

functionReplaceboth (Anode, BNode) {//if two nodes are equal, return directly    if(Anode = =BNode) {        return; }    //Gets the parent node of two nodes    varAparent =Anode.parentnode; varBparent =Bnode.parentnode; //If the parent node is not empty    if(Aparent &&bparent) {        //get a clone of one of two nodes        varAnodeclone = Anode.clonenode (true); //The cloned node does not include the response function of the original node and some other properties, so you need to add it manuallyAnodeclone.onclick =Anode.onclick; Anodeclone.index=Anode.index; //Use the parent node's ReplaceChild () method to swapBparent.replacechild (Anodeclone, BNode);    Aparent.replacechild (BNode, anode); }}

12. Delete the node:

--1) removechild (): Removes a child node from a given element;

--2) var reference = Element.removechild (node);

--3) The return value is a reference pointer to the node that has been deleted;

--4) When a node is deleted by the RemoveChild () method, all child nodes contained by the node will be deleted at the same time.

13. Insert the node:

--1) InsertBefore (): Inserts a node in front of a given child node of a given element node;

--2) var reference = Element.insertbefore (NewNode, TargetNode);

--3) node NewNode will be inserted into the element and appear in front of the TargetNode;

--4) TargetNode must be a child node of element node elements.

--5) You can use the InsertBefore () method to implement the InsertAfter () method:

functionInsertAfter (NewNode, Refnode) {//Gets the parent node of the inserted node    varParentNode =Refnode.parentnode; //If a parent node exists    if(parentnode) {//if the inserted node is the last child node of the parent node, the new node is inserted directly at the last child node of the parent node        if(Refnode = =parentnode.lastchild)        {Parentnode.appendchild (NewNode); }        //Otherwise, get the next sibling node that is inserted into the child node before inserting the new node in front of the sibling node        Else{            varNextNode =refnode.nextsibling;        Parentnode.insertbefore (NewNode, NextNode); }    }}

14. innerHTML Properties:

--1) browsers almost all support this property, but are not part of the DOM standard;

--2) The innerHTML attribute can be used to read and write HTML content in a given element;

Javascript--dom programming