Document Object Model

1. DOM =Document Object model; Dom is a tree structure, composed of node\element (node \ Element);2.　　Node\element; Element.id\element.classname\element.value\ .... element.tagname\element.nodename=the label name of the element; Element.nodetype; =the type of the element; Element (1); =elements; Attbribute (2); =attributes; Text (3) = =text node; Comment=comments; Document (9) = =Document DocumentFragment (one) =similar code snippets; Element.nodevalue=Text information for text nodes;3. Attributes element.attributes; =returns an NamedNodeMap object containing all the properties of the node; Element.hasattribute (key); =determine if the node has a key attribute; Element.getattribute (key); =gets the key property of the node; Element.setattribute (Key,value); =set the properties of the node; Element.removeattribute (key); =Delete the key attribute of the node;4. classlist; Element.classlist; =returns an array of classname; Element.classList.contains (); =determine if a class exists; Element.classList.add (); =Add class, parameter can be set multiple, but the parameter is array time performs tosting () operation, the result is plugged in; Element.classList.remove (); =Delete class, other and upstairs consistent; Element.classList.toggle (); =switch class, or delete if there is, no add;5. DataSet; Element.dataset=give the Node a storage space to store the custom attributes of the information; Setting Properties: Element.dataset.key=value; To delete a property:DeleteElemet.dataset.key, online says: Element.dataset.key =NULL, you can delete the property, the pro-test chorme does not delete the value will be converted to NULL, you can see this property on the label;6.get.. &query:　　document.getElementById ();　　Document.getelmentsbytagname ();　　Document.getelmentsbyname ();　　Document.getelmentsbyclassname (); Document.queryselector (); =similar to jquery's $, but if it is a set then only the first one will be returned; Document.queryselectorall (); =regardless of how many elements return a collection;7.　　DOM node relationship; Element.parentnode\element.parentelement; =father Element.nextsibling\element.nextelementsibling;=next brother Element.previoussibling ./element.previouselementsibling = last brother Element.firstchild\element.firstelementchild; =The first son of Element.lastchild\element.lastelementchild;=The last son Element.childnodes\element.children;=all the sons; Element.haschildnodes (CLD); =There is no key to this son; Element.childelementcount; =returns the child element, excluding the number of text nodes and notes; Element.matches (selector) \element.matchesselector (selector); =accept a cssselector to determine if the calling element matches; Element.isequalnode (node); =checks whether two nodes are equal. Element.contains (node) \element.comparedocumentposition (node); =The ancestor node receives a node to find out if there is no such node;8. Creating a DOM node Document.createelement (tag)=Create labels; document.createTextNode (text)=Create a text node; Document.createdocumentfragment ()=Create code Snippets; Element.clonenode (Isdeep)=cloning nodes;9. Manipulating DOM node Element.appendchild (nodes);=Insert a node after the element; Element.parentNode.insertBefore (node,element); =Element.parentNode.replaceChild (node,element);=The sibling node Element.parentNode.removeChild (element) is replaced by the parent;=Delete children by parent; Element.remove (); =Direct deletion;　　element.innerhtml;　　Element.innertext\element.textcontent element.outerhtml;　　Element.outertext;　　Element.insertadjacentelement (Position,node);　　Element.insertadjacentelement (Position,node);　　Element.insertadiacenttext (Position,node); Position:beforebegin\afterbegin\beforeend\afterend; =start label before \ Start label after \ End label before \ end tag;10.　　Textnode;　　Node.length;　　Textnode.nodevalue;　　Textnode.data;　　Textnode.appenddata (text);　　Textnode.deletedata (text);　　Textnode.insertdata (offset, count);　　Textnode.replacedata (offset, count, text);　　Textnode.splittext (offset);　　Textnode.substringdata (offset, count); Node.normalize ();11.　　Document document.documentelement; Iframe.contentdocument||iframe.contentWindow.document;　　Document.charset;　　Document.title;　　Document.head; Document.body= = document.getElementsByTagName (' body ') [0];　　document.links \ document.images\ document.forms; Document.readystate-Complete ; document.activeelement;12. Style Element.style.key=value;　　Element.style.property; Element.style.cssText= ' Key:value;key2:value2 '; Style=Document.defaultView.getComputedStyle (Element,pseduo_class); Style= Element.currentstyle;

Document Object Model