Note JS Basic notes (DOM manipulation)

Learn JS together, the wrong place to welcome everyone to correct.

JS Dom operation

One

The basic method of acquiring a node in document
1.document.getelementbyid (' id '); Gets the element by ID, returning the specified unique element.
2.document.getelementsbyname ("name"); Gets the element by name, returning a collection of name= ' name '.
3.document.getelementsbyclassname ("classname")//classname to get the element, returns a collection of class= "classname" (incompatible IE8 and below).
4.document.getelementsbytagname (' div '); Gets the element with the element's label and returns the collection of all tags = "div".

getelementsbyclassname incompatible IE8 and below, so compatibility is required and collected in the following two ways:

Compatible with IE Getelementsbyclassname tag method one//write a function, each call this function Getelementsbyclassname (classname,root,tagname) {// Root: Parent node, TagName: The label name of the node.       Both parameters are optional if (root) {root=typeof root== "string"? document.getElementById (Root): root;    }else{Root=document.body; } tagname=tagname| | "                                        *"; if (document.getelementsbyclassname) {//If the browser supports Getelementsbyclassname, use return directly Root.getelem    Entsbyclassname (ClassName);    }else {var tag= root.getelementsbytagname (TagName);                                    Gets the specified element var tagall = []; Used to store eligible elements for (var i = 0; i < tag.length; i++) {//traversal of the obtained element for (Var j=0,n=tag[i].cl                    Assname.split ("); j<n.length;j++) {//iterates through the values of all classes in this element, and assigns a value to Tagnameall if (n[j]==classname) if it contains the specified class name {                    Tagall.push (Tag[i]);                Break }}} return Tagall  }}//compatible IE Getelementsbyclassname method 2//redefine Getelementsbyclassname method if (!document.getelementsbyclassname) {//Determine if IE Document.getelementsbyclassname = function (ClassName, Element) {var children = (Element | | document). Getelementsbytagna    Me (' * ');    var elements = new Array ();      For (Var i=0, i<children.length; i++) {var child = Children[i];      var classnames = Child.className.split (");           for (var j=0,len=classname.length; j<len; J + +) {if (classnames[j] = = className) {Elements.push (child);        Break  }}} return elements; };}

JS Node Operation method

1. Get the Node
Document.documentelement//Get the entire HTML DOM structure
Element.childnodes//Get all child nodes of element
Element.parentnode//Get the parent node of element
Element.nextsibling//Get the next sibling node of element
Element.previoussibling//Get the previous sibling node of element
Element.firstchild//Get first node of element
Element.lastchild//Get the last node of element
* Example:console.log (element.nextSibling.previousSibling);

2. Node get/Set properties
*element.setattribute ("Class", "Class1")//Set element properties
*element.getattribute ("class")//Get element attributes
*element.removeattribute ("class")//Delete element properties
* Example:element.parentNode.setAttribute ("id", "Bannerul");

3. Create a Node
CreateElement ()//Create an element with a label named TagName
createTextNode ()//Create a text node that contains textual text
Createdocumentfragment ()//Create Document fragmentation node
* Example:document.createElement ("P");
* Example:document.createTextNode ("Hellow World");
* Document.createdocumentfragment () is to save the use of DOM. Each JavaScript operation on the DOM will change the page's monetization and refresh the entire page, consuming a lot of time. To solve this problem, you can create a document fragment, attach all of the new nodes to it, and then add the contents of the document fragment to the file at once.

4. Add, remove, replace, and copy nodes.
Element.appendchild ()//Add a new node to the end of the node's child nodes list
Element.insertbefore (newchild,refchild)//Insert a node in front of a child node newchild the new node refchild the specified node
Element.removechild ()//delete a node to delete only the next level of nodes
Element.replacechild (Newnode,oldnode)//Replace DOM node method newnode new node OldNode node to replace
Element.clonenode (Boolean)//set to True, clone node and its attributes, and descendants, set to False to clone only nodes and their attributes, not clone descendant nodes
Element.clonenode//differs from the general assignment var li = childodeclear (UL2). Childnodes[0]. CloneNode (true)! = var Li = childodeclear (UL2). Childnodes[0]; The latter is the assignment of a memory address, so the operation will change the original node

Problems:
When using Element.childnodes to get a collection of child elements of a node (UL gets the Li collection), if there are many spaces/returns, the length of the subset will not conform to the number of subsets. Need to manually clear carriage returns, spaces

<div id= "banner" >        <ul class= "ul" >            <li><a>1</a></li>                        <li> <a>2</a></li>                        <li class= "Li3" ><a>3</a></li>                        <li><a ><i>4sdfsfsdfsfsdfsfsfsdf</i></a></li>        </ul></div><script type= " re>

　　

Note JS Basic notes (DOM manipulation)