3.1 By ID

getElementById() expects to find only one ID since an ID should appear only once in each document.

Do not type getElementsById() by mistake, it is singular, not plural.

It is typical to assign this node to a variable so you can do something with the result of the selection.

var myNode = document.getElementById("sidebar");

Henceforth, to access that node just type the variable in the console: mynode.

For instance you can pass myNode into the dir() method.

dir(myNode);

Or find its .firstChild

myNode.firstChild;

Remember everything is a node, even a carriage return. So if .firstChild returns something unexpected it is whatever the first node is...

3.2 By HTML tag

getElementsByTagName() lets you access elements by their HTML tags. It returns an array.

var myListItems = document.getElementsByTagName("li");

Above the array is assigned to a variable that can be accessed by typing the variable name.

To get to individual elements, you can use an array notation: arrayName[0]. Remember that arrays are 0 indexed, so item 2 is actually the third item [ 0, 1 ,2 ].

myListItems[2];

or just target the third item in the array directly:

var myListItem = document.getElementsByTagName("li")[2];

To access all items in an array you will need to loop through the array which will be covered later.

You can chain together selection methods to accomplish complex targeting.

var myNodes = document.getElementById("sidebar").getElementsByTagName("li");

Now since .getElementById() returns an array we should specify which item we want to operate on when stringing together with a method that takes a single argument:

myNodes[2].firstChild;

3.3 By Class

Note that getElementsByClassName is incompatible with older browsers.

(Using jQuery to query by class is more broadly supported.)

var myClasses = document.getElementsByClassName("level-2");

Again you can chain selections to acheive greater specificity.

var myNodes = document.getElementById("sidebar").getElementsByClassName("level-2");

3.4 Querying CSS

querySelector() and querySelectorAll() allow users to target selectors using CSS notation.

querySelector() targets the first instance of the CSS target it encounters.

and querySelectorAll() returns an array of targeted selectors.

Just like with CSS you can target mixtures of IDs, Classes, and HTML Elements.

3.4.1 querySelector()

To target the first instance of <p> inside the <footer>

document.querySelector("footer p");

To target the an instance of <p> which is an immediate descendant of <footer>

document.querySelector("footer > p");

.childNodes, .firstChild, and .lastChild will work on querySelector() but not querySelectorAll() since it returns an array

document.querySelector("footer .footer-menu").childNodes;

3.4.2 querySelectorAll()

Returns an array

document.querySelectorAll("#sidebar .level-1");

Again, when calling a method that operates on a single argument, you need to specify which item in the array you are targeting.

document.querySelectorAll("#sidebar .level-1")[2].childNodes;

You can target the type attributes of HTML elements. Such as, select all input fields on the page of [type=radio].

document.querySelectorAll("input[type=radio]")

You can even target img tags from two different sections each with their own id.

document.querySelectorAll('#artists li>img', '#comingtoevent img')

Notice each set of selectors is wrapped in its own quotation marks and separated by a coma.

N.B. .querySelector() is not compatible with older browsers. But it does have a little bit better support than getElementsByClassName.

3.5 Named Form Elements

...