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.
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.
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.
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.
Most of the time, you won’t need to manipulate the DOM yourself, as WeWeb does it for you for all these use-cases:
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
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.