# JS Tip of the Day: Finding Elements in the DOM

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-finding-elements-in-the-dom/643136>\
**Category:** web dev\
**Created:** [March 31, 2020, 1:43pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-finding-elements-in-the-dom/643136 "2020-03-31T13:43:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 31, 2020, 1:43pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-finding-elements-in-the-dom/643136/1 "2020-03-31T13:43:40Z")

</div>

**Finding Elements in the DOM**  
Level: Beginner

Historically, to access HTML elements from within a web page, 3 popular methods were often used:

- `getElementById()`
- `getElementsByClassName()`
- `getElementsByTagName()`

`getElementById()` returns a single element reference based on an exact match with an `id` attribute in an HTML element while `getElementsByClassName()` and `getElementsByTagName()` returns iterable array-like lists (`HTMLCollection` objects) of 0 or more elements matching a one or more class names or a single tag name respectively.

```auto
<div id="outer">
  <div class="inner">
    <span class="inner text">space</span>
  </div>
</div>

<script>
console.log(document.getElementById('outer'));
// <div id="outer">

console.log(document.getElementsByClassName('inner'));
// HTMLCollection[<div class="inner">, <span class="inner text">]

console.log(document.getElementsByTagName('div'));
// HTMLCollection[<div id="outer">, <div class="inner">]
</script>

```

These methods can work well, but are also very broad in what they can target individually. While you can access _all_ elements with a certain class applied or _all_ elements of a certain tag, it’s harder to mix the two, for example get just the “div” elements with the class “inner”. That’s where the newer query methods can come in handy.

With the popularity of JQuery and its ability to easily target elements through a CSS-style selectors, two new methods were added to provide similar functionality in the standard web API:

- `querySelector()`
- `querySelectorAll()`

These accept one or more comma-separated CSS queries and returns any matches to those queries found in the DOM. The difference between `querySelector()` and `querySelectorAll()` is that `querySelector()` will only return one element (the first if multiple are found) while `querySelectorAll()` will return multiple in iterable array-like lists (`NodeList` objects).

```auto
<div id="outer">
  <div class="inner">
    <span class="inner text">space</span>
  </div>
</div>

<script>
console.log(document.querySelector('#outer'));
// <div id="outer">

console.log(document.querySelectorAll('.inner'));
// NodeList[<div class="inner">, <span class="inner text">]

console.log(document.querySelectorAll('div'));
// NodeList[<div id="outer">, <div class="inner">]

console.log(document.querySelectorAll('div.inner'));
// NodeList[<div class="inner">]
</script>

```

As you can see, these two methods easily provide the same functionality as the others, plus provide more flexibility and specificity in element targeting. Chances are, if you’re looking for elements in the DOM, these are going to be your go-tos.

Also, each of the methods covered, while being used with `document` in the examples, will also work off of any element reference if you only wish to find elements that are descendants of that element.

```javascript
// only find divs inside #outer
let outer = document.getElementById('outer');

console.log(outer.getElementsByTagName('div'));
// HTMLCollection[<div class="inner">]

console.log(outer.querySelectorAll('div'));
// NodeList[<div class="inner">]

```

Though this can also be easily be done with a single call using a query.

```javascript
console.log(document.querySelectorAll('#outer div'));
// NodeList[<div class="inner">]

```

More info:

- [getElementsByTagName on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName)
- [getElementsByClassName on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)
- [getElementById on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
- [querySelector on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
- [querySelectorAll on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)

---

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [March 31, 2020, 6:36pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-finding-elements-in-the-dom/643136/2 "2020-03-31T18:36:50Z")

</div>

Can querySelector and querySelectorAll be applied to specific elements to find specific nodes that are children or must they always reference the “document”?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 31, 2020, 6:56pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-finding-elements-in-the-dom/643136/3 "2020-03-31T18:56:43Z")

</div>

Yup! “each of the methods covered” includes the query methods. I’ll add a query example with the other one to make that more clear 😉