Bo dinglesTM - -   Bright Lightbulb Graphic Ideas   - -

The Web Developer Bootcamp 2024

Colt Steele

Back to DOM Index Page

DOM | Selecting Elements
get Element

The get method allows you to manipulate specific objects by their specific name or type. *note: This is the OLDER way of selecting elements. The NEWER way is to use a querySelector().

  • - document.getElementById() allows you to select the DOM Objects by ID Name.
    • - selects a single element with a specific ID
    • - W3Schools
    • - MDN

  • - document.getElementsByTagName() allows you to select the DOM Objects by the TAG Name.
    • - selects all elements of a specific TAG type
    • - W3Schools
    • - MDN

  • - document.getElementsByClassName() allows you to select the DOM Objects by CLASS Name.
    • - selects all elements with a specific CLASS
    • - W3Schools
    • - MDN

Because getElementsByTagName() and getElementsByClassName() can return multiple elements, they return what is called an HTML Collection.. For example if you have a webpage with three images (img tag) and from the console, you call:

  • getElementsByTagName('img');
it would return HTML Collection (3) [img, img, img].

This is telling you that THIS specific collection contains three items. And because of the square brackets, an HTML Collection looks like an array, BUT IT ISN'T. You can NOT perform array functions on it. But it DOES have a length (3 in this case) and each individual img can be targeted by it's index just like an array.

querySelector()

getElement() is the OLDER way of selecting elements for manipulation and is seldom used anymore. You will however see it in older code. The NEW way of accomplishing this is by using querySelector(). querySelector() is a newer, all-in-one method to select a single element. This method works similarly to getElement(), but it differs in the following ways:

  • - document.querySelector() can be used to select ALL types of elements (HTML tags, ID's, and classes)
  • - document.querySelector() can only pick out the first item of a specific elements type
    • eg. if you have 2 [p] tags, document.querySelector() will only return the first tag.
    • this FIRST TAG limitation can be overridden. See Overriding the first element below

document.querySelector() uses the following syntax:

  • document.querySelector('html tag name')
  • document.querySelector('#idName')
  • document.querySelector('.(period)className')


Overriding the first element. Since document.querySelector() by default, will only return the FIRST element, we override this using :nth-of-type(x), for example: If we wanted to select the second [p] tag from above we would use

  • document.querySelector('p:nth-of-type(2)');


We can also select multiple attributes of an element. Suppose we have an anchor tag like so:

  • < a href="/wiki/Java" title="Java">Java< /a>
Since there will probably be multiple anchor tags on a page, we can target only the one with the title = "Java" by designating multiple attributes within the query selection, like so:
  • document.querySelector('a[title="Java"]')
  • we are selecting an a tag that contains a title = Java

querySelectorAll()

querySelectorAll() essentially works the same as querySelector(), but returns a collection of all matching elements. So if we call querySelectorAll() on our [p] tags from above, like so:

  • document.querySelectorAll('p');
we would return:
  • NodeList(2) [p, p]
So, similar to getElements(), this returns a collection. And while it looks like an array (because of the square brackets), it is not. But it does have a length (2) and individual elements can be targeted like an array.


We can also narrow our queries down by adding multiple queries within the selector. Say we a have a webpage with 10 [a] tags, 5 of which reside within a [p] tag. If we query the [a] tags:

  • document.querySelectAll('a');
we would return:
  • NodeList(10) [a, a, a, a, a, a, a, a, a, a]
because there are 10 [a]tags. But if we want to select only the [a] tags that reside within a [p] tag, we use the CSS Descendant Selector (space):
  • document.querySelectAll('p a');
this would return:
  • NodeList(5) [a, a, a, a, a]
because there are only 5 [a] tags that reside within [p] tags.

*note that you can use all of the CSS Selectors to define how your query selects elements for processing.



Remember, getElement(s) and query's return objects because the DOM is Javascript converting everything into an object. So because they are objects, we can open each object in the console and see it's properties.

Back to Top