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

  • : Returns an element instance to use other built-in methods against. Query with IDs using syntax, or with attributes using syntax. Returns if nothing is found.
  • : Same as , but returns a NodeList (a live collection of elements, which behaves more or less like an array). Access an individual element using the array-like index syntax, or convert the NodeList to an array using , where is your NodeList, to iterate over your elements using methods like and .

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

Read more about querySelector and querySelectorAll.

Get an element’s inner HTML or text

  • : Returns a string representing the current state of that element’s inner HTML content, including tags, attributes, and text.
  • : Sets the inner HTML of an element to the given . It must be proper HTML.
  • : Returns a string representing human-readable text within an element, including descendants.
  • : Sets the inner text of an element to the given . It can be any text, including special characters or even html, and will be rendered as a string exactly as given.

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

Read more about innerHTML and innerText.

Change an element’s classes

  • : Add extra classes as parameters to add multiple classes.
  • : Same syntax as above, but removed the class.
  • : Toggles a class on an element. Accepts a second and optional parameter, which if it evaluates to false, doesn’t toggle the class. Useful for conditionally toggling the class without an block.
  • : Returns or , indicating the presence of the class.
  • : replaces a given class on an element. If the class you want to replace isn’t present, the new class is added.

Read more here.

Change an element’s attributes

  • : Returns a value for the attribute; returns if the attribute doesn’t exists.
  • : Sets an attribute on an element with the specified value. Overwrites the existing attribute value if one exists.
  • : Removes the specified attribute from an element.
  • : Toggles an attribute on an element. Sets the value to `null`. Accepts a second and optional parameter, which if it evaluates to , doesn’t toggle the attribute.
  • : Returns or , indicating the presence of the attribute, regardless of value.

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

Change element’s inline CSS properties

  • : Return the current value of a property. Replace with properties like , , or any CSS property converted to camelCase.
  • : Set a given property name to a specified as a string. Setting a number value requires a valid CSS unit.

Read more here.

Get the vertical or horizontal scroll distance in the viewport

  • : 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 object only.
  • : Same as , but from the left of the viewport.

Bonus: You can use and 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

  • : Returns an element’s dimension ( or ) as a number literal.
  • : Returns an element’s relative position (, , , or ) from the edge of the viewport.

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

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

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