JavaScript DOM Crash Course - Part 1

This crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model) is and we will look at the different selectors like

We will also look at how to change content and styles via these selectors

BECOME A PATRON: Show support & get perks!

ONE TIME DONATIONS:

COURSES & MORE INFO:

FOLLOW TRAVERSY MEDIA:

NEW DISCORD CHAT SERVER:

[chevalier]

Kind of insane to think that Brad single-handedly pumped thousands of future developers and engineers into the world. And it all start with small series like this. Couldn't thank you enough, Brad.

[nabeeljaved]

i got job because of you. i have watched jquery, javascript and dom, react, , vue. you have professional content huge respect man !

[arshadgamer]

DOM is most important topic for web development, but it is often missed by many youtubers...
You created 4 videos on DOM, Thanks a lot...

[DivineJesusPrayers]

Hi Brad, for all the work and content you put out in this channel, you have my undying respect and gratitude. It takes a heart full of compassion, dedication and commitment to do what you do consistently. May you NEVER lack for energy, wisdom and resources to continue this great work. Thanks a million times over!!!

[frogsama]

For anyone who needs to the HTML and CSS file. I'm not using bootstrap.

<!-- HTML -->
<header id="main-header" class="bg-success">
<div class="container">
<h1 id="header-title">Item Lister</h1>
</div> <!-- container-->
</header>

<div class="container">
<div id="main" class="card card-body">

<h2 class="title">Add Items</h2>

<form>
<input type="text">
<input type="submit" class="btn" value="Submit">
</form>

<h2 class="title">Items</h2>

<ul id="items" class="list-group">
<li class="list-group-item">item 1</li>
<li class="list-group-item">item 2</li>
<li class="list-group-item">item 3</li>
<li class="list-group-item">item 4</li>
</ul>

</div> <!-- main -- card -- card-body -->
</div> <!-- container -->



/*--- CSS ---*/
GENERAL
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: sans-serif;
}

.container {
padding: 0px 25px;
}

HEADER
#main-header {
background-color: rgb(0, 126, 0);
height: 70px;
display: flex;
align-items: center;
padding: 20px;
}

#header-title {
color: white;
font-size: 40px;
}

MAIN CONTENT
#main {
border: 1px solid rgb(180, 180, 180);
padding: 20px;
margin-top: 20px;
}

.title {
margin: 20px 0px;
font-size: 30px;
}

.title:first-child {
margin-top: 0px;
}

input {
height: 30px;
border: 1px solid rgb(180, 180, 180);
}

.btn {
background-color: rgb(39, 39, 39);
color: white;
width: 100px;
border: 0px;
cursor: pointer;
}

.list-group-item {
border-bottom: 1px solid rgb(180, 180, 180);
list-style-type: none;
margin-bottom: 20px;
}

.list-group-item:last-child {
margin-bottom: 10px;
}

[eS_Zett]

02:45 DOM Introduction
04:52 HTML Structure
07:07 Examine the Document Object (console.dir() & console.log())
15:43 Selectors
15:54 getElementById()
22:29 getElementsByClassName()
27:11 getElementsByTagName()
29:14 querySelector()
34:48 querySelectorAll()

[millertime]

Dude, this was the best explanation I've seen of this concept. Most of the tutorials I've seen run through the material so fast they forget to lay out the logic, then they give you a project to do before you even learn it! It sucks because I then have to go somewhere else to fill in the gaps.

[teiki]

Even in August 2021 this is the best DOM Tutorial on the internet. Thank you Brad for all the great explanations and humble attitude.

[bryansharpley]

only part one of four and this is already by a long shot THE BEST DOM explanation ever! Thanks again for amazing tutorials!

[josuegarduno]

Took me around ninety minutes to get through the entire video because I was taking notes and coding along. You have such a great way to explain concepts that I couldn't understand yet.

[dogstar]

I've never seen a review of the DOM in plain JS like this before! This is GREAT.

[foreverandadave]

Just wanted to thank you for this course! It's been a huge help for me! You da man!

[zachfotis]

The most comprehensive tutorial on DOM manipulation out there. Thank you !

[czarlp]

Thanks a lot Brad! Not a lot of people can teach though videos but you are definitely one of them.

[parakidd]

I spent a good minute looking around for a video to explain how to work with the DOM. This is the only one I found lol. Very informative and actually helped me understand JS better as well also. Thank you.

[AlexSheviakov]

Simply excellent - as always! Keep up doing a great job!

[RockstahRolln]

Yes!!!! I am SUPER EXCITED to see this course!! MANY MANY THANKS!! I will be more than happy to be Patreon supporter! I will commence a monthly donation. Thanks a LOT Brad!! God Bless You!!

[anseljanson]

thanks for the great video brad.very informative, precise and to the point.
i was looking for something like this.
liked and subscribed

[samialvi]

There's always something new to learn from Brad. You have my undying gratitude and
respect~!

[mbounatansijones]

Hello Brad! First of i just wanna say am a big fan of your work. I recently got into web development, and am currently on javascript thanks to you.