Python day56-57 JS

One, node operation

The commonly used node is document and element, the previous content we describe the node's lookup and Node properties operation, this section is mainly listed in the node itself to create, add, delete, replace and other operations.

1. Create a Node

The following syntax allows you to create an element tag that allows you to assign operations and attribute actions to the element tags you create, using the following example:

var ele_img=document.createelement ("img");                                          Create the Node object ele_img, ele_img.src= "meinv.jpg" for the img tag element;                                                            The assignment operation of the tag attribute can also be done by the native JS method ele_img.height= "" "; ele_img.width=" 250 ";

2, increase the node

To increase the node operation first need to find a parent node, the parent node to increase the node operation, because the addition of nodes need to have a new node object, that is to be added node label, it is usually used with the creation of nodes, the application example is as follows:

var ele_outer=document.getelementsbyclassname ("outer") [0];                         Get a parent node Ele_outervar ele_append=document.getelementsbyclassname ("append") [0];                       Add Node Ele_append.onclick=function () {        var ele_img=document.createelement ("img") triggered by binding event form;                                 Create the node to be inserted        ele_img.src= "meinv.jpg";        "Ele_img.height=";        Ele_img.width= "";        Ele_outer.appendchild (ELE_IMG)                                             //Append node, the node will be appended to the last    };

The Append node above will append the added node to the last face of all child tags in the parent node, and if you need to specify an additional location, you need to specify an existing sub-label in the Insertchild mode, as shown in this example:

var ele_outer=document.getelementsbyclassname ("outer") [0];                         Get a parent node var ele_p=document.getelementsbytagname ("P") [0];                                   Obtain a child node under the parent node as the Insertion node reference node var ele_append=document.getelementsbyclassname ("append") [0];ele_append.onclick= function () {        var ele_img=document.createelement ("img");                                 Create the node to be inserted        ele_img.src= "meinv.jpg";        "Ele_img.height=";        Ele_img.width= "";        Ele_outer.insertbefore (ele_img,ele_p)                                      //Insert node, Syntax Order: (To insert node, reference node)    };

3. Deleting nodes

The same deletion of a node is also required to specify a parent node that deletes a child element by removing one of its child elements, as in the following example:

var ele_outer=document.getelementsbyclassname ("outer") [0];                                Get a parent Node object var ele_p=document.getelementsbytagname ("P") [0];                                          Gets a child node object under the parent label var ele_delete=document.getelementsbyclassname ("delete") [0];ele_delete.onclick=function () {        ele_outer.removechild (ele_p)                                                      //delete node    };

4. Node substitution

Node substitution also needs to find a parent node, replace the existing sub-label under the node, and, of course, create a new replacement tag, replacing the element that needs to be replaced, as follows:

var ele_outer=document.getelementsbyclassname ("outer") [0];                               Get a parent Node object var ele_p=document.getelementsbytagname ("P") [0];                                         Get the next child node object to be replaced by the parent node Var ele_replace=document.getelementsbyclassname ("Replace") [0];ele_replace.onclick= function () {        var ele_h1=document.createelement ("H1");                                         Create a new Replacement object        ele_h1.innertext= "Beauty series";        Ele_outer.replacechild (ele_h1,ele_p)                                             //Replace node with syntax order (new replacement node, old replaced node)        }        

5. Replication nodes

The concrete examples are as follows:

var ele_outer=document.getelementsbyclassname ("outer") [0];var ele_copy=ele_outer. CloneNode ();        Console.log (ele_copy)                                                    //The result is a outer parent tag that does not contain any child tags var ele_copy=ele_outer. CloneNode (true);        Console.log (ele_copy)                                                    //result is outer parent tag, including all child tags

Python day56-57 JS