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]

1. ] 

[WHEN]

1. ]

[EXAMPLE]

1. ] 

[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

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

photos

actions

Email Email-Owner SMS and