👋,
⚠️ This weekend, Slater experienced an outage. While we make every effort to ensure Slater's uninterrupted operation, occasional server issues may arise. But! The key takeaway from this weekend's incident is that the production scripts on your clients' websites remain unaffected even if a Slater outage occurs. Slater scripts are exceptionally resilient and you can trust Slater to provide Javascript functionality on your client websites.
Our in-house Javascript and Surf guru, Witt, re-recorded a getting started video. If you haven't synced up Slater with Webflow yet, please watch and give Slater a go.
Everyone at Edgar Allan loves Witt's how-to videos. We want to do more of them. What subject matter would you like him to cover?
JavaScript 101: More DOM Traversal
Last week, we learned about the DOM (Document Object Model) and how we can get started navigating or "traversing" the DOM. This week, let's dig deeper into this concept with "this". When interacting with the DOM, like when a user clicks or mouses over an elment, "this" refers to the element that the event happened to.
For example, let's say you have a button on a webpage. If you attach a click event listener to the button, "this" inside the event handler (the function that runs when the event happens) will refer to the button that was clicked. Let's see this in action:
document.querySelector('button').addEventListener('click', function() {
console.log(this);
});
Here, when you click the button, `this` will be printed out to the console, and `this` will be pointing to the button that was clicked.
This can be super handy when you want to move from the element that triggered an event to a nearby element. Imagine you have a list of items, and each one has a delete button. When a delete button is clicked, you want to remove that item from the list.
let deleteButtons = document.querySelectorAll('.delete-button');
for (var i = 0; i < deleteButtons.length; i++) {
deleteButtons[i].addEventListener('click', function() {
this.parentNode.remove();
});
}
In this example, when a delete button gets clicked, the function runs. Inside the function, "this" refers to the delete button that was clicked. `this.parentNode` is the parent element of the delete button, which would be the item in the list. The `.remove()` method gets rid of the item from the DOM.
Now, let's talk about how this works in jQuery, a JavaScript library that is bundled with Webflow and makes DOM traversal a lot simpler. With jQuery, "this" works the same way. Here's how you'd write the previous example using jQuery:
$('.delete-button').click(function() {
$(this).parent().remove();
});
In this jQuery example, `$(this).parent()` selects the parent of the delete button that was clicked, and `.remove()` gets rid of it from the DOM.
"this" is a really powerful tool in JavaScript that makes traversing the DOM a whole lot easier. It lets you refer to the element that triggered an event, and from there, you can move to other elements nearby.
Go try to use "this" in one of your Webflow projects and let us know how it goes!
Happy coding!
🤙 The Slater team
🙏 If Slater helps you create better websites, please support the team behind it.
