Home > Developer > JavaScript
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>dom Basic </title>
<style type= "Text/css" >
OL li ol li{font-size:13px;}
</style>
<body >
<ol>
<li><ol>
<li>node.firstchild=node.childnodes[0], first child node </li>
<LI>NODE.LASTCHILD=NODE.CHILDNODES[NODE.CHILDNODES.LENGTH-1] Last child node </li>
<li>node.ownerdocument, returns the Document object document</li>
<li>node.nextsibling, next brother node </li>
<li>node.previoussibling, former brother node </li>
<li>node.parentnode, parent node </li>
<li>node.appendchild, add a child node at the end of the element </li>
<li>node.insertbefore (), add child nodes before the node </li>
<li>node.repalcechild, replacing child nodes </li>
<li>node.removechild, deleting child nodes </li>
<li>node.clonenode (), Clone child node, when CloneNode (true), clone entire subtree, false copy only current node </li>
</ol>
</li>
<li><ol><li>getelementbyid method (): Returns only the first occurrence of the ID, except IE8 and the following browser area, are case-sensitive, IE7 and the following version will return the name value with the same ID as the form element if the value appears before the given ID element </li >
<li>getelementbytagname method (), which returns a collection of htmlcollection arrays: Htmlcollection also contains a Nameitem () method, You can get the same element as the name value in Htmlcollection; Getelementbytagname ("*") can get all the elements (IE8 and below can also get comments) </li>
<li>getelementbyclassname method (), returns a collection of htmlcollection arrays </li>
<li>getelementbyname (), returns a collection of htmlcollection arrays, which can be used to get the value of a radio button, as well as a Nameitem () method </li>
</ol>
<ol><li>id:div.id</li>
<li>class:div.className</li>
<li>style:div.style (. Color/fontsize ...) </li>
<li>title:div.title</li>
<li> Note: Non-custom attributes can be manipulated in this way (IE8 and below) </li>
</ol>
<ol><li> get: Div.getattribute (attribute name can be customized) </li>
<li> settings: Div.setattribute (attribute name, value), the attributes set by this method are uniformly converted to lowercase. </li>
<li> Delete: Div.removeattribute (attribute name, value), IE6 and previous version do not support </li>
<li> notes: IE7 and previous versions, getting the set class and style attributes through Get/setattribute has no effect. The style returns the object, class can be set by classname, while IE7 and previous versions get event return strings, other browsers return functions </li>
</ol>
<ol><li>getnameditem ():d iv.attributes.getNamedItem ("id"). nodevalue==div.attributes["id"].nodevalue== Div.getattribute ("id") </li>
<li>removenameditem ():d iv.attributes.removeNamedItem ("id") </li>
<li>setnameditem () </li>
<li>item (POS) </li>
<li> Note: Save all the features used to do feature traversal can come in handy, different browser output order will be different, and IE7 and previous version will output all features, so need to use div.attributes[i]. Specifie returns True to determine whether this property is set </li>
</ol>
<ol><li> Create nodes: createelement (); IE7 and the following browsers have compatibility issues when creating the input radio button and the Button-reset button, and we need to write the property values out during the creation process. namely: createelement ("<button type=\" reset \ "></button>"); </li></ol>
</li>
<LI><H4>ATTR attribute node: NodeType for 2,nodename attribute name, NodeValue for attribute value <ol>
<li>attr=document.createattribute (property name ("Id/lang/title ...")) Create attribute </li>
<li>attr.value=value, Attribute assignment </li>
<li>element.setattributenode (attr), adding attributes to Nodes </li>
<li>element.getattributenode (property name). Value gets the values of the property </li>
<li>element.removeattributenode (property name) Delete attribute </li>
</ol>
</li>
<li><ol>
<li> Create a text node: document.createTextNode () </li>
<li> linked text node: Div.normalvalue (), sibling text node under the same element node becomes the same text node </li>
<li> split text node: Splittext, Text node. Splittext (divided seat) </li>
<li> assigning values to text nodes text.nodevalue= "<div> Text</div> ", will output directly" <div> Text</div> " Text, not converted to HTML text </li>
</ol>
</li>
<li><ol>
The <li>document type has only one child node <html>, which can be document.documentelement</li>
<li>document.body can get the BODY element directly </li>
<li>document.title Get document title </li>
<li>document. Url</li> in the URL address bar
<li>document.domian get domain name: domain name can be loose but can not be tightened </li>
<li>document.referrer get the address of the source page </li>
<li> Special Collections: All <form> in document.anchors--documents with name Merit <a> element <br/>document.forms Element <br/>document.images All <img> elements <br/>document.links all <a> elements with href attributes </li>
<li>document.write/writeln (output will be a "\ n"), if the output script tag, then the end of the label </script> need to write separately to the output of the corresponding--"</ SCR "+" ipt> "</li>
</ol>
</li>
<li><ol>
<li>document.createdocumentfragment (no parameters) to create a document fragment, Fragment.appendchild to add a child node, execute Somenode.appendchild ( Fragment) operation fragment all child nodes will be transferred and deleted </li>
</ol>
</li>
<li><ol>
<li>document.compactmode to Judge </li>
<li>ie also introduces documentmode;5 to IE5 promiscuous mode, 7 for IE7 blending mode, 8 for IE8 standard mode </li>
</ol>
<ol>
The <li>div/body.scrollintoview () window scrolls to its top as much as possible to align with the top of the element </li>
</ol>
<ol>
<li> Example: Document.documentElement.contain (document.body);//true</li>
<li>firefox:document.documentelement.comparedocumentposition (document.body)//Return to (4+16) </li>
</ol>
<ol>
<li>innertext: Manipulate text content in all descendant nodes, filter tags (Firefox is not supported, use Textcontent instead) <br/>
The labels entered in the innertext will be translated output and will not be labeled <br/>
Compatible Judgment:
Function (e) {typeof e.textcontent== "string"? E.textcontent:e.innertext}
</li>
<li>innerhtml: You can create DOM subtree as specified <br/> remove IE8 and insert script tag below will not be executed (ie must also add scope elements before) <br/>
Adding a STYLE element also has compatibility issues:<br/>
For Opera, Firefox and Ie<br/>
Div.innerhtml= "_<style Type="text/css">body{background-color:yellow;} </style> " <br/>
Div.removechild (Div.firstchild);<br/>
Add style to the head tag for Safari and Chrome <br/>
Document.getelementbytagname ("Head") [0].appendchild (Div.firstchild);<br/>
IE8 provides window.tostatichtml () as an HTML string for innocuous handling
</li>
Both the <li>outtext and outhtml are based on the existing elements for processing </li>
</ol>
</li>
<li>
<ol>
<li> when removing replacement innerhtml (subtree), delete the event handlers in the subtree, and if the element binds the event, the binding between the element and the handler remains in memory if the condition occurs frequently, memory usage increases significantly </li>
<li> minimal access to the DOM, which is inefficient, caches the necessary data and assigns it to dom</li> at once
<li> encapsulation of reusable structures </li>
</ol>
</li>
</ol>
</body>
Javascript--dom Learning Notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
