article

selectors and selection

[WHAT]

  1. ] with the inception of libraries like jquery that make selection and manipulation of DOM elements a painless process, we often overlook using native javascript selection methods to select elements in our code, this is being revisited ...

[WHY]

  1. ] javascript performance can be significantly enhanced( versus using library methods for selection) by using (vanilla) js without any library's

[WHERE]

[WHEN]

  1. ]

[EXAMPLE]

[HOW-TO]

  1. x] getElementById()
    1. ] document.getElementById(id)
  2. x] getElementsByName() 
    1. ] document.getElementByName(name) 
  3. x] getElementsByTagName()
    1. ] document.getElementByTagName('p')
  4. x] getElementsByClassName
    1. ] document.getElementsByClassName('google-link');
  5. x] querySelector
    1. document.querySelector('li:last-child');
    2. document.querySelector('ul li:last-child');
    3. document.querySelector('ul#list li:last-child');
    4. document.querySelector('a[href*="google.co.uk"]');
    5. document.querySelector('li:nth-child(6)');
  6. x] querySelectAll 
    1. var odd = document.querySelectorAll('li:nth-child(odd)');
    2. var even = document.querySelectorAll('li:nth-child(even)');

[REFERENCE]

  1. http://thewebdesignforum.co.uk/topic/1657-re-learning-native-javascript-part-1-selectors/
  2. ] * qrySelector, qrySelectorAll * modern browsers(ie9+)
  3. http://www.lucaongaro.eu/blog/2012/11/26/dom-selection-without-jquery/
    1. has mini selector library you can create to simplify native selection 

 

Details Photos Edit more

Details

ID: 1763

NAME: selectors-and-selection

DESCRIPTION: overview of selection methods in javascript, native javascript only, no librarie$ for help

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: 0

OWNER ID: 75

Content Photos Edit more

photos

page_photo

actions

Email Email-Owner SMS and