DOM navigation properties are helpful when the elements are close to each other. If they are not close to each other, we have some more methods to search the DOM.

getElementById

• Returns the element with the specified ID attribute.

• If an element with the specified ID is not found, the method will return null.

const home = document.getElementById('home');
console.log(home); // <section id="home">...</section>

The getElementById method is useful when we know the ID of the element we want to select. In the example above, we know that the home section has an ID of home, so we can use the getElementById method to select it.

querySelectorAll

• Returns a static NodeList of all elements that match the specified CSS selector.

• The returned NodeList is static, which means it does not update automatically when the document changes.

const sections = document.querySelectorAll('section');
console.log(sections); // NodeList(4) [section#home, section#about, section#services, section#contact]

The querySelectorAll method is useful when we want to select multiple elements that match a certain criteria. In the example above, we want to select all the section elements in the document, so we can use the querySelectorAll method to select them.

querySelector

• Returns the first element that matches the specified CSS selector.

• If no elements match the specified selector, the method will return null.

const home = document.querySelector('#home');
console.log(home); // <section id="home">...</section>

The querySelector method is useful when we want to select the first element that matches a certain criteria. It is similar to the querySelectorAll method, but it only returns the first element that matches the criteria. Which is equivalent to document.querySelectorAll('section')[0].

getElementsByTagName

• Returns a list of HTML collection of elements with the specified tag name.

• The HTML collection is ordered and can be accessed by index numbers.

const sections = document.getElementsByTagName('section');
console.log(sections); // HTMLCollection(4) [section#home, section#about, section#services, section#contact]

The getElementsByTagName method is useful when we want to select multiple elements that have the same tag name. In the example above, we want to select all the section elements in the document, so we can use the getElementsByTagName method to select them.

getElementsByClassName

• Returns a list of HTML collection of elements with the specified name.

• The HTML collection is ordered and can be accessed by index numbers.

const elements = document.getElementsByClassName('some-class-name-from-your-HTML');
console.log(elements);

The getElementsByClassName method is useful when we want to select multiple elements that have the same name.

getElementsByName

• Returns a list of HTML collection of elements with the specified name attribute.

• The HTML collection is ordered and can be accessed by index numbers.

const items = document.getElementsByName('some-name-attribute-from-your-HTML');
console.log(items);

The getElementsByName method is useful when we want to select multiple elements that have the same name attribute.

These concepts are important to understand because they are used in many different situations. For example, when we want to select all the section elements in the document, we can use the querySelectorAll method or the getElementsByTagName method. Both methods will return the same result, but the querySelectorAll method is more flexible because it can select elements that match any CSS selector, while the getElementsByTagName method can only select elements that have the same tag name.

Practice

let us practice more on this topic and just to add some fun, instead of console.logging we will change some css properties of the elements we select. Also we won't be referring to HTML code above, we will be creating new HTML code and selecting elements from it.

document.getElementById()

<div id="myDiv">Hello World!</div>
<script>
  const myDiv = document.getElementById('myDiv');
  myDiv.style.backgroundColor = 'red';
</script>

document.querySelector()

<div class="myClass">Hello World!</div>
<script>
  const myElement = document.querySelector('.myClass');
  myElement.style.backgroundColor = 'red';
</script>

document.querySelectorAll()

<div class="myClass">Hello World!</div>
<div class="myClass">Hello Again!</div>
<script>
  const myElements = document.querySelectorAll('.myClass');
  myElements.forEach(element => {
    element.style.backgroundColor = 'red';
  });
</script>

document.getElementsByTagName()

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>
  const paragraphs = document.getElementsByTagName('p');
  paragraphs[0].style.backgroundColor = 'red';
</script>

document.getElementsByClassName()

<div class="myClass">Hello World!</div>
<div class="myClass">Hello Again!</div>
<script>
  const myElements = document.getElementsByClassName('myClass');
  myElements[0].style.backgroundColor = 'red';
</script>

document.getElementsByName()

<form>
  <label for="nameInput">Name:</label>
  <input type="text" id="nameInput" name="fullName">
  <input type="submit" value="Submit">
</form>
<script>
  const fullNameInputs = document.getElementsByName('fullName');
  fullNameInputs[0].style.backgroundColor = 'red';
</script>