JavaScript DOM Tutorial | Document Object Model in JavaScript

In this video we'll dive into the DOM (Document Object Model) in JavaScript. We explore DOM selectors, modifying CSS with selectors, HTML Collections, Nodes and Nodelists, navigating the DOM tree, and both removing and creating elements and nodes in the DOM.

✅ Quick Concepts outline:
(00:00) Intro
(0:13) The Document Object Model: DOM
(0:55) Selecting an element with an ID
(2:55) Selecting an element with a query selector
(4:00) Changing the CSS with the style property
(5:45) Selecting elements by class name
(7:05) Selecting elements with querySelectorAll()
(8:10) HTMLCollection vs NodeList
(9:00) Searching within the results of a previous selector
(10:15) Selecting elements by tag name
(11:20) Applying more specific DOM selectors
(13:05) Modifying CSS with a DOM selector
(16:30) Changing text inside of an element
(17:00) Changing the HTML within a parent element
(19:54) Navigating the DOM tree
(28:40) Removing all the nodes in a parent element
(30:00) Creating new elements
(30:43) Adding new property values to the element
(32:15) Appending the new element to the DOM
(33:30) Creating new elements with a loop

📚 Further Reading:
MDN Web Docs:
Eloquent JavaScript Chapter 14:

📺 More Beginner JS Videos:

✅ Follow Me:

#dom #javascript #tutorial

[gateece]

Sir, I am really grateful to you sir. You are great. I really can't afford money what today every platform demands. But whatever you teach here is I think far far better than paid courses. I always refer your playlist of Web development. I always tell your name to anyone who want to learn web development and tell him/her, whatever you want to learn just go through this legend's Youtube channel. Thank you so much sir.

[camip]

i watched a couple of videos that talk about DOM and this one is by far the best one that i watched, thank you Dave !

[trending.music]

Thank you!! I like the way you show the result right after the commands and elaborating the commands briefly. Very clear. (y)

[kdp]

So many methods covered, but I love coding along and testing them out in my own IDE. Wonderful tutorial as always, thank you!!! 🙌

[vishalkashyap]

Great tutorial. I have zero doubts after this. Keep creating new content

[danielguise]

As ever your content is awesome! Thank you

[bama]

great video, thank you. Just covering the basics of JS to move to React.

[Grihlo]

Thank you Dave! That was another useful video. The real magic is getting closer, can't wait to see the next tutorials. It takes more time to understand but I don't want to just skip it quickly, I realise that these are the essential basics which are really important.

[asifahmed]

Hey just found your channel really like your content keep posting😃

[kithagoras]

wow dude...this video is incredibly well made

[__zenon]

For all of you who are wondering, at 11:47 we are selecting all even divs with "(2n)". Selecting odd ones would be "(2n+1)".
Even better and less complicated alternative for beginners would be "(even)" and "(odd)".

[jperfection]

Great! Just want to add:
1. It's nice to learn element. style... but never use it in real practice. It leads to a very messy script. Instead, create your style in css file and then use these in your script to manage:


2. js shouldn't have HTML in it directly (17:29). That's just for learning purpose.

[Subham-Kun]

2:06 Here when I try to console.log(view1), the console returns "null". I thought something was wrong with my code, so I got the project from the provided GitHub link. But still the issue persists. I use an extension/plugin known as Quokka, & it shows "document is not defined" in red (I use the "Prettier" extension). Can anyone help me ?

[josiahcommey]

Mr Dave sir when I do this
Const view1 =
Console.log(view1);
The console returns bill even though I have created a section element with an id “view1” and I have also linked my Js to the html I dot know why please help me

[Salah-YT]

thx bro it is a good video but it is nicer if u show the HTML code at the beginning so thx anyway

[aya]

Thank you! it would be helpful if you can share HTML coding with us!

[akshatchaube]

34:15 The flex-box isn't working properly for me, can someone please help me out.

[Vikram]

Can you please clarify meaning of "Model" in DOM ? I didn't understand this nomenclature very well.

[adeoluadeyinka]

when I put this last code
for (let i = 1; i <= 12; i++) {
createDivs(view2, i);
}
I got 12 boxes that had a single column. please help!

[maxaluta]

Where can I find the HTML and CSS for this lesson? Thanks.