DOM Manipulation

Reminder: The Document Object Model (DOM) is the "representation of the objects that comprise the structure and content of a document on the web." It represents the page in a way that programs, like JavaScript, can manipulate the document structure, style, and content.

You can review more on the DOM Properties and Methods page.

One way to conceptualize the structure of the DOM is as a hierarchical tree of parents and children.

In the example diagram shown above, all elements are children of the <html> root element. The <body> has two child elements: an <h1> and an <a>. The corresponding HTML might look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My title</title>
  </head>

  <body>
    <h1>A heading</h1>
    <a href="https://www.google.com">Link text</a>
  </body>
</html>

Take a look at the following example and, before opening the HTML editor, think about how might describe the structure in terms of parents and children.

See the Pen Parent-Child (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.

Upon opening the HTML editor (or the browser's Inspector), you'll see that each <img> has a <figcaption> sibling, both of which are children of a <figure> element. These <figure> elements are themselves children of the <div> flex row. Or, looking at it from the other direction, the <div> flex row is the parent element containing three <figure> children, each of which contains one <img> child element and one <figcaption> child element.

Creating Elements and Appending Children

If you were given a large collection of images in a folder to display in a responsive gallery site, you might manually create flexboxes for rows, <figure> or <div> elements for image containers, and <img> elements in your HTML. But what if you were running a website for a cafe that featured different specials and events each week? It might be easier to automatically generate the HTML using information about the images in the folder.

Let's start simply. If you were to create an object with properties that describe a single menu item, it might look like this:

const onionAndPeppercorns = {
  imageUrl: "https://picsum.photos/id/292/800/600.webp",
  alt: "onion and peppercorns",
  caption: "Onion and Peppercorns."
};

You can use JavaScript to create each required element using the createElement() method and set the necessary attributes:

const figureElement = document.createElement("figure");
const imageElement = document.createElement("img");
const captionElement = document.createElement("figcaption");

// sets src attribute to "https://picsum.photos/id/292/800/600.webp"
imageElement.src = onionAndPeppercorns.imageUrl;
// sets alt text attribute to "onion and peppercorns"
imageElement.alt = onionAndPeppercorns.alt;
// sets inner text of <figcaption> to "Onion and Peppercorns."
captionElement.innerText = onionAndPeppercorns.caption;

Then, you can use the appendChild() method to append the <img> and <figcaption> elements to the <figure> element and the <figure> element to the <body>.

See the Pen Creating and Appending Elements (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.

Creating and Appending Elements in a For Of Loop

Using the createElement() and appendChild() methods for a single object is good practice, but using them in a for...of loop for multiple objects showcases their power and flexibility.

In the example below, an array containing objects is used to generate elements for a grid of photos. Each object contains information about the photo source (url), alt text, and caption text.

See the Pen Generating a Photo Grid with a For Of Loop (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.