Javascript Dom Related Knowledge collation

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.