JavaScript DOM access

getting that HTML with JavaScript

The `document` object

In JavaScript we can access the document (global) object simply with the reserved keyword document:

The `getElement...` methods

Then, we can access DOM elements, such as all <h1> tags like this:

let h1 = document.getElementsByTagName('h1')

Note that would grab the object representation and not the content of the <h1> tags!

getElementById(...)
- returns an Element object with an id attribute of ...
  - e.g. getElementById('redlink') for all tags with id="redlink"
getElementsByClassName(...)
- returns an HTMLCollection of any element(s) with a class attribute of ...
  - e.g. getElementsByClassName('redlink') for all tags with class="redlink"
- we can specify more than one class name, separated by spaces
  - e.g. getElementsByClassName('redlink bluelink')
getElementsByTagName(...)
- returns an HTMLCollection of any element(s) with a tag of ...
  - e.g. getElementsByTagName('h1') for <h1> tags
- we can specify more than one tag name, separated by spaces
  - e.g. getElementsByTagName('h1 h2') for both <h1> and <h2> tags

An HTMLCollection has a typeof equal to object but behaves like an Array in the sense that we can access values with indices, as we will see below:

In order to grab the content of the tag, we would need to use the innerHTML property on the specific element of each returned HTMLCollection:

const navLinks = document.getElementsByClassName('navlink')
console.log(navLinks[0].innerHTML)
// "Link 1"
console.log(navLinks[1].innerHTML)
// "Link 2"

<html>

  <body>
  
    <div>
      <a class="navlink" href="#">Link 1</a>
      <a class="navlink" href="#">Link 2</a>
    </div>
  
  </body>
</html>

The querySelector method

We can access a DOM element using a CSS-style selector with the querySelector method:

with document we call the querySelector method
we then pass a CSS selector as an argument to that method
assigning the method call to a variable, the method will return an Element representing the first element that matches the CSS selector
- if no matches found, it will return null

let allToAnchor = document.querySelector("#someAnchor")
let allToClass = document.querySelector("a.important")
let allToTagList = document.querySelector("ul")
let allLinksToJon = document.querySelector("a[href='https://jxc.ca']")

let general = document.querySelector(selector)
// the object representations of the FIRST HTML element matching the selector

The querySelectorAll method

We can also access a selection of DOM elements that match a CSS-style selector with the querySelectorAll method:

with document we call the querySelectorAll method
we then pass a CSS selector as an argument to that method
assigning the method call to a variable, the method will return a NodeList
- elements will arrange in the order that they appear in the HTML document, with indices
- if no matches found, it will return an empty NodeList

let allToAnchor = document.querySelectorAll("#someAnchor")
let allToClass = document.querySelectorAll("a.important")
let allToTagList = document.querySelectorAll("ul")
let allLinksToJon = document.querySelectorAll("a[href='https://jxc.ca']")

let general = document.querySelectorAll(selector)
// the object representations of ALL HTML elements matching the selector

Like the getElement... methods, we would use element indices ([0], [1], [2], ...) to grab each instance, and then access its contents via the innerHTML property:

const aNavLinks = document.querySelectorAll('a.navlink')
console.log(aNavLinks[0].innerHTML)
// "Link 1"
console.log(aNavLinks[1].innerHTML)
// "Link 2"

<html>

  <body>
  
    <div>
      <p class="navlink">This won't query because it's a paragraph</p>
      <a class="navlink" href="#">Link 1</a>
      <a class="navlink" href="#">Link 2</a>
    </div>
  
  </body>
</html>

Note that because we specified "a.navlink" (and not ".navlink") in the argument, the navLinks variable won't contain the "p.navlink" data! Had we used only .navlink this would happen:

const navLinks = document.querySelectorAll('.navlink')
console.log(navLinks[0].innerHTML)
// "This won't query because it's a paragraph"
console.log(navLinks[1].innerHTML)
// "Link 1"

<html>

  <body>
  
    <div>
      <p class="navlink">This won't query because it's a paragraph</p>
      <a class="navlink" href="#">Link 1</a>
      <a class="navlink" href="#">Link 2</a>
    </div>
  
  </body>
</html>

PreviousJavaScript (on the browser and internet!)NextJavaScript DOM traversal

Last updated 1 month ago

let allToAnchor = document.querySelector("#someAnchor") let allToClass = document.querySelector("a.important") let allToTagList = document.querySelector("ul") let allLinksToJon = document.querySelector("a[href='https://jxc.ca']") let general = document.querySelector(selector) // the object representations of the FIRST HTML element matching the selector

let allToAnchor = document.querySelectorAll("#someAnchor") let allToClass = document.querySelectorAll("a.important") let allToTagList = document.querySelectorAll("ul") let allLinksToJon = document.querySelectorAll("a[href='https://jxc.ca']") let general = document.querySelectorAll(selector) // the object representations of ALL HTML elements matching the selector

<html> <body> <div> <p class="navlink">This won't query because it's a paragraph</p> <a class="navlink" href="#">Link 1</a> <a class="navlink" href="#">Link 2</a> </div> </body> </html>

The document object

The getElement... methods

The querySelector method

The querySelectorAll method

The document object

The getElement... methods

The querySelector method

The querySelectorAll method

The `document` object

The `getElement...` methods

The `document` object

The `getElement...` methods