Building Blocks of DOM Manipulation - Vanilla JS Tutorial (Part One)
source link: https://hackernoon.com/building-blocks-of-dom-manipulation-vanilla-js-tutorial-part-one-dy54356y
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Building Blocks of DOM Manipulation - Vanilla JS Tutorial (Part One)
@shinetechnicallywritesMike Shine
Technical writer in Seattle, WA
This post is the first part of a code-along tutorial, where you’ll learn some rudimentary skills in vanilla JS DOM manipulation. If you missed my previous entry, where I discussed what Vanilla JS is and why it’s important, check it out here.
Let’s get started!
Setup
- Make a folder/directory on your computer. Name it something appropriate, like “vanilla-js-practice.”
- Create two files within this folder,
andindex.html
.index.js - Next, let’s add some boilerplate code to our new
file:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Vanilla JS Practice </title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>Normally, in the
<body><h1><h2><div><p><script><script>This is the last time we will touch our
index.htmlindex.jsBuilding Blocks #1 & 2 -
document.createElement().textContentAll right, now that we are in our
index.jsconst header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';Perhaps the most important snippet of code to remember when using vanilla JS for DOM manipulation is
document.createElement()document.createElement('h1')<h1>headerAnother very important building block is
.textContentheaderWhew! That was kind of a lot of explanation for something that simple. Using vanilla JS to write HTML code ends up being quite a bit lengthier than just writing the HTML itself. The HTML equivalent of our two lines of vanilla JS above would be:
<h1>Vanilla JS Practice</h1>You would be hard-pressed to find a web developer who says that using vanilla JS is the quickest and most concise way to write code. However, remember that you’re learning this not because it’s the quickest or most elegant way to code. You’re learning this because it is a great way to remove layers of abstraction and really understand the mechanics of the language and the DOM. So, on we go!
Okay, time to see what we’ve got so far. Open up your
index.html…Where is it? Why has it not appeared?? 😱😱😱
The short answer: It isn’t there because you haven’t told it to be there.
Building Blocks #3, 4, and 5 -
.appendChild().removeChild().remove()Don’t worry, you haven’t made a mistake! This is an important distinction between HTML and vanilla JS. In HTML, under normal circumstances, any elements with proper syntax in between the
<body>Anyway, this is where
.appendChild()Here’s how we will add
headerdocument.body.appendChild(header)Document.body <body>index.htmlappendChildheaderappendChildNow then, the three lines of code we should have typed out in our code editor so far are as follows:
const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';
document.body.appendChild(header);Open up your
index.htmlGood job! You have created your first element in vanilla JS, an
<h1>Let’s try to create a little bit more. Use the steps we took to create and append the header to create some text below your header. Try this on your own, and then scroll below if you need some guidance or to compare your efforts to mine. Good luck, you can do this!
How did you do? Hopefully, you were able to add some text below your header. More importantly, I hope you are at least a little more solid now in your understanding of JS, HTML, and the DOM, compared to where you were before you scrolled all the way down here.
Here’s what I did as my text addition:
const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';
document.body.appendChild(header);
const text1 = document.createElement('p');
text1.textContent = 'Go hang a salami, I\'m a lasagna hog.';
document.body.appendChild(text1);
const text2 = document.createElement('p');
text2.textContent = 'Read the previous sentence backwards.';
document.body.appendChild(text2);Nicely done!
Just as we can add elements to the DOM with
appendChildremoveChildFor example, if I wanted to remove my
text2document.body.removeChild(text2);text2.remove();
The first way would be using
removeChildappendChilddocument.bodytext2text2Don't cry, child. Your parents won't remove you using vanilla JS!
The second way is different; it utilizes the
removeremoveChildtext2.remove()Building Blocks #6 & 7 -
.setAttribute().removeAttribute()The process of labeling elements in certain ways and then using those labels to access or modify those elements is essential in web development. In HTML, the three “label types” that we have are types, classes, and ids. If you are just hearing about this for the first time, click here and take a few minutes to learn about these labels (more accurately called selectors).
We can use vanilla JS to set and remove these attributes.
.setAttribute()Let’s look at some examples.
1) Adding the class “palindrome” to
text1text1.setAttribute("class", "palindrome");
2) Adding the id “giantWalrus” to
text2text2.setAttribute("id", "giantWalrus");
Removing attributes with
.removeAttribute()text2text2.removeAttribute("id");
Building Blocks #8 & 9 -
.querySelector().querySelectorAll()Now that we have learned how to use vanilla JS to set attributes onto our elements, we probably ought to know how to access them through their attributes too.
The methods we use for accessing elements by attribute are
.querySelector().querySelectorAll().querySelector().querySelectorAll()For either of these methods, more than one attribute can be provided as a criteria; additional attributes are separated by commas.
Let’s look at some examples. The answers to #1 and #2 are provided below the prompt. The answers for #3 and #4 are down a couple of lines; try them yourself first and then check your work!
1) Create a variable
firstElemsampleClassconst firstElem = document.querySelector(".sampleClass");
2) Create a variable
allElemsclassDismissedconst allElems = document.querySelectorAll(".classDismissed");
3) Create a variable
greatIdthisIsAGreatExampleIdName4) Create a variable
divsAndPs<div><p>Answer to #3 -
const greatId = document.querySelector("#thisIsAGreatExampleIdName");Answer to #4 -
const divsAndPs = document.querySelectorAll("div", "p");Conclusion
Great work, you made it to the end of part 1! You learned about vanilla JS, why it is worth spending time on, and got some hands-on practice. In this tutorial, you:
Created HTML elements with vanilla JSAppended and removed those elements to and from the DOMSelected elements by attributes
I hope you found this helpful! Check out part 2, where we take on using vanilla JS to style content.
Attributions:
- Jenga image by Nathan Dumlao (Unsplash)
- Vanilla ice cream cone image by Dana DeVolk (Unsplash)
- Blue blocks image by Iker Urteaga (Unsplash)
- Psyduck gif credited to The Pokémon Company International, Inc.
- Surprised Pikachu face image credited to The Pokémon Company International, Inc.
- Cat mashing keyboard gif by @AaronsAnimals (Giphy)
- Crying toddler image by Arwan Sutanto (Unsplash)
Previously published at https://shinetechnicallywrites.netlify.app/posts/vanilla-js-tutorial-part-one/
Create your free account to unlock your custom reading experience.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK