Javascript Dom Related Knowledge collation

One, selector

document.getElementById

document.getElementsByTagName

Document.getelementsbyclassname (IE9)

Document.getelementsbyname

Document.queryselector

Document.queryselectorall

The difference between the Queryselector and the Getelementby series:

1. Queryselector belongs to the selectors API specification, Getelementby is the DOM API specification

2. Queryselector is supported by IE 8+ Browser, getelementsbyclassname is supported by IE + +

3. Queryselector receive CSS selectors as parameters

4. Queryselectorall returns a static node list, and Getelementsby returns a live node list. The following demo 2 will cause an infinite loop

1 varUL = Document.queryselectorall (' ul ') [0],2Lis = Ul.queryselectorall ("li");3  for(vari = 0; i < lis.length; i++){4Ul.appendchild (document.createelement ("Li"));5 }6 7 //Demo 28 varUL = document.getElementsByTagName (' ul ') [0], 9Lis = Ul.getelementsbytagname ("li"); Ten  for(vari = 0; i < lis.length; i++){ OneUl.appendchild (document.createelement ("Li"));  A}

Ii. Properties of Dom objects

1. GetAttribute and SetAttribute can set the properties of Dom objects and support IE 8+ Browser. The value of the property can also be obtained through dom.attributes.nodeValue, and the compatibility is unknown

2. ParentNode can get parent node

3. FirstChild, LastChild, childnodes can get child nodes

4. NextSibling gets the next node of the known node, PreviousSibling gets the previous node of the known node

Iii. Methods of Dom objects

1. appendchild () Add node

2. CloneNode () Copy node

3. InsertBefore () insert before the specified child node of the current node

4. removechild () Delete node

5. ReplaceChild () Replace node

Iv. Events

1. DOM Level 0 Events (Dom.onclick) can only be bound once, and DOM Level 2 events (AddEventListener) may be bound more than once

2. When the same type of event is bound more than once, AddEventListener is executed in the order of addition. Attachevent in reverse order of addition

3. In Addeventlistner, the event object has the following properties, methods

• Target
• Type
• Stoppropagation ()
• Preventdefault ()

4. In Attachevent, the event object has the following properties, methods

• Srcelement
• Type
• Cancelbubble (default = False, set to True to cancel bubbling)
• ReturnValue (default = True, set to False to block default behavior)

Event handlers for browser

1 varEventutil = {2 3AddHandler:function(element, type, handler) {4         if(element.addeventlistener) {5Element.addeventlistener (type, Handler,false)6 7}Else if(element.attachevent) {8Element.attachevent (' on ' +type, handler)9             Ten}Else { Oneelement[' on ' + type] =Handler A         } -     }, -  theRemoveHandler:function(element, type, handler) { -         if(element.removeeventlistener) { -Element.removeeventlistener (type, Handler,false) -  +}Else if(element.detachevent) { -Element.detachevent (' on ' +type, hander) +  A}Else { atelement[' on ' + type] =NULL -         } -     } -}

Javascript Dom Related Knowledge collation