Before starting Flatiron's software engineering program, I completed my pre-work relying entirely on the tests to determine if I did what the tests asked me to do. It ended up being a series of events of me running the tests and seeing the red text and going from there. Never actually understanding what my current code was doing so wrong.
While there was DOM manipulation in the prework, I had never really felt too comfortable using it at that point. Since I wasn't too confident in my skills I tended to stray from using it, only ever listening to the tests.
Once starting the program and the tests are no longer in labs did it finally click that manipulating the DOM is a very useful tool.
How do you access the DOM?
You can access the DOM right now!😲
Windows: ctrl + shift + i
Mac: Option + Command +I
We can see how this tab is showing us the structure and contents of this website. Opening up the DOM from your own document becomes more plentiful with the information. Presenting you with your code as well as the structure (HTML).
You'll notice how the tab allows changes to be made onto the web page. This real time modification is what makes the DOM a handy tool.
What you can use this magical tab for:
Interacting with the DOM saves time from having to go back to your VS Code, change one line, then go back to the page, reload the page, see if anything changed.
Initially, I didn't think much about what the DOM could do for me. I saw the page, saw what it did and didn't do, then went and changed the code to see if it'll do what I want it to do. I would stare at the screen for hours on end trying to figure out what I wasn't doing right. After a couple of lectures, I realized that I'm suffering needlessly when I could've been using console.log() to see if my code even worked as intended.
Constantly checking and making sure that the code I had written so far works the way I intended it to function. It has saved me so much time and mental energy. Before I felt like it was just me in a pitch-black room, arms stretched out, feeling for anything just to take one step and not fall on my face.
Now if I need to pick out specific elements on the page I could easily hover over them to find their id highlighted in the HTML. Or even see silly spelling mistakes I missed, the console will tell me down to the exact line where it detected an error.
Lesson I learned
Learning something new will always be an uncomfortable process. If you feel unsure about something, like I did with DOM, that is a good sign that you need to practice with it further. Esspecially if you're just starting out. Yes it's good you found something that feels comfortable but if there's a better way of doing it, it's worth the discomfort to continue to flourish in your new journey.
Top comments (0)