Before Slater, we at Edgar Allan used Codesandbox. It's a incredible tool. Full stop.
We invested in building Slater because the Codesandbox solution was a hack and we didn't feel comfortable shipping our clients' websites with a Codesandbox script. This week Codesandbox updated their pricing and broke a lot of Webflow projects. :(
If this is you, crack open Slater again. If this is someone you know, forward this email to them.
👷🏻♂️ Product Updates
We're adding polish to the new UI--a lot of small updates to add more sparkle. We're overhauling the Webflow Designer App. And we're back at the Community Library.
Today, we’re going to learn about DOM traversal. But before we dive into that, let’s first understand what the DOM is.
DOM stands for Document Object Model. It’s a way of representing a webpage in a structured hierarchical way. So, if you imagine a webpage as a tree, the DOM is the blueprint that shows all the branches and leaves of that tree. Each branch or leaf is called a “node”.
DOM traversal is the process of moving from one node to another in this tree-like structure. For example, you might want to find a specific paragraph (node) in your webpage (DOM), or you may want to change the color of all the headings (nodes) in a certain section (branch of the DOM).
For example, if you want to select an element with the id “myDiv”, you would write:
```var element = document.getElementById(“myDiv”);```
To select the same element with jQuery, you would write:
```var element = $(“#myDiv”);```
DOM traversal is a key part of web development, allowing you to select, manipulate, and change elements on a webpage. Go to Slater and try selecting nodes and traversing the DOM.
🤙 The Slater team
🙏 If Slater helps you create better websites, please support the team behind it.
Sign up for early access and weekly resources in your inbox
Slater resources, updates and community activity