JS Dom Programming

1. Node and its type: 1). element node 2).  Attribute node: An attribute of an element that can be manipulated directly by property.   3). Text node: is a child node of an element node whose contents are text.    2. Where do you write the JS code in the HTML document?   0). Write the code directly in the HTML page. <button id= "button" onclick= "alert (' Hello World ');" >click me!</button> Cons: ①. js and HTML strong coupling, do not take advantage of code maintenance ②. If the click function is more complex, you need to define a function before you complete the A reference to a function is more troublesome

 1). Generally, it is not possible to get the node in the body directly before the body node, because the HTML document tree is not loaded yet,      gets the specified node:    

3. How to get the element node:

1). **document.getelementbyid: Gets the corresponding individual node based on the id attribute

2). **document.getelementsbytagname: Gets the array with the name of the specified node according to the tag name, the length property of the array object can get the lengths of the array

3). Document.getelementsbyname: Gets an array of nodes that match the criteria based on the node's Name property, but IE is implemented differently from the standard: in an HTML document if a node (LI) does not have a name attribute, ie makes You can't get an array of nodes with Getelementsbyname, but Firefox can.

4). Other two methods, IE is not supported at all, so it is not recommended to use 4. Get attribute node: 1). * * You can get and set the value of an attribute node directly through Citynode.id

2). Gets the attribute node through the GetAttributeNode method of the element node, and then reads and writes the property value 5 through NodeValue. Gets the child node of the element node (* * Only the element node has child nodes!): 1). The ChildNodes property gets all the child nodes, but the method is not practical.  Because if you want to get a collection of the specified child nodes for the specified node, you can call the element node's getElementsByTagName () method directly to get it. 2). FirstChild property gets the first child node 3). The LastChild property gets the last child node 6. Get the text node: 1). Step: Element node--Get child node 2 of element node. If the element node is only a child node of the text node, for example <li id= "BJ" name= "Beijing" > Beijing </li>, <p> which city do you like? </p> you can get to the specified element node first Elenode, and then uses the EleNode.firstChild.nodeValue method to read and write the value of its text node

7. Properties of the node:  1). NodeName: Represents the name of the current node. Read-only property.  ** if the given node is a text node, the NodeName property returns a string  2 that contains the #text). NodeType: Returns an integer that represents the type of the given node.   Read-only properties. 1--element node, 2--attribute node, 3--text node   **3). NodeValue: Returns the current value (string) of the given node. Read-write property   ①. element node, return value is null.   ②. Attribute node: The return value is the value of this property   ③. Text node: The return value is the content of this text node           8. Create an element node:  1). CreateElement (): Creates a new element node according to the given label name. Method has only one parameter: the name of the element node being created, is a string.                    The return value of the     method: is a reference pointer to the new node. The return value is an element node, so its NodeType property value is equal to 1.                             * * The new element node is not automatically added to the document, it is just an object that exists in the JavaScript context.                          9. Create a text node:  1). createTextNode (): Creates a new text node that contains the given text. The return value for this method is a pointer to the new text node reference. It is a text node, so its NodeType property equals 3.                    The         method has only one parameter: The text string that the new text node contains. New element nodes are not automatically added to the document                            10. Add a child node to the element node:  1). AppendChild (): var reference = Element.appendchild (NewChild): The given child node NewChild becomes the last child node of the given element nodes element.                    The return value of the      method is a reference pointer to the new child node .                              11. Replacement of the node:  1). ReplaceChild (): Replaces one child node in a given parent element with another child node    var Reference = Element.replacechild (newchild,oldchild); The     return value is a reference pointer to the child node that has been replaced  2). The node has a moving function in addition to the replacement function .   3). This method can only complete one-way substitution, and if you need to use bidirectional substitution, you need a custom function:  /**   * Interchange anode and BNode   * @param {Object} anode   * @param {OBJEC T} BNode   * *  function Replaceeach (anode, BNode) {     if (anode = BNode) {&NBSP;&NBSP;&NB Sp;return;   }      var aparentnode = Anode.parentnode;   //If anode has parent node   if (aparentnode) {   var bparentnode = BNode.parentNode;  & nbsp;     //If BNode has parent node   &NBSP;&NBSP;&NBSP;IF (bparentnode) {    var Tempnode = Anode.clonenode (true);     bparentnode.replacechild (Tempnode, BNode);     aparentnode.replacechild (BNode, anode);     }   }

 }     12. Insert node:  1). InsertBefore (): Inserts a given node into the front of a given child node of a given element node      var reference =  Element.insertbefore ( Newnode,targetnode); The          node NewNode will be inserted into element node elements and appear in front of the node TargetNode. The node TargetNode must be a child node of element elements.  

    2). Custom InsertAfter () method            /**   * Insert NewChild after Refchild Edge   * @param {object} newChild   * @param {object} refchild   */ function InsertAfter (NewChild, refch ILD) {  var refparentnode = Refchild.parentnode;      //Determine if there is a parent node in Refchild    if (Refparentnode) {   //Determines whether the Refchild node is the last child node of its parent node    if (Refchild = = Refparentnode.lastchild) {    refparentnode.appendchild (newChild);    }else{     refparentnode.insertbefore (NewChild, refchild.nextsibling);    }    }  }         13. Delete node:  1). RemoveChild (): Removes a child node from a given element       var reference = element.removechild (node); The    return value is a reference pointer to a child node that has been deleted. When a node is deleted by the RemoveChild () method, all child nodes contained by the node are deleted at the same time.    If you want to delete a node, butDo not know which parent node it is, the ParentNode property can help.        14. innerHTML property:  1). This property is supported by almost all browsers, but is not part of the DOM standard. The InnerHTML property can be used to read, write HTML content in a given element     15. Other properties, see Api:nsextsibling,  previoussibling