👋,

​

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.

JavaScript 101: The DOM and DOM Traversal

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).

Now, you can do DOM traversal using either raw JavaScript or jQuery. We include jQuery because it is already a dependency of Webflow and it makes writing Javascript easier.

1. JavaScript:

JavaScript is the basic language that all web browsers understand. When you’re doing DOM traversal with JavaScript, you have to use specific methods like ‘getElementById’, ‘getElementsByClassName’, ‘getElementsByTagName’, etc.

For example, if you want to select an element with the id “myDiv”, you would write:

```var element = document.getElementById(“myDiv”);```

2. jQuery:

jQuery is a library built on top of JavaScript to simplify certain tasks, including DOM traversal. It provides easy-to-use methods like ‘.parent()’, ‘.children()’, ‘.siblings()’, etc.

To select the same element with jQuery, you would write:

```var element = $(“#myDiv”);```

One major difference between raw JavaScript and jQuery is that jQuery is generally shorter and easier to write. However, raw JavaScript doesn’t require any external libraries, so it may load faster on a webpage.

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.

Happy coding!

🤙 The Slater team

🙏 If Slater helps you create better websites, please support the team behind it.

​
​
1295 Canyon View Rd, Midway, UT 84049
​Unsubscribe · Preferences​

​