Javaweb's JavaScript combination (iii)

1, Case one: Add nodes at the end the first step: get to the UL tag Step two: Create the Li label document.createelement ("label name") Method Step three: Create a text Document.createtextn        Ode ("Text content"); Fourth step: Add text below Li using the AppendChild method Fifth step: Add to the end of UL using AppendChild Method 2, Element object (Elements object) * * To manipulate the element object, you must first obtain Take the element,-use the corresponding method in document to get the * * Method * * * * Get the value inside the property getattribute ("attribute name")-Var            INPUT1 = document.getElementById ("inputID");            alert (Input1.value);                Alert (Input1.getattribute ("value"));                Sets the value of the property Input1.setattribute ("Class", "haha");            Delete the attribute Input1.removeattribute ("name"); * * Cannot delete the value * * * to get the sub-label under the label * * Use attribute childNodes, but this property is poor compatibility * * The only effective way to get label face tag, use Getelementsbytagna            Me Method-var ul11 = document.getElementById ("Ulid1");            Get UL below sub-label//var lis = Ul11.childnodes;            alert (lis.length); var lis = ul11.getelementsbytagname ("Li");           alert (lis.length); 3, Node object property One * nodeName * nodeType * nodevalue * When parsing HTML using DOM, HTML tags, attributes and text are required Encapsulates the value of an object * tag node nodetype:1 nodeName: Uppercase tag name such as span Nodevalue:null * attribute node corresponding value Nodetyp E:2 NodeName: Property name NodeValue: Value of Property * Text node corresponds to value nodetype:3 nodeName: #text nodevalue : Text content 4, node object properties two <ul> <li>qqqqq</li> <li>wwww</li> </ul> * Parent Section        Point-ul is Li's parent node-parentnode-//Get li1 var li1 = document.getElementById ("Li1");        Get ul var ul1 = Li1.parentnode;    alert (ul1.id); * Child node-Li is a sub-node of ul-childNodes: Get all child nodes, but poor compatibility-firstchild: Get first child node-//Get the first child node of UL Id=li            1//Get ul var ul1 = document.getElementById ("Ulid");            The first child node var li1 = Ul1.firstchild;        alert (li1.id);   -LastChild: Get Last child node//Get Last child node         var li4 = Ul1.lastchild;    alert (li4.id);        * Peer node-li direct relationship is sibling node-nextSibling: Returns the next sibling node of a given node.        PreviousSibling: Returns the previous sibling node of a given node.        -//Get Li's ID is Li3 's previous and next sibling node var li3 = document.getElementById ("Li3");        alert (li3.nextSibling.id); alert (li3.previousSibling.id); 5, manipulating the DOM tree * * AppendChild Method-Adding child nodes to the end-features: similar to the effect of clipping paste * * insertbefore (Newnode,oldnode) Method-Insert a new node before a node-two parameters * the node to be inserted * before who insert-insert a node, node does not exist, create Build 1, create the label 2, create the text 3, add the text below the label-code/* 1, get to li13 label 2, create Li 3, create text 4, add text to Li below 5, get to UL 6, add Li to ul below (in <li> sable cicada </li> add <l before        I> </li>) * *//Get Li3 label var li13 = document.getElementById ("li13");        Create the li var li15 = document.createelement ("Li"); Create text var text15 = document.createTextNode ("Dong Xiao Wan");        Add text to Li AppendChild li15.appendchild (text15);        Get to ul var ul21 = document.getElementById ("Ulid21"); Before <li> Sable cicada </li> Add <li> dong Xiao Wan </li>//insertbefore (Newnode,oldnode) Ul21.insertbefore (l            I15,LI13);            There is no InsertAfter () method * * RemoveChild Method: Delete node-delete by parent node, cannot delete itself-/* 1, get to Li24 label        2. Get parent node UL label 3, perform delete (delete via parent node) *///Get li tag var li24 = document.getElementById ("li24");        Get parent node//Two Way 1, get through ID, 2, get var ul31 = document.getElementById via attribute parentnode ("ulid31");        Delete (via parent node) Ul31.removechild (li24); * * ReplaceChild (Newnode,oldnode) Method: Replace node-cannot replace itself with parent node substitution-two parameters * * First parameter: new node (replacement node) * * Second            Parameters: Old node (node replaced)-code/* 1, get to li34 2, create label Li 3, create text 4, add text below Li 5, obtain the UL label (parent node) 6,Line substitution operation (ReplaceChild (Newnode,oldnode)) *//Get li34 var li34 = document.getElementById ("li34");        Create the li var li35 = document.createelement ("Li");        Create text var text35 = document.createTextNode ("Zhang Mowgli");        Add text to Li under Li35.appendchild (TEXT35);        Get ul var ul41 = document.getElementById ("ulid41");        Replacement node Ul41.replacechild (LI35,LI34); * * CloneNode (Boolean): Copy node-//To copy the UL list into another div/* 1, get to UL 2, execute Copy method CloneNode method copy TR UE 3, put the copied content into the div inside to * * get to DIV * * AppendChild method * *//Get UL V        Ar ul41 = document.getElementById ("ulid41"); Copy the UL and put it in a similar clipboard var ulcopy = Ul41.clonenode (true)//get to div var divv = document.getElementById ("DIVV"        );    Put the copy in the Div and go to divv.appendchild (ulcopy);            * * Operation DOM Summary * Get node Usage method getElementById (): Find the corresponding node through the id attribute of the node. GetelementsbynaMe (): finds the corresponding node through the Name property of the node. getElementsByTagName (): Find the corresponding node by node name * method of Inserting Nodes InsertBefore method: Insert AppendChild method before a node: Add at the end, cut Cut Paste * Delete Node method RemoveChild method: Remove the node method by parent node ReplaceChild method: Replace 6, innerHTML by parent node Sex * This property is not part of the DOM, but most browsers support properties first: Get text content * * */Get span label var span1 = document.getElementById ("Sid        ");    alert (span1.innerhtml); Second function: Set content inside tag (can be HTML code) * * *//to DIV inside set content 
　　
Javaweb's JavaScript combination (iii)