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

  • document.querySelector(".my-element"): Returns an element instance to use other built-in methods against. Query with IDs using #my-element syntax, or with attributes using [my-element] syntax. Returns null if nothing is found.

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

  • element.innerHTML: Returns a string representing the current state of that element’s inner HTML content, including tags, attributes, and 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

  • element.classList.add("class-name"): Add extra classes as parameters to add multiple classes.

Read more here.

Change an element’s attributes

  • element.getAttribute("some-attribute"): Returns a string value for the attribute; returns null if the attribute doesn’t exists.

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

Change element’s inline CSS properties

  •[propertyName]: Return the current value of a property. Replace propertyName with properties like width, borderWidth, or any CSS property converted to camelCase.

Read more here.

Get the vertical or horizontal scroll distance in the viewport

  • window.scrollY: Returns a read-only number representing the distance from the top of the page to the top of the current scroll position. This is a method on the window object only.

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

  • Math.round(element.getBoundingClientRect()[dimension]): Returns an element’s dimension ( width or height) as a number literal.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store