## 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()*
- Foreword
- Introduction
- Preface
- About the Author
- Chapter 1 - Node Overview
- Chapter 2 - Document Nodes
- Chapter 3 - Element Nodes
- Chapter 4 - Element Node Selecting
- Chapter 5 - Element Node Geometry & Scrolling Geometry
- Chapter 6 - Element Node Inline Styles
- Chapter 7 - Text Nodes
- Chapter 8 - DocumentFragment Nodes
- Chapter 9 - CSS Style Sheets & CSS rules
- Chapter 10 - JavaScript in the DOM
- Chapter 11 - DOM Events
- Chapter 12 - Creating dom.js - a wishful jQuery inspired DOM Library for modern browers