DOM Manipulation Basics: Learn Fast in 5 steps

Making learning DOM manipulation basic skills turn a static HTML page into a living and interactive experience. DOM manipulation basics is used to allow javascript to communicate with a static HTML page. Most people have experienced websites that update dynamically, a new tweet appears; a form error pops-up; a light/dark theme toggle changes the overall look. That is the result of DOM manipulation happening in real-time.

DOM stands for document object model. In essence, it is a tree based representation of your HTML. Each element, each element’s attributes and each line of Text within an element is a node in that tree. Using javascript, you can read, add, change or delete any of those nodes.

In terms of DOM manipulation basics if you are new to the subject matter, it may appear difficult to learn. However, the concepts behind DOM manipulation basics are relatively easy to understand. You simply need to locate the element(s), which you wish to manipulate and once located, you can either add or change the element. Below are five basic steps to follow for you to achieve total control of your webpage.

1. Locating elements: a core skill of DOM manipulation basics

Prior to manipulating an element, you must first retrieve it. The DOM has several ways in which you can locate elements including using IDs, classes, tag names or CSS selectors.

The easiest method is getelementbyid. When you use this method you obtain the element with the specified id. Since IDs are unique, this method is both fast and reliable. For example, you could retrieve a header by its id and subsequently alter the header’s Text.

If you need to access multiple elements at once you should use either getelementsbyclassname or getElementsByTagName. Both of these methods return live collections of elements. More recently, however, we have found that using queryselector and querySelectorAll offer us greater flexibility. While queryselector returns the first element that matches the specified CSS selector, querySelectorAll returns a static list of all matching elements.

At least initially, after obtaining a reference to an element, you can place it in a variable and re-use it. Therefore, finding an element is a fundamental DOM manipulation basic skill – finding what you need prior to altering it.

2. Changing content/Text: an essential skill for DOM manipulation basics

Following the selection of an element, you likely wish to change what the user views. The fastest and safest way to accomplish this is to modify the textcontent property of the selected element. This property replaces all Text contained within the element regardless of whether there is any embedded HTML tags. This is an advantage because modifying the textcontent property does not require parsing the embedded HTML tags.

However, if you need to embed HTML code into your element, you should utilize the innerhtml property of the element. The innerhtml property takes a string containing embedded HTML code and creates the equivalent elements. Nevertheless, please be aware that embedding un-verified user input into your page can lead to cross-site scripting attacks (XSS). As such, always verify user input prior to utilizing innerhtml.

When dealing with form fields (e.g., input boxes), you can use the value property of the field to read or set the current value. For example: you can retrieve what was entered by a user, validate it and display a message adjacent to it.

Changing content is one of the most common tasks used in DOM manipulation basics. This allows developers to update counters, display messages and populate data from an API.

3. Changing attributes and/or style information in DOM manipulation basics

Attributes (e.g., src, href, alt, etc.) can be added or removed from elements using methods like getAttribute(), setAttribute() and removeattribute().

As examples: you can change an image’s source dynamically; update where a link points to; set a custom data attribute to store temporary information. This is particularly important for building interactive galleries, forms and single page applications.

Changing CSS Styles is another critical part of DOM manipulation basics. You can modify the style property of any given element directly. For instance: element.style.backgroundcolor = ‘blue’; changes the background color. However, inline Styles can become difficult to manage. Therefore, add/remove CSS classes using classlist.add(); classlist.remove(); or classList.toggle();

Utilizing classes provides cleaner separation between your styling logic and your actual logic. Your styling rules are defined within your CSS files; your logic simply adds/removes classes on/off. This approach is easier to maintain; often faster performing than modifying Styles directly.

4. Reacting to user actions (Events) with DOM manipulation basics

Locating and modifying elements only accounts for half of the process required to build an interactive web application. Prior to performing these modifications you must determine when to execute them. That is where Events come into play. Events represent actions that occur in the browser e.g.: clicks; keystrokes; submission of forms; movement of mouse pointers; and many other actions.

An event listener is attached to an element using the addEventListener method. The addEventListener method requires two parameters: the type of event (e.g., click); and a function which will be executed upon receipt of the event. Once executed, you can perform your DOM modification activities (change Text; modify Styles; create new elements).

Example: attach an event listener to a button click; retrieve the input from an input box; and show greeting message somewhere else on the page. The event listener represents the bridge between user activity and DOM updates.

Do not forget to remove event listeners when they are no longer needed (especially in larger applications). If you fail to do so memory leaks may occur. Additionally be aware of how Events propagate through the DOM (both bubbling and capturing) and utilize stoppropagation when necessary.

5. Adding/removing elements: advanced skills in DOM manipulation basics

There are times when you need to add new elements to the page that were not already present rather than just modifying existing ones. This is where DOM manipulation gets truly powerful. You can create new elements with document.createelement(); define their properties; and finally insert them into the DOM by utilizing methods like appendchild(); insertbefore(); or append();

Example: you might create a new listitem for a to-do app; specify its Text content; and append it to an existing unordered list. You can also create complex structures by gradually building elements and nesting them.

To delete an element call remove() on it or remove a child from its parent via removeChild(). This is how you implement delete buttons; clear notifications; clean up temporarily added elements.

The ability to add/remove elements dynamically allows developers to build dynamic interfaces such as chat windows; infinite scroll lists or modal dialogs without reloading the page.

Putting it all together

Together these five steps selecting elements; changing content; Modifying Attributes & Styles; reacting to Events; adding/removing elements comprise the entire toolset for DOM manipulation basics.

Begin by developing simple interactions. Create a button that changes the Text of a paragraph; develop a simple gallery that swaps images based on thumbnails; develop a to-do list that enables users to add/delete items.

The more you practice using these techniques the more natural DOM manipulation becomes. You will stop thinking about browsers as static documents and begin viewing them as living canvas that you have control over.

Core checklist for DOM manipulation basics

Below is quick reference guide that helps you learn more about DOM manipulation basics.

• Use document.getelementbyid() or queryselector() to find elements. If possible queryselector offers greater flexibility.
• Use textcontent when updating plain Text content. It is safe/fast.
• Be extremely careful when using innerhtml. Sanitize any user input provided to prevent XSS attacks.
• Alter Styles using CSS classes whenever possible. Use classlist.add(); classlist.remove(); classList.toggle().
• Add event listeners with addEventListener(). Try not to use inline onclick attributes.
• Create new elements using document.createelement(). Then append/appendchild().
• Delete elements using remove(). This is better than using removeChild().
• Test your DOM manipulations across different browsers. There may exist minor differences across various versions of browsers.

JavaScript.info’s section on DOM offers practical explanation regarding DOM for beginners. Freecodecamp also has great resource guide on DOM manipulation which includes interactive examples

New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily
New to JavaScript? JavaScript Introduction: 5 Proven Steps to Learn JS