The Document Object Model (DOM) Explained for No-coders

When working with a frontend no-code tool, having a grasp of the Document Object Model (DOM) is crucial. The DOM serves as a programming interface for web documents, enabling no-code developers to access and modify the content of a webpage using JavaScript. In this article, we will provide an overview of the DOM's fundamentals, including its structure and functionality. We will also delve into the different approaches available to developers for leveraging JavaScript to manipulate the DOM effortlessly.

What is the Document Object Model (DOM)?

For a no-coder using a frontend nocode tool, the Document Object Model (DOM) is a key concept to understand. The DOM represents the structure of a web page and provides an interface for interacting with its elements without writing code. It acts as a visual representation of the webpage's elements, such as headings, paragraphs, images, and buttons.

In simpler terms, imagine the DOM as a tree-like structure where each element on a webpage, like a heading or a button, is a node in that tree. The DOM allows you to select and manipulate these nodes without needing to write any code manually.

Here is an example of what the DOM looks like on a simple web page:

In this HTML snippet, we have a basic webpage with a heading (<h1>), a paragraph (<p>), and a button (<button>). Each of these elements represents a node in the DOM.

With a frontend nocode tool like WeWeb, you can use a graphical interface to interact with the DOM. This means you can visually select elements on the webpage, rearrange them, modify their properties, or apply animations and styles, all without writing code directly. The nocode tool handles the underlying JavaScript code generation and execution on your behalf.

As you can see, the DOM is also visible in a WeWeb project, through what we call the navigator:

But, if tools like WeWeb help you manipulate the DOM by drag and dropping elements, modifying their attributes and style, why learn it then?

Well, in some very specific use-cases, it might be useful, when the feature is not present in the no-code tool so that you’re never limited in your creativity.

How to manipulate the DOM with JavaScript and in WeWeb

Now that we have a basic understanding of manipulating elements in a webpage, let's explore how we can achieve this using JavaScript. Here are some commonly used methods and properties for manipulating elements in the DOM:

1. getElementById(): This method retrieves an element from the DOM by its unique ID. Here's an example:

In this code, the element with the ID "myElement" is selected and assigned to the variable "element".

2. getElementsByClassName(): This method retrieves an array of elements from the DOM based on their shared class name. Here's an example:

This code retrieves all elements with the class name "myClass" and assigns them to the variable "elements".

3. getElementsByTagName(): This method retrieves an array of elements from the DOM based on their tag name. Here's an example:

This code retrieves all <p> elements in the DOM and assigns them to the variable "elements".

4. createElement(): This method creates a new element in the DOM. Here's an example:

This code creates a new <div> element and assigns it to the variable "newElement".

5. appendChild(): This method adds a new child node to an existing element in the DOM. Here's an example:

This code selects the element with the ID "myParent" and appends the "newElement" as its child.

6. innerHTML: This property allows you to set or retrieve the HTML content of an element. Here's an example:

This code sets the HTML content of the element with the ID "myElement" to "New content".

7. style: This property allows you to set or retrieve the CSS styles of an element. Here's an example:

This code sets the color of the element with the ID "myElement" to green.

By utilizing these methods and properties, we can dynamically manipulate the elements in the DOM using JavaScript, enabling us to create interactive and engaging web experiences.

As you can see, we access the DOM through a document variable which is common among all browsers (chrome, firefox, arc, etc). But, in the case of WeWeb, while in the no-code editor, that won’t work.

Indeed, while working in WeWeb, your app is created inside an iframe (kind of a webpage inside the current webpage). To select it, you should replace document by wwLib.getFrontDocument().

So, for the first example, where we select an element by its id, it becomes:

As for retrieving an id, a class, the attributes or the type of HTML tag in WeWeb, you can find all this on each element in the right sidebar, under the settings tab:

You can then use them during your DOM manipulations.

There are also a lot of other DOM manipulations, as the DOM API is powerful. You can learn more about it on MDN.

Use-cases of DOM manipulation in WeWeb

Most of the time, you won’t need to manipulate the DOM yourself, as WeWeb does it for you for all these use-cases:

• Changing dynamic content: that’s precisely what WeWeb does when you’re using variables or collections, and then binding them to text or CSS properties inside your elements.
• User interactions: no need to react to user triggered events with the DOM, as that’s why workflows exist.
• Animation: you can instead use the animation tab inside the styling sidebar of each element.
• Manipulating styles: well, the whole styling sidebar is here for exactly this in WeWeb!

One use-case that might be useful, though, is when you want to do complex form validation inside WeWeb. While we work on bringing new features to cover this, it might be useful to use DOM manipulation in this case.Let’s take an example. Let’s say you wish to let your users upload a file to an external backend (like Xano). The current WeWeb action to upload files would upload them to the WeWeb CDN, giving you back a URL. But if you were to bypass this step, you could use DOM manipulation to do so:

1. Add an upload file element inside a form container in WeWeb

2. Give this upload file element an id, here we’ll use file-upload

3. Add a on submit workflow to your form container

4. Add a custom JavaScript action to this workflow, with this snippet:

5. Test this step and use the returned value to send it to your backend (here, using a REST API):

That’s it! Your file will be sent to the API.

Conclusion

DOM manipulation is an integral part of web development, and understanding how to manipulate the DOM with JavaScript is a key skill for frontend developers. Although no-code tools like WeWeb handle the underlying JavaScript code generation and execution on your behalf, there may be situations where you need to manipulate the DOM manually. In those cases, WeWeb provides a way to access the DOM through a wwLib.getFrontDocument() variable, which can be used with commonly used methods and properties such as getElementById().