Individual elements in the document object model are the pieces that make up your webpage. Using JavaScript, after you query for them, you can manipulate them to your liking, and we'll go over the most-used manipulations.
Adding Classes
For many different scenarios, you'll want to be able to add a CSS class to an element. After you have queried for your element, like this:
<div class="apple">Apples are tasty.</div>
const fruit = document.querySelector(".apple");
You can add a class to the element, like this:
const fruit = document.querySelector(".apple");
fruit.classList.add("tasty");
Now the element looks like this:
<div class="apple tasty">Apples are tasty.</div>
Removing Classes
Removing a class is the same process in reverse. Once you have an element, you can remove a class from its class list, like so:
const fruit = document.querySelector(".apple");
fruit.classList.remove("tasty");
The class is no longer there.
Check if element contains class
Finally, to check if an element contains a class or not, simply call the contains function on the element's class list.
const fruit = document.querySelector(".apple");
fruit.classList.add("tasty");
if (fruit.classList.contains("tasty")) {
console.log("This fruit is tasty!");
} else {
console.log("This fruit is not tasty!");
}
This fruit is tasty!
Setting Properties
Properties on DOM elements can be manipulated in JavaScript because they are simply object properties. These are examples of some properties to work with:
value: The value of a tag (usually found on input tags).href: The link of an anchor.alt: The alternative text of an image.title: Information about an element.
Let's say you want to dynamically set an anchor tag's href tag:
<a>Click here to go to Sabe.io</a>
const link = document.querySelector("a");
link.href = "https://sabe.io";
When the code runs, you'll get this:
<a href="https://sabe.io">Click here to go to Sabe.io</a>
Getting Properties
Now, let's say you want to get the value of a input text field for a username.
<input type="text" class="username">
const usernameInput = document.querySelector(".username");
Now that you've gotten the element, all you need to do is access its value property, like so:
const usernameInput = document.querySelector(".username");
const usernameValue = usernameInput.value;
console.log(usernameValue);
Pikachu
Since this is JavaScript after all, if you really wanted to, you could create your own properties.
<span>Halloween is my favorite holiday.</span>
const span = document.querySelector("span");
span.holiday = "Halloween";
console.log(span.holiday);
This would result in the following output on your console:
Halloween
Deleting Properties
If you've created a new property but then decide that you no longer want it, you can use the delete statement on it to get rid of it.
const span = document.querySelector("span");
span.holiday = "Halloween";
console.log(span.holiday);
delete span.holiday;
console.log(span.holiday);
Halloween
undefined
Getting Attributes
Similar to properties, you can also manipulate an element's attributes. The only difference is that instead of accessing it as a property, this time you are using methods.
To get an attribute, simply use getAttribute and then pass in the name of the attribute you want.
<img src="https://sabe.io/cat.png">
const animal = document.querySelector("img");
console.log(animal.getAttribute("src"));
Since we are asking for the src attribute, that is what we get back:
https://sabe.io/cat.png
Setting Attributes
Setting an attribute is just as easy as getting them. Use the setAttribute method which takes two parameters, the name of the attribute, and then its value.
<img src="https://sabe.io/cat.png">
const animal = document.querySelector("img");
animal.setAttribute("alt", "This is a picture of a cat.");
Running this code gives you this element:
<img src="https://sabe.io/cat.png" alt="This is a picture of a cat.">
Removing Attributes
Finally, to remove an attribute from an element, use removeAttribute and pass in the name of the attribute you want gone.
Let's remove the alt attribute we just added:
const animal = document.querySelector("img");
animal.removeAttribute("alt");
<img src="https://sabe.io/cat.png">
Dynamically Applying Styles to Elements
Dynamically applying styles to an element is one of the most powerful techniques you can use when done correctly.
With some basic HTML like this:
<div>This is sample text.</div>
You can print out all of the styles being applied to this element and their values with getComputedStyle.
const div = document.querySelector("div");
const style = getComputedStyle(div, null);
console.log(style);
CSSStyleDeclaration
Because the styles are all nicely organized for us as properties, adjusting or reading the styles of elements becomes extremely easy.
For example, this is how to turn that div's background color to red:
const div = document.querySelector("div");
div.style.backgroundColor = "red";
This works for every style property, but here are some others you can try out:
backgroundColor: Adjust the background color.display: Adjust the display value.color: Adjust the text color.border-radius: Adjust the border's radius.padding: Adjust the padding inside an element.margin: Adjust margins around an element.
The possibilities here are limited only by your imagination.
