JavaScript DOM Tutorial | Document Object Model in JavaScript
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: • Javascript Tutorials f...
🔗 HTML & CSS source code: gist.github.com/gitdagray/dbe...
✅ 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:
Document Object Model (DOM): developer.mozilla.org/en-US/d...
Introduction to the DOM: developer.mozilla.org/en-US/d...
Eloquent JavaScript Chapter 14:
eloquentjavascript.net/14_dom...
📺 More Beginner JS Videos:
freeCodeCamp: • Learn JavaScript - Ful...
Traversy Media: • JavaScript Crash Cours...
The Net Ninja: • Modern JavaScript Tuto...
✅ Follow Me:
Twitter: / yesdavidgray
Reddit: / daveoneleven
Medium: / davegray_86804
#dom #javascript #tutorial - วิทยาศาสตร์และเทคโนโลยี
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 TH-cam channel. Thank you so much sir.
Keep leveling up bro 💪
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 !
Thank you!! I like the way you show the result right after the commands and elaborating the commands briefly. Very clear. (y)
You're welcome! Thanks for the note!
So many methods covered, but I love coding along and testing them out in my own IDE. Wonderful tutorial as always, thank you!!! 🙌
Glad it was helpful!
Brilliant explanation of the DOM ❤
Great tutorial. I have zero doubts after this. Keep creating new content
As ever your content is awesome! Thank you
High quality tutorial as usual.
Much appreciated! 🙏
great video, thank you. Just covering the basics of JS to move to React.
Hey just found your channel really like your content keep posting😃
Thank you!
wow dude...this video is incredibly well made
Thank you! 🙏
No thank you Dave... I finally found the best TH-cam channel and TH-camr out there... You're a genius in teaching programming
@@kithagoras I sincerely appreciate the kind words!
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.
Great job! 🙏🚀
@@DaveGrayTeachesCode hey Dave, your courses have been really helpful so far. But I got stuck here on DOM...right from the beginning every time I try to console.log(view1) from the const view1 = document.getElementById("view1");. It keeps return null on the console and I couldn't go further on with this particular topic...any suggestions on what could be the problem??
@@mysticalKins If the element with an id attribute of view1 exists in your html document, then look at how you are loading your Javascript file. If in the head section, make sure you have defer in the script tag.
@@DaveGrayTeachesCode thanks alot...I finally figured it out after watching the next lesson (listeners) my script tag was in the head tag all this while🙈🙈..
@@mysticalKins @davegray . Now the console is returning this (section#view1.view.view1) I am still confused.
this is the most fun lesson!
Thanks!
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)".
Mr Dave sir when I do this
Const view1 = document.getElementById(“view”);
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
Hello, Josiah - I can only recommend to go back over the video and look for what you might have missed. One little thing can cause an error, and I would only be guessing about your code from here.
I just watched your video on top 10 beginner mistakes and thanks to you I just found out I had to add the defer keyword to my script tag thanks a lot
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 ?
Same problem, did u fix it?
You do need to link JS with the HTML file in tag like below:
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:
element.classList.add("class-name");
element.classList.remove("class-name");
2. js shouldn't have HTML in it directly (17:29). That's just for learning purpose.
That will keep it clean. As an intro to the DOM, this is showing what is possible (much like MDN examples) for learning purposes.
There is a lot of information.
Can you please clarify meaning of "Model" in DOM ? I didn't understand this nomenclature very well.
Yes, in programming the term "model" often refers to a data structure. For the DOM, it is referring to the structure of the document. The document is an object with properties and the structure of it all is predetermined by the model.
@@DaveGrayTeachesCode Thanks for quick response
34:15 The flex-box isn't working properly for me, can someone please help me out.
Here is the code
where is the code pls
Where can I find the HTML and CSS for this lesson? Thanks.
While the focus is on the Javascript, I have had this requested a few times - so I just uploaded it to Github 😀 Here is the HTML and CSS (I used SCSS) for the tutorial: github.com/gitdagray/javascript_dom_tut
pls I can't access the link
There's nothing in this link pls
when I put this last code
for (let i = 1; i
Can you provide a timestamp for where I need to look in the video to refresh my memory? It will help me answer your question.
@@DaveGrayTeachesCode Thanks for the swift reply . 34:02
@@adeoluadeyinka6542 the parent element will control flex-row vs flex-column. Ensure the view2 styles are set as displayed - they start around line 50. Flex direction is row. Also, make your browser window wide enough for 3 columns or a narrow window could result in less.
@@DaveGrayTeachesCode I just found out why I had that issue was because I didn't write the styles in camel case
I wrote this :
view2.style.flexdirection = "row";
instead of:
view2.style.flexDirection = "row";
Thanks for helping out. keep putting out great videos!!!
thx bro it is a good video but it is nicer if u show the HTML code at the beginning so thx anyway
You're welcome! There should be a link to that HTML source code in the description.
@@DaveGrayTeachesCode ok thank u so much
Thank you! it would be helpful if you can share HTML coding with us!
Thanks for the request! 😀
@@DaveGrayTeachesCode hey dave , Please share the HTML coding as well, it would be really helpful
Sir pls link to HTML and css code
Answered on Twitter. For questions, please join my Discord instead of asking on all social media.
I would have actually feel much much much more comfortable with this video -
if you would only kindly give us just a small, short, tiny, quick, super fast snap shot -
On the CSS (/the divs syles).
However.....
Thank you.
Thank you - there is a link in the description for the HTML & CSS code.
Thank you very much indeed! :)