Mastering DOM Manipulation with JavaScript

2. Selecting Elements: Finding Your Way in the DOM

This section covers the various JavaScript methods used to select or access specific HTML elements (nodes) within the DOM, which is the first step in manipulating them.

Objectively, JavaScript provides several built-in methods on the `document` object to find elements, including `getElementById()`, `getElementsByTagName()`, `getElementsByClassName()`, `querySelector()`, and `querySelectorAll()`.

Delving deeper, it explains each method with examples:

• `document.getElementById('id')`: Returns a single element object with the specified ID (fastest).
• `document.getElementsByTagName('tagName')`: Returns an HTMLCollection (live, array-like) of elements with the given tag name.
• `document.getElementsByClassName('className')`: Returns an HTMLCollection of elements with the given class name.
• `document.querySelector('cssSelector')`: Returns the first element within the document that matches the specified CSS selector.
• `document.querySelectorAll('cssSelector')`: Returns a static NodeList (array-like) representing a list of the document's elements that match the specified group of selectors.

Further considerations include the difference between live HTMLCollections and static NodeLists, and choosing the most appropriate selection method based on needs (e.g., `querySelector` for flexibility with CSS selectors).

Before you can manipulate an HTML element, you first need to select it. JavaScript provides several methods to find elements in the DOM.

Common Selection Methods:

• `document.getElementById('elementId')`
  • Selects a single element that has the specified `id` attribute.
  • Returns the element object, or `null` if no element with that ID is found.
  • IDs should be unique within a document. This is generally the fastest selector.

  // HTML: <div id="main-title">Welcome</div>
  const titleElement = document.getElementById('main-title');
  if (titleElement) {
    console.log(titleElement.textContent); // "Welcome"
  }
                              

• `document.getElementsByTagName('tagName')`
  • Selects all elements with the specified HTML tag name (e.g., 'p', 'div', 'li').
  • Returns a live HTMLCollection (an array-like object) of elements. "Live" means it updates automatically if elements are added or removed from the DOM that match the selector.

  // HTML: <p>Para 1</p> <p>Para 2</p>
  const allParagraphs = document.getElementsByTagName('p');
  for (let i = 0; i < allParagraphs.length; i++) {
    console.log(allParagraphs[i].textContent); // "Para 1", then "Para 2"
  }
                              

• `document.getElementsByClassName('className')`
  • Selects all elements that have the specified class name.
  • Returns a live HTMLCollection.

  // HTML: <div class="box">Box 1</div> <span class="box">Box 2</span>
  const allBoxes = document.getElementsByClassName('box');
  console.log(allBoxes.length); // 2
                              

• `document.querySelector('cssSelector')`
  • Selects the first element in the document that matches the specified CSS selector (e.g., '#myId', '.myClass', 'div p', 'input[type="text"]').
  • Returns the element object, or `null` if no matches are found. Very versatile.

  // HTML: <ul><li class="item">First</li><li class="item">Second</li></ul>
  const firstItem = document.querySelector('li.item'); // Selects the first li with class 'item'
  if (firstItem) {
    console.log(firstItem.textContent); // "First"
  }
                              

• `document.querySelectorAll('cssSelector')`
  • Selects all elements in the document that match the specified CSS selector(s).
  • Returns a static (not live) NodeList (an array-like object). "Static" means it's a snapshot and doesn't update if the DOM changes.

  // HTML: <ul><li class="item">First</li><li class="item">Second</li></ul>
  const allItems = document.querySelectorAll('li.item');
  allItems.forEach(item => {
    console.log(item.textContent); // "First", then "Second"
  });
                              

Choosing the right selector depends on what you need to find. `querySelector` and `querySelectorAll` are very powerful due to their use of CSS selectors, while `getElementById` is very efficient for unique elements.

3. Traversing the DOM: Navigating Relationships

This section explains how to navigate the DOM tree by moving between related nodes (parent, children, siblings) once an element has been selected.

Objectively, selected DOM elements (nodes) have properties that allow you to access their relatives in the DOM tree, such as `parentNode`, `childNodes`, `firstChild`, `lastChild`, `nextSibling`, `previousSibling`, and more element-specific versions like `children`, `firstElementChild`, `lastElementChild`, `nextElementSibling`, `previousElementSibling`.

Delving deeper, it provides examples for accessing:

• Parent: `element.parentNode`
• Children: `element.childNodes` (includes text nodes, comments), `element.children` (HTMLCollection of element nodes only)
• First/Last Child: `element.firstChild`, `element.lastChild`, `element.firstElementChild`, `element.lastElementChild`
• Siblings: `element.nextSibling`, `element.previousSibling`, `element.nextElementSibling`, `element.previousElementSibling`

Further considerations include the difference between node-based properties (like `childNodes`) which include all node types, and element-specific properties (like `children`) which only include element nodes, and why the latter are often preferred for cleaner traversal.

Once you have a reference to a DOM element, you can navigate to its related elements (parent, children, siblings) using various properties. This is known as DOM traversing.

Parent Node:

• `element.parentNode`: Returns the parent node of the specified element.
• `element.parentElement`: Similar to `parentNode`, but returns `null` if the parent is not an element node (e.g., if it's the document itself). Often preferred.

// HTML: <div id="parent"><p id="child">I am a child.</p></div>
const childP = document.getElementById('child');
if (childP) {
  const parentDiv = childP.parentElement;
  console.log(parentDiv.id); // "parent"
}
                

Child Nodes:

• `element.childNodes`: Returns a live NodeList of all child nodes (including text nodes, comment nodes, and element nodes).
• `element.children`: Returns a live HTMLCollection of only the child element nodes. This is often more useful.
• `element.firstChild` / `element.firstElementChild`: Gets the first child node / element.
• `element.lastChild` / `element.lastElementChild`: Gets the last child node / element.

// HTML: <ul id="myList"><li>Item 1</li> <!-- comment --> <li>Item 2</li></ul>
const myList = document.getElementById('myList');
if (myList) {
  console.log('childNodes length:', myList.childNodes.length); // Might be 5 (li, text, comment, text, li) due to whitespace text nodes
  console.log('children length:', myList.children.length);   // 2 (only the li elements)

  const firstListItem = myList.firstElementChild;
  if (firstListItem) console.log(firstListItem.textContent); // "Item 1"
}
                

Sibling Nodes:

• `element.nextSibling` / `element.nextElementSibling`: Gets the next sibling node / element.
• `element.previousSibling` / `element.previousElementSibling`: Gets the previous sibling node / element.

// HTML: <div><span id="itemA">A</span><span id="itemB">B</span><span id="itemC">C</span></div>
const itemB = document.getElementById('itemB');
if (itemB) {
  const nextItem = itemB.nextElementSibling;
  const prevItem = itemB.previousElementSibling;
  if (nextItem) console.log(nextItem.textContent); // "C"
  if (prevItem) console.log(prevItem.textContent); // "A"
}
                

Note on `childNodes` vs. `children` (and similar pairs): Properties ending in `...Child` (like `firstChild`) refer to any type of node (element, text, comment). Properties ending in `...ElementChild` (like `firstElementChild`) specifically refer to element nodes, which is often what you're interested in and helps avoid issues with whitespace text nodes between elements.

4. Modifying Element Content

This section details how to change the content within HTML elements using JavaScript, primarily focusing on the `textContent` and `innerHTML` properties.

Objectively, `element.textContent` gets or sets the text content of an element and all its descendants, treating all content as plain text. `element.innerHTML` gets or sets the HTML markup contained within an element, allowing you to insert or change HTML structure.

Delving deeper, it provides examples for both, highlighting that `textContent` is generally safer and faster for changing only text, as it doesn't parse HTML. `innerHTML` is more powerful for inserting HTML structures but should be used cautiously with untrusted content due to potential cross-site scripting (XSS) vulnerabilities.

Further considerations include other properties like `innerText` (similar to `textContent` but is aware of CSS styling and rendering, generally less preferred for manipulation) and the implications of using `innerHTML` versus creating and appending elements for performance and security.

Once you've selected an element, you can easily change what's inside it.

`element.textContent`:

Gets or sets the text content of an element and all its descendants. It treats all content as plain text, meaning any HTML tags within the string you assign will be rendered as literal text, not as HTML elements.

This is generally the safer and often faster way to change or retrieve text content if you don't need to interpret HTML.

// HTML: <h1 id="greeting">Hello World</h1>
const greetingHeader = document.getElementById('greeting');

if (greetingHeader) {
  // Get text content
  console.log(greetingHeader.textContent); // "Hello World"

  // Set text content
  greetingHeader.textContent = "Welcome to DOM Manipulation!";
  // The h1 now displays: "Welcome to DOM Manipulation!"

  // If you set HTML, it's treated as text:
  // greetingHeader.textContent = "<strong>Bold Text</strong>";
  // The h1 would literally display: "Bold Text"
}
                 

`element.innerHTML`:

Gets or sets the HTML markup contained within an element. When you set `innerHTML`, the browser parses the string as HTML and updates the DOM accordingly. This allows you to insert new HTML elements, not just text.

Caution: Be very careful when setting `innerHTML` with content that comes from users or untrusted sources, as it can lead to Cross-Site Scripting (XSS) vulnerabilities if the content contains malicious scripts. Sanitize any external input if you must use `innerHTML`.

// HTML: <div id="container"><p>Old content</p></div>
const containerDiv = document.getElementById('container');

if (containerDiv) {
  // Get HTML content
  console.log(containerDiv.innerHTML); // "<p>Old content</p>"

  // Set HTML content
  containerDiv.innerHTML = "<h2>New Title</h2><p>This is <strong>new</strong> paragraph content.</p>";
  // The div now contains an h2 and a p element with bolded text.

  // To add to existing content (less efficient than appending nodes):
  // containerDiv.innerHTML += "<p>Another paragraph.</p>";
}
                 

`element.innerText`:

`innerText` is similar to `textContent`, but it's "CSS-aware." It approximates the text that would be rendered on the page, so it doesn't include text from hidden elements (e.g., `display: none;`) and it normalizes whitespace differently. `textContent` is generally preferred for performance and consistency when manipulating content, while `innerText` might be useful for getting human-readable text as it appears.

Recommendation: Use `textContent` when you only need to work with plain text. Use `innerHTML` when you explicitly need to insert or modify HTML structure, but be mindful of security. For complex additions or modifications of structure, creating and appending elements (covered later) is often a better and safer approach than manipulating `innerHTML` strings.

5. Modifying Element Attributes

This section explains how to get, set, and remove HTML attributes of DOM elements using JavaScript.

Objectively, attributes provide additional information about HTML elements (e.g., `id`, `class`, `src`, `href`, `alt`, `disabled`). JavaScript offers methods like `element.getAttribute('name')`, `element.setAttribute('name', 'value')`, `element.hasAttribute('name')`, and `element.removeAttribute('name')` to work with attributes.

Delving deeper, it provides examples for changing common attributes like the `src` of an image, the `href` of a link, or the `value` of an input field. It also clarifies that many common HTML attributes are also available as direct properties on the element object (e.g., `element.id`, `element.src`, `element.className`).

Further considerations include the difference between attributes (as defined in HTML) and properties (on the DOM object), and special handling for boolean attributes (like `disabled`, `checked`).

HTML elements have attributes that provide extra information or control their behavior (e.g., `id`, `class`, `src`, `href`, `value`, `disabled`). JavaScript allows you to read, set, and remove these attributes.

Getting Attribute Values:

• `element.getAttribute('attributeName')`: Returns the value of the specified attribute as a string. Returns `null` if the attribute does not exist.

// HTML: <a id="myLink" href="https://qwirey.com" target="_blank">Qwirey</a>
const link = document.getElementById('myLink');
if (link) {
  const hrefValue = link.getAttribute('href');
  console.log(hrefValue); // "https://qwirey.com"
  const targetValue = link.getAttribute('target');
  console.log(targetValue); // "_blank"
}
                

Setting Attribute Values:

• `element.setAttribute('attributeName', 'value')`: Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise, a new attribute is added with the specified name and value.

// HTML: <img id="productImage" src="image1.jpg" alt="Product">
const productImage = document.getElementById('productImage');
if (productImage) {
  productImage.setAttribute('src', 'image2.png');
  productImage.setAttribute('alt', 'Updated Product Image');
  productImage.setAttribute('data-custom-info', '12345'); // Custom data attribute
}
                

Removing Attributes:

• `element.removeAttribute('attributeName')`: Removes the specified attribute from an element.

if (link) {
  link.removeAttribute('target'); // The link will no longer open in a new tab by default
}
                

Checking for Attributes:

• `element.hasAttribute('attributeName')`: Returns `true` if the element has the specified attribute, `false` otherwise.

if (link && link.hasAttribute('href')) {
  console.log('Link has an href attribute.');
}
                

Direct Property Access:

For many common HTML attributes, JavaScript DOM objects have corresponding properties that you can access directly. These properties are often more convenient to use.

if (link) {
  console.log(link.id);      // "myLink" (property) vs link.getAttribute('id')
  console.log(link.href);    // Full URL (property, resolved) vs link.getAttribute('href') (literal value)
  link.className = 'new-class another-class'; // Sets the class attribute
}
if (productImage) {
  productImage.src = 'image3.gif'; // Directly sets the src property
}
                

Attribute vs. Property: While often used interchangeably, there's a subtle difference. Attributes are defined by HTML, while properties belong to DOM objects. For most standard attributes, changing the property also changes the attribute and vice-versa. However, there are exceptions (e.g., the `value` attribute of an input vs. its `value` property after user input, or custom attributes).

For boolean attributes like `disabled` or `checked`, it's usually better to set their corresponding DOM properties (e.g., `inputElement.disabled = true;`, `checkboxElement.checked = false;`).

6. Modifying Element Styles

This section explains how to dynamically change the CSS styles of HTML elements using JavaScript, focusing on the `element.style` property and the `element.classList` API.

Objectively, `element.style` allows direct manipulation of inline CSS properties (e.g., `element.style.color = 'blue'`, `element.style.fontSize = '16px'`). The `element.classList` object provides methods like `add()`, `remove()`, `toggle()`, and `contains()` to manage an element's CSS classes.

Delving deeper, it provides examples for changing individual style properties and for adding/removing/toggling CSS classes. It highlights that manipulating classes is often preferred for more significant style changes or for applying predefined styles, as it keeps styling concerns primarily within CSS files.

Further considerations include how CSS property names with hyphens (e.g., `font-size`) are converted to camelCase in JavaScript (`fontSize`) when using `element.style`, and the performance implications of frequent direct style manipulations versus class-based changes.

JavaScript can dynamically alter the appearance of HTML elements by modifying their CSS styles.

1. Using the `element.style` Property (Inline Styles):

The `style` property of an element object allows you to directly set individual CSS properties as inline styles. CSS property names with hyphens (e.g., `font-size`, `background-color`) are converted to camelCase in JavaScript (e.g., `fontSize`, `backgroundColor`).

// HTML: <p id="myText">Style me!</p>
const textElement = document.getElementById('myText');

if (textElement) {
  textElement.style.color = 'blue';
  textElement.style.fontSize = '24px';
  textElement.style.backgroundColor = '#f0f0f0'; // Note camelCase
  textElement.style.padding = '10px';
  textElement.style.border = '1px solid green';
}
                

Limitations of `element.style`:

• It only reflects inline styles (styles set directly on the element via the `style` attribute or through JavaScript). It does not reflect styles applied via external stylesheets or `