edit-article

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

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">selectors and selection</h1> <h2>[WHAT]</h2> <ol> <li>] 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 ...</li> </ol> <h2>[WHY]</h2> <ol> <li>] javascript performance can be significantly enhanced( versus using library methods for selection) by using (vanilla) js without any library's</li> </ol> <h2>[WHERE]</h2> <ol> <li>]&nbsp;</li> </ol> <h2>[WHEN]</h2> <ol> <li>]</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>]&nbsp;</li> </ol> <h2>[HOW-TO]</h2> <ol> <li><strong>x] getElementById()</strong></li> <ol> <li>] document.getElementById(id)</li> </ol> <li><strong>x] getElementsByName()&nbsp;</strong></li> <ol> <li>] document.getElementByName(name)&nbsp;</li> </ol> <li><strong>x] getElementsByTagName()</strong></li> <ol> <li>] document.getElementByTagName('p')</li> </ol> <li><strong>x] getElementsByClassName</strong></li> <ol> <li>] document.getElementsByClassName('google-link');</li> </ol> <li><strong>x] querySelector</strong></li> <ol> <li>document.querySelector('li:last-child');</li> <li>document.querySelector('ul li:last-child');</li> <li>document.querySelector('ul#list li:last-child');</li> <li>document.querySelector('a[href*="google.co.uk"]');</li> <li>document.querySelector('li:nth-child(6)');</li> </ol> <li><strong>x] querySelectAll&nbsp;</strong></li> <ol> <li>var odd = document.querySelectorAll('li:nth-child(odd)');</li> <li>var even = document.querySelectorAll('li:nth-child(even)');</li> </ol></ol> <h2>[REFERENCE]</h2> <ol> <li>]&nbsp;<a href="http://thewebdesignforum.co.uk/topic/1657-re-learning-native-javascript-part-1-selectors/">http://thewebdesignforum.co.uk/topic/1657-re-learning-native-javascript-part-1-selectors/</a></li> <li>] * qrySelector, qrySelectorAll * modern browsers(ie9+)</li> <li>]&nbsp;<a href="http://www.lucaongaro.eu/blog/2012/11/26/dom-selection-without-jquery/">http://www.lucaongaro.eu/blog/2012/11/26/dom-selection-without-jquery/</a></li> <ol> <li>has mini selector library you can create to simplify native selection&nbsp;</li> </ol></ol> <h1 style="text-align: center;">&nbsp;</h1>