JavaScript JavaScript and the DOM Getting a Handle on the DOM Using CSS Queries to Select Page Elements

hmmnotme
hmmnotme
4,968 Points

What is happening?! Please have Dave remake this whole course!

From the get-go it wasn't clear what is being taught in this course. I rewatched the videos and ... nope there isn't enough good explanation on what's being done. The very first coding challenge that I did not pass on the first try. I did not even get it at all. I don't know what this man is talking about! This course is either out of place in beginning javaScript track or he is just not explaining well enough. Jumping from one topic to another, to another and I'm stressing about the last topic (the terminology and syntax). All of a sudden he might say, "don't worry about this topic and what I just explained; I just wanted to show you what is possible?!!" You can't be serious, after going into details of what he is explaining, he says not to worry about it. smh. What even is DOM and why do you have to jump back and forth from HTML to JS? Just saying the abbreviation is not enough to know why it is being used. Or what it is? Is it a different program? Is it a syntax sugar? I guess the journey of my programming ends here.

John Collins
John Collins
Full Stack JavaScript Techdegree Graduate 23,689 Points

I am following the beginning JavaScript course as well, and I have to agree. This course seems out of place and/or just poorly explained for the challenge questions. I managed to muddle through to the last challenge, but I find I'm seeking answers more through the MDN or the forum than I am relying on the content of the video. This is just frustrating that I would come to TreeHouse to learn JavaScript and then would have to teach myself using the Mozilla Developers Network or other references to find the challenge answers. This leaves me feeling like my learning has come to a screeching halt while I try to decipher the code for this one challenge. I get that as I gain experience I will need to continue to pull on these same resources for help. However, at this stage in my career I'm more interested in gaining experience through teaching and doing rather than exploring ways of finding answers. I feel your pain hmmnotme!

E M
E M
2,728 Points

I am following the JavaScript Full Stack course, and I still agree with this sentiment, especially when it comes to the challenge at the end of this segment. The hint is not adequate, and includes a new concept (descendants) and knowledge of CSS, neither of which was covered in any of the previous modules in this track. I've watched the supplemental video on descendants and gone to the MDN website to read more but am still unable to find what I need for the last challenge. There has been no mention of CSS in the prior courses. This challenge has led me astray and frustrated.

Vivien Okros
Vivien Okros
3,375 Points

To me, it feels like everything explained in the previous Javascript block , Start to make sense here. As a complete beginner, I was struggling really hard for a long time on the prev Jsc block - Especially on the challanges... and there was no chance to practice anything at all on my own.

In this block, I can create small projects for myself to practice and memorize stuff - I understand better now, what I didnt understood before (from the jsc course) and I enjoy to study, and progress again. I m kinda happy that finally I get there!

5 Answers

Charles Badger
Charles Badger
18,183 Points

DOM stands for document object model. It's the underlying structure that makes up a website. It's the browser's interpretation of your code.

A website is made of three layers: HTML is the content layer. It's the words, images, forms, etc that make up a website. CSS is the presentation layer. It's what allows you to change the colors, size, position, etc of the content of the website. JavaScript is the behavior layer. It's what tells your browser how to act when certain events take place like form submissions, animations, or dynamically generate content.

Let's look at an example of how JavaScript works with the DOM. Say you have a website with a button that when pressed, confetti falls down the screen. Your page would consist of HTML with a button, some CSS to style it, and JavaScript to determine the behavior of the button. In your JavaScript, you'll have an event listener that will listen for the button click, and a function that generates the confetti. In order for your event listener to know is being clicked, you have to select a DOM element to listen to (in this case, it's the button.) After the button is clicked, the confetti has to be generated and attached to the DOM.

Here's a simplified version of the DOM before the button is clicked:

<html>
  <head>
  </head>
  <body>
     <button id='confetti-button'>Confetti</button>
  </body>
</html>

And here's a simplified view of the DOM after the button is clicked:

<html>
  <head>
  </head>
  <body>
     <img class-'confetti' src='mgs/confetti.svg'>
     <img class-'confetti' src='mgs/confetti.svg'>
     <img class-'confetti' src='mgs/confetti.svg'>
     <img class-'confetti' src='mgs/confetti.svg'>
     <img class-'confetti' src='mgs/confetti.svg'>
     <button id='confetti-button'>Confetti</button>
  </body>
</html>

This is one of the great things about JavaScript. It lets you dynamically change the DOM and make websites truly interactive. Learning to traverse the DOM can be challenging, and definitely gets confusing at times. It took me a long time to understand what the DOM was, and why it was important. If you're having problems with understanding how Treehouse is presenting the DOM, check out other resources. Sometimes I need things explained to me 5 or 6 times in 3 different ways before I start to understand it. Don't give up!

Converted to an answer. - Edited by Dane E. Parchment Jr. (Moderator)

hmmnotme
hmmnotme
4,968 Points

Thanks Charles for taking the time to answer. Your explanation of what DOM helped a lot! There was a little quiz in the course and I followed along with the videos. I passed the quiz easily but still did not even know that what I was doing was considered DOM. The second set of codes you attached, I thought of as pure HTML before your explanation. <body> <img class-'confetti' src='mgs/confetti.svg'> <img class-'confetti' src='mgs/confetti.svg'> <img class-'confetti' src='mgs/confetti.svg'> <img class-'confetti' src='mgs/confetti.svg'> <img class-'confetti' src='mgs/confetti.svg'> <button id='confetti-button'>Confetti</button> </body>

In the video he just does it without enough justification as what we are doing! I'm gonna look for information on DOM elsewhere.

kevinardo
kevinardo
Treehouse Project Reviewer

Trust the process mate. Don't panic. Learn to learn!

Without all the panic, I'll agree this course so far seems to be lacking. Lots of WHY's missing. Feel like Dave was breaking down the syntax better.

Robert O'Toole
Robert O'Toole
5,687 Points

honestly i felt this way last week. and then just pushed through the whole JS DOM course.... then this week a reviewed it FROM scratch. i highly suggest going over the ES2015 course first though so u understand things that can be overlooked like let and const. which they just randomly throw in here without explaining.

this explained the WHOLE const and let thing so well for me... but beyond that just push through. look up the answers even to help the first time around then the second time around in this course i guarantee u will be able to answer all the quiz questions and notice things u overlooked.... this is what coding is like I've realized... and I've only started my journey 3-4 months ago lol https://jscomplete.com/playground/s377304

Robert O'Toole
Robert O'Toole
5,687 Points

oh also the nth child stuff is later in a CSS advanced selector course which is rather silly yes... lol

it seems they need to fix the order of the web development track... i spent months learning var and scope with var only to realize that var is barely even used these days lol