Chapter 4 - Element Node Selecting · DOM Enlightenment

## 4.1 Selecting a specific element node The most common methods for getting a reference to a single element node are: * *querySelector()* * *getElementById()* In the code below I leverage both of these methods to select an element node from the HTML document. live code:?[http://jsfiddle.net/domenlightenment/b4Rch](http://jsfiddle.net/domenlightenment/b4Rch) ~~~ <!DOCTYPE html> <html lang="en"> <body> <ul> <li>Hello</li> <li>big</li> <li>bad</li> <li id="last">world</li> </ul> <script> console.log(document.querySelector('li').textContent); //logs Hello console.log(document.getElementById('last').textContent); //logs world </script> </body> </html> ~~~ The?*getElementById()*?method is pretty simple compared to the more robust?*querySelector()*?method. The*querySelector()*?method permits a parameter in the form of a?[CSS selector syntax](http://www.w3.org/TR/css3-selectors/#selectors). Basically you can pass this method a CSS 3 selector (e.g.?*'#score>tbody>tr>td:nth-of-type(2)'*) which it will use to select a single element in the DOM. ### Notes *querySelector()*?will return the first node element found in the document based on the selector. For example, in the code example above we pass a selector that would select all the li's in CSS, but only the first one is returned. *querySelector()*?is also defined on element nodes. This allows for the method to limit (allows for context querying) its results to a specific vein of the DOM tree ## 4.2 Selecting/creating a list (aka?*NodeList*) of element nodes The most common methods for selecting/creating a list of nodes in an HTML document are: * *querySelectorAll()* * *getElementsByTagName()* * *getElementsByClassName()* Below we use all three of these methods to create a list of the?*`<li>`*?elements in the document. live code:?[http://jsfiddle.net/domenlightenment/nT7Lr](http://jsfiddle.net/domenlightenment/nT7Lr) ~~~ <!DOCTYPE html> <html lang="en"> <body> <ul> <li class="liClass">Hello</li> <li class="liClass">big</li> <li class="liClass">bad</li> <li class="liClass">world</li> </ul> <script> //all of the methods below create/select the same list of <li> elements from the DOM console.log(document.querySelectorAll('li')); console.log(document.getElementsByTagName('li')); console.log(document.getElementsByClassName('liClass')); </script> </body> </html> ~~~ If its not clear the methods used in the code example above do not select a specific element, but instead creates a list (aka?[*NodeLists*](https://developer.mozilla.org/En/DOM/NodeList)) of elements that you can select from. ### Notes *NodeLists*?created from?*getElementsByTagName()*?and?*getElementsByClassName()*?are considered live are will always reflect the state of the document even if the document is updated after the list is created/selected. The?*querySelectorAll()*?method does not return a live list of elements. Meaning that the list created from*querySelectorAll()*?is a snap shot of the document at the time it was created and is not reflective of the document as it changes. The list is static not live. *querySelectorAll()*,?*getElementsByTagName()*, and?*getElementsByClassName*?are also defined on element nodes. This allows for the method to limit its results to specific vein(s) of the DOM tree (e.g.*document.getElementById('header').getElementsByClassName('a')*). I did not mention the?*getElementsByName()*?method as it not commonly leverage over other solutions but you should be aware of its existence for selecting form, img, frame, embed, and object elements from a document that all have the same name attribute value. Passing either?*querySelectorAll()*?or?*getElementsByTagName()*?the string?*'*'*, which generally means all, will return a list of all elements in the document. Keep in mind that?*childNodes*?will also return a?*NodeList*?just like?*querySelectorAll()*,?*getElementsByTagName()*, and*getElementsByClassName* The?*NodeLists*?are array like (but does not inherit array methods) lists/collections and have a read only?*length*?property ## 4.3 Selecting all immediate child element nodes Using the?*children*?property from an element node we can get a list (aka?[*HTMLCollection*](https://developer.mozilla.org/en/DOM/HTMLCollection)) of all the immediate children nodes that are element nodes. In the code below I use?*children*?to create a selection/list of all of the*`<li>`*'s contained wiithin the?*`<ul>`*. live code:?[http://jsfiddle.net/domenlightenment/svfRC](http://jsfiddle.net/domenlightenment/svfRC) ~~~ <!DOCTYPE html> <html lang="en"> <body> <ul> <li><strong>Hi</strong></li> <li>there</li> </ul> <script> var ulElement = document.querySelector('ul').children; //logs a list/array of all immediate child element nodes console.log(ulElement); //logs [<li>, <li>] </script> </body> </html> ~~~ Notice that using?*children*?only gives us the immediate element nodes excluding any nodes (e.g. text nodes) that are not elements. If the element has no children then?*children*?will return an empty array-like-list. ### Notes *HTMLCollection*'s contain elements in document order, that is they are placed in the array in the order the elements appear in the DOM *HTMLCollection*'s are live, which means any change to the document will be reflected dynamically in the collection ## 4.4 Contextual element selecting The methods?*querySelector()*,?*querySelectorAll()*,?*getElementsByTagName()*, and*getElementsByClassName*?typically accessed from the?*document*?object are also defined on element nodes. This allows for these methods to limit its results to specific vein(s) of the DOM tree. Or said another, you can select a specific context in which you would like the methods to search for element nodes by invoking these methods on element node objects. live code:?[http://jsfiddle.net/domenlightenment/fL6tV](http://jsfiddle.net/domenlightenment/fL6tV) ~~~ <!DOCTYPE html> <html lang="en"> <body> <div><ul><li?class="liClass">Hello</li><li?class="liClass">big</li><li?class="liClass">bad</li><li?class="liClass">world</li></ul></div> <ul><li?class="liClass">Hello</li></ul> <script> //select a div as the context to run the selecting methods only on the contents of the div var?div?=?document.querySelector('div'); console.log(div.querySelector('ul')); console.log(div.querySelectorAll('li')); console.log(div.getElementsByTagName('li')); console.log(div.getElementsByClassName('liClass')); </script> </body> </html> ~~~ These methods not only operate on the live dom but programatic DOM structures that are created in code as well. live code:?[http://jsfiddle.net/domenlightenment/CCnva](http://jsfiddle.net/domenlightenment/CCnva) ~~~ <!DOCTYPE html> <html lang="en"> <body> <script> //create DOM structure var divElm = document.createElement('div'); var ulElm = document.createElement('ul'); var liElm = document.createElement('li'); liElm.setAttribute('class','liClass'); ulElm.appendChild(liElm); divElm.appendChild(ulElm); //use selecting methods on DOM structure console.log(divElm.querySelector('ul')); console.log(divElm.querySelectorAll('li')); console.log(divElm.getElementsByTagName('li')); console.log(divElm.getElementsByClassName('liClass')); </body> </html> ~~~ ## 4.5 Pre-configured selections/lists of element nodes You should be aware that there are some legacy, pre-configured arrays-like-lists, containing element nodes from an HTML document. Below I list a couple of these (not the complete list) that might be handy to be aware of. * document.all - all elements in HTML document * document.forms - all `<form>` elements in HTML document * document.images - all `<img>` elements in HTML document * document.links - all `<a>` elements in HTML document * document.scripts - all `<script>` elements in HTML document * document.styleSheets - all `<link>` or `<style>` objects in HTML document ### Notes These pre-configured arrays are constucted from the?[HTMLCollection](https://developer.mozilla.org/en/DOM/HTMLCollection)?interface/object, except?*document.styleSheets*?it uses*StyleSheetList* *[HTMLCollection](https://developer.mozilla.org/en-US/docs/DOM/HTMLCollection)*'s are live just like?*[NodeList](https://developer.mozilla.org/En/DOM/NodeList)*'s. Oddly?*document.all*?is constucted from a*?HTMLAllCollection*?not an?*HTMLCollection*?and is not supported in Firefox ## 4.6 Verify an element will be selected using?*matchesSelector()* Using the?*matchesSelector()*?method we can determine if an element will match a selector string. For example say we want to determine if an?`<li>`?is the first child element of a?*`<ul>`*. In the code example below I select the first*`<li>`*?inside of the??`<ul>`and then ask if that element matches the selector,?*`li:first-child`*. Because it in fact does, the?*matchesSelector()*?method returns?*true*. live code:?[http://jsfiddle.net/domenlightenment/9RayM](http://jsfiddle.net/domenlightenment/9RayM) ~~~ <!DOCTYPE html> <html lang="en"> <body> <ul> <li>Hello</li> <li>world</li> </ul> <script> //fails in modern browser must use browser prefix moz, webkit, o, and ms console.log(document.querySelector('li').matchesSelector('li:first-child')); //logs false //prefix moz //console.log(document.querySelector('li').mozMatchesSelector('li:first-child')); //prefix webkit //console.log(document.querySelector('li').webkitMatchesSelector('li:first-child')); //prefix o //console.log(document.querySelector('li').oMatchesSelector('li:first-child')); //prefix ms //console.log(document.querySelector('li').msMatchesSelector('li:first-child')); </script> </body> </html> ~~~ ### Notes matchesSelector has not seen much love from the browsers as its usage is behind browser prefixes?*mozMatchesSelector()*,*webkitMatchesSelector()*,?*oMatchesSelector()*,?*msMatchesSelector()* In the future?*matchesSelector()*?will be renamed to?*matches()*