DEV Community

Victor Ogbonna
Victor Ogbonna

Posted on

Advanced DOM Manipulation Techniques: A Comprehensive Guide to Selecting and Manipulating Elements

#webdev #javascript #programming #tutorial

Introduction
The foundation of dynamic web development is the Document Object Model (DOM), which gives programmers the tools to work with and modify the structure and content of HTML documents. This essay will go into the complex realm of DOM manipulation, emphasizing sophisticated methods for element selection and manipulation.

Selecting Elements

  1. getElementById: To choose just one element by using its unique identification, use the "getElementById" method, which is straightforward yet effective. When working with elements that have a unique and constant ID attribute, this is quite helpful.

selecting elements

  1. querySelector and querySelectorAll: Developers can use CSS-style selectors to pick elements with the "querySelector" method, which offers a succinct and versatile syntax. "querySelectorAll" expands on this ability by allowing the selection of multiple elements using the supplied selector.

query selection

  1. getElementsByClassName and getElementsByTagName: These methods give you more precise control over element selection by giving you options for choosing elements based on their class name or tag name.

select element by names

Manipulating Elements

  1. Changing Content: Changing an element's content is frequently necessary for dynamic web applications. An element's HTML content can be set or retrieved with ease using the "innerHTML" property

changing content

  1. Changing Styles: An essential component of contemporary web development is dynamic styling. By adjusting different CSS properties, developers can dynamically change an element's appearance by gaining access to its "style" property.

changing styles

  1. Modifying Attributes: HTML elements' behavior and appearance are largely determined by their attributes. Developers can dynamically add or remove attributes from an element using the "setAttribute" and "removeAttribute" methods.

modifying attributes

In summary
Developing interactive and responsive web applications requires developers to have a solid understanding of advanced DOM manipulation techniques. Developers may create smooth and captivating user experiences by using robust selection methods like "querySelector" and "querySelectorAll" and knowing how to alter content, styles, and attributes dynamically. With its vast range of features, the DOM continues to be a fundamental component of web development, enabling programmers to create dynamic and interactive websites.

Top comments (3)

Collapse
 
efpage profile image
Eckehard •

If you are using the HTML-DOM-API to build your DOM, you do not need all these query selectors. CreateElement will just return the DOM object to work with.

Ok, the API is not too easy to use. But there are some libraries like DML or VanJS that make working on the DOM very simple.

Collapse
 
outstandingvick profile image
Victor Ogbonna •

Thank you, I will make an article about that in the nearest future.

Collapse
 
efpage profile image
Eckehard • • Edited

Good Idea!

One of the strange concepts of HTML/JS is the way things are connected. Why do we need to search for an element we just have created two lines ago? Only very forgetful people do that. Assume the following situation:

<body>
  <h1 id="headline1">Test</h1>
  <script>
      let myHeadline = document.getElementById("headline1")
      myHeadline.textContent = "Headline changed"
  </script>
</body>
Enter fullscreen mode Exit fullscreen mode

The problem here is, that for every element you need two new identifiers:

  • an ID-name
  • a variable

This is not nice and bloats our namespace. Ok, you can argue: Javascript is executed later, so HTML is executed earlier and there is a good reason we need to search. But is it really? Let´s try:

<body>
  <h1 id="headline1">Test1</h1>
  <script>
      let myHeadline1 = document.getElementById("headline1")
      let myHeadline2 = document.getElementById("headline2")
      myHeadline1.textContent = "Headline 1 changed"
      myHeadline2.textContent = "Headline 2 changed"
  </script>
  <h1 id="headline2">Test2</h1>
  </body>
Enter fullscreen mode Exit fullscreen mode

The result is:

Image description

And you get an error:

Uncaught TypeError TypeError: Cannot set properties of null (setting 'textContent')
    at <anonymous> (c:\Users\Ecki\Documents\html_test\dev\Vanilla\12_getElement\index.html:16:31)
Enter fullscreen mode Exit fullscreen mode

Headline 2 is not yet created when the script is executed. In fact, HTML and JS are execued in the order they appear in the source. Why can we not simply use things we just created?

In fact, we can! Did you know, the browser does some magic in the background? This works as well:

<body>
  <h1 id="headline1">Test</h1>
  <script>
      headline1.textContent = "Headline changed"
  </script>
</body>
Enter fullscreen mode Exit fullscreen mode

All ID´s are provided as global variables, so document.getElementById() is not necessary at all. This feature works in all modern browsers, but implementation is kind of awkward, so it is not recommended to use.

if you use DML or VanJS, you just do the same like this, so you do not need an ID at all (50% less global names):

  <script>
      let myHeadline =   h1("Test")
      myHeadline.textContent = "Headline changed"
  </script>
Enter fullscreen mode Exit fullscreen mode

If you do not need the DOM reference explicitely, you can also write

  <script>
      h1("Test").textContent = "Headline changed"
  </script>
Enter fullscreen mode Exit fullscreen mode

so, you need not additional variables at all. In this case the code is kind of crazy, as you create a headline with a text and immediately change the text.

The real advantage of this kind of DOM manipulation is - beside its simplicity - the possiblility to use local variables, closings or objects to handle DOM elements, which makes your code much more reliable.

Read next

mshsayket profile image

Laravel 11 Livewire Wizard Multi Step Form Tutorial

Saddam Hossain -

m_sea_bass profile image

Enabling Application Downloads in Local bolt.new

M Sea Bass -

gladiatorsbattle profile image

How to Kickstart Your Web Development Journey in 2024: A Comprehensive Guide

Gladiators Battle -

spicecoder profile image

Hierarchical Flattening: The Secret to Managing Complexity in Software Design

pronab pal -