Basic DOM Operations with JavaScript

Master essential JavaScript techniques for manipulating web pages with precise, hands-on DOM control. Learn how to add, remove, and update content dynamically.

Ceyhun Enki Aksan Entrepreneur, Maker

Sep 15, 2025

DOM (Document Object Model) was discussed in the previous article. Now, I’d like to continue this topic by exploring DOM operations using JavaScript.

I previously covered a similar topic under the heading jQuery Traversing / DOM Insertion, Around jQuery Traversing / DOM Insertion, Around. However, the examples were limited to the *wrap methods. I will strive to make the examples in this article as diverse as possible, in order to provide a more comprehensive foundation.

DOM (Document Object Model)

As mentioned in the article “What is DOM?”, DOM is an interface developed to enable scripts to interact with documents such as HTML, XHTML, and XML, and is a W3C standard. According to the W3C, DOM is a platform and interface independent of any specific language, providing a way for programs and command scripts to dynamically access, manipulate, and update a document’s content, structure, and style ¹ ².

All elements present in an HTML file are identified as DOM objects. I previously referred to a global object (window) in JavaScript. To summarize, window is a global object representing the browser window, and encompasses all objects within the browser window. The document object, on the other hand, contains the DOM structure ³ ⁴ ⁵. The document object is identical to window.document ⁶. An iframe element can be defined within the document, but its content is represented by a separate window object. The HTML elements rendered inside the iframe are associated with the document (or window.document) belonging to that specific iframe. For more details on this topic, please refer to my article “Web API: Window.postMessage for Inter-Window Communication”.

Let’s return to the DOM and thus to the document object. The structure below will provide us with a basic HTML document. Additional elements (link, div, etc.) can further refine the DOM tree. Within this DOM structure, we can access and manipulate any element using selectors such as position, order, definition (tag), class, and id, via JavaScript.

<html>
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>

In the console of a modern web browser, typing document will allow you to access all details related to the DOM.

Among the listed properties, the first node (node) can be accessed via firstChild⁷⁸. The properties firstElementChild and documentElement allow us to access the html tag. Of course, the content structure may vary depending on the DOM structure. Similarly, the last node is also accessible via lastChild and lastElementChild. You can observe that each of these node elements is associated with the html tag. This is because the html element is the topmost container node used within a DOM. For this reason, it is designated as the root element.

Following the html, at the next level we find the head and body elements. Therefore, while body, head, documentElement, and title return a single object, other elements return an array. An example of this behavior can be seen in the following structures.

As previously mentioned, document.head returns the element with the head tag, while document.body returns the element with the body tag. Using document.title, we can access the page title. document.documentElement provides us with access to the entire document through the root element, HTML.

All the linked elements within the document can be accessed via document.links (<a href="...">...</a>). If embedded elements (<object>) are present, they can be accessed via document.embeds; forms via document.forms, images via document.images, and script files via document.scripts. Additionally, information about fonts, plugins, style sheets, and cookies can also be retrieved⁴.

// <head></head>
document.head
// <body></body>
document.body

Let’s create an example HTML file. We’ll use this HTML file throughout the rest of the article. When you type document into the browser’s console area, it will display information about the content of this HTML file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello World!</title>
  </head>
  <body id="page" class="single-page">
    <div id="main" class="container">
      <div class="row">
        <div class="col">
          <h1>Lorem Ipsum</h1>
        </div>
        <div class="col">
          <p><strong id="status">Dolor Sit Amet</strong></p>
        </div>
        <div class="col">
          <ul class="list">
            <li class="even">List item <span>(1)</span></li>
            <li class="odd">List item <span>(2)</span></li>
            <li class="even">List item <span>(3)</span></li>
            <li class="odd">List item <span>(4)</span></li>
          </ul>
        </div>
        <div class="col">
          <div id="even">
            <strong>Even</strong>
            <ul>
              <li>List item 5</li>
            </ul>
          </div>
          <div id="odd">
            <strong>Odd</strong>
            <ul>
              <li>List item 6</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

We can access elements in JavaScript through various methods such as getElementsByClassName(), getElementsByTagName(), getElementById(), and others. The key point worth noting is the distinction between getElements* and getElement* in the method definitions. The plural form returns a collection, while the singular form returns a single element. Unlike class and tag names, an ID serves as a unique identifier⁹.

const el = document.getElementById('status');
console.log(el.innerHTML); // Dolor Sit Amet

const el = document.getElementsByTagName('strong');
[...el].forEach(e => console.log(e.innerHTML)); // el.status.innerHTML

In addition to element-specific methods, we can also perform queries (selections) based on DOM elements. A query can target a tag, or a class, an ID, or an attribute value.

document
  .querySelector('p');
document
  .body
  .querySelector("style[type='text/css'], style:not([type])");

document
  .querySelectorAll('[data-name*="funnel-chart-percent"]');
document
  .querySelectorAll('iframe[data-src]');

querySelector() returns the first element matching the specified selector, while querySelectorAll() returns a static list (NodeList) of all elements matching the specified selector¹⁰¹¹.

Let’s return to our example and select the first element with the col class.

document  
  .getElementsByClassName('col')[0];

Now let’s refine this example further and access the inner content of the third li element within the third element that has the col class.

document
  .getElementsByClassName('col')[2]
  .getElementsByTagName('li')[2]
  .innerHTML;
// or
document
  .querySelector('.col>ul>li:nth-child(3)')
  .innerHTML;

In the above example, the list items have even and odd classes. In our new example, we’ll create two <section> elements labeled even and odd, and populate the values of the list items into the corresponding section elements¹²¹³.

[...document.querySelectorAll('.list li')]
  .forEach(e => document
    .getElementById(e.className)
    .querySelector('ul')
    .innerHTML += e.outerHTML);

Element Operations

Now, we know how to access DOM elements within a document based on their order, relationship with other nodes, class, ID, or tag definitions, and error attributes. Now, let’s examine how we can access detailed information about the elements we have already located¹⁴.

As previously mentioned, innerHTML and outerHTML are both Element properties. innerHTML returns or sets the HTML or XML content contained within the element as a string¹⁵, while outerHTML returns or sets the element itself along with its child elements as a string, including the element’s own markup¹⁶.

document.getElementById('status').innerHTML; // "Dolor Sit Amet"
document.getElementById('status').outerHTML; // "<strong id=\"status\">Dolor Sit Amet</strong>"

In addition to innerHTML and outerHTML, selection and manipulation operations can also be performed using properties such as attributes, classList, className, id, and tagName, as well as methods like getAttribute(), hasAttribute(), getAttributeNames(), hasAttributes(), and matches()⁹.

document.getElementsByTagName("strong")[0].attributes // [id="status"]
document.getElementsByTagName("body")[0].attributes // [id="page", class="single-page"]

for (let name of document.querySelector('ul').getAttributeNames()) {
  let
    value = document
      .querySelector('li')
      .getAttribute(name);
  
  console.log(`name: ${name}, value: ${value}`); // name: class, value: even

  value
    .setAttribute("class", "odd");
}

When creating new elements or removing existing ones, we can utilize methods such as createElement(), removeChild(), appendChild(), and replaceChild() at the document level⁴ ¹⁷ ¹⁸.

let
  newItem = document
    .createElement('li'),
  updatedItem = document
    .getElementById('even')
    .getElementsByTagName('ul')[0];

newItem
  .textContent = 'List item 7';
updatedItem
  .appendChild(newItem)
  .setAttribute('class', 'new');

Finally, let’s conclude with an example that demonstrates retrieving values from nested node elements. You can click on the lists present in the above HTML content and observe the values passed to the console area.

[...document.querySelectorAll('ul')].forEach(item => {
  item.addEventListener('click', el => {
    let value = el.target.firstChild.nodeValue.trim().replace(/[()]/g,'');
    (value === '') ? console.log('Empty area!') : console.log(value);
  });
});

The above code snippet adds a new item inside the list with the ‘even’ ID and assigns it the ‘new’ class. As a continuation of the initial article on DOM manipulation, in the next post I will prepare a to-do list application¹⁹ ¹⁴ ²⁰. Subsequently, I will detail the topics of data listing and visualization using the relevant methods²¹ ²² ²³.

*[DOM]: Document Object Model

Building A Vanilla JavaScript Todo App From Start To Finish | EP 1: Introduction & Project Setup](https://codingthesmartway.com/building-a-vanilla-javascript-todo-app-from-start-to-finish-ep-1-introduction-project-setup/?target=_blank&rel=noopener,noreferrer)

Member Zone

Basic DOM Operations with JavaScript

DOM (Document Object Model)

Element Operations

Footnotes