Interacting with the DOM in JS, the Basics

Here’s a quick run-down of simple but easy methods to manipulate a web page using vanilla JavaScript. There are many more which are clearly outlined on pages like You May Not Need jQuery, but this should serve as a nice starting point on methods you are likely to use day-to-day.

Mandatory “smash that like button and subscribe” if you find this helpful. 😉

Get an element

Bonus: you can replace document with another element instance to further scope the search of your query. For example:

// get a parent element
const firstElement = document.querySelector(".cool-element-one")
// get an element within the parent element, ignoring rest of DOM
const secondElement = firstElement.querySelector(".cool-element-two")

Read more about querySelector and querySelectorAll.

Get an element’s inner HTML or text

Notes: innerText is not the same as textContent, although it’s easy to confuse them. The latter returns all text, including hidden text, text within style and script tags, and the like. textContent is useful when cloning nodes or sanitizing information (e.g., insert some unsafe content into a dummy element, then retrieve it using .innerHTML).

Read more about innerHTML and innerText.

Change an element’s classes

Read more here.

Change an element’s attributes

Read more about getAttribute, setAttribute, removeAttribute, hasAttribute, toggleAttribute, and hasAttribute.

Change element’s inline CSS properties

Read more here.

Get the vertical or horizontal scroll distance in the viewport

Bonus: You can use element.scrollTop and element.scrollLeft to get the scroll distance within a scrollable element/container. They both return a number literal, just like scrollX and scrollY

Read more about scrollY and scrollX.

Get an element’s dimensions or relative position in the viewport

Notes: getBoundingClientRect is a very versatile built-in function with great support. The only instance methods not supported are x and y, and that’s in IE (of course).

Alternative: You can also use window.getComputedStyle in conjunction with parseFloat to calculate an element’s height or width value as calculated from CSS. Here is an example of that:

const height = parseFloat(getComputedStyle(element, null).height.replace("px", ""))const width = parseFloat(getComputedStyle(element, null).width.replace("px", ""))

Read more about getBoundingClientRect and getComputedStyle.

I wish someone had given me a guide like this a few years ago when I started to move away from jQuery; just a quick run down of some of the more common methods. Perhaps I’ll write a part two later with some lesser known, but still useful helper methods.

Please give me a shout on twitter if you found this helpful!

George is a front-end developer and digital designer living in Oakland, California. He is currently between jobs, about to start at ServiceNow on their Design Systems team. Other times, he can be found long boarding, playing video games, or collecting way too many Pokemon cards.

Learning to see. @gwtrev