DEV Community

hequamily
hequamily

Posted on • Edited on

The Magical QuerySelector(#/.)

Hello, my name is Harrison Quamily. I am currently a student at Flatiron School for software engineering. I have prior experience in healthcare, carpentry, audio engineering, music production, and real estate. I'm looking to switch my career field to software engineering in order to make a positive impact in the world using the creativity, integrity, and morals I've acquired through my previous work experiences. Since enrolling in Flatiron, I have been learning about new opportunities that skilled engineers have every day. Although I'm not an expert yet, I feel that I have made a breakthrough.

Previously, I would use document.getElementById() to reference elements when I needed to access them. However, after working through some problems, I now find document.querySelector('') and using # or . to differentiate between IDs and other element names much easier.

With document.getElementById(), you can only access elements if they have an ID. In contrast, with document.querySelector(), you can access any element by using # when referring to an ID or . when referring to something else.

let cakeName = document.querySelector('#food-name');
let cakeDescription = document.querySelector('.cake-description');

In the beginning, I used to rush through code challenges and try to complete them as quickly as possible. However, by doing so, I would often overlook minor details that caused major malfunctions in the code. When I got stuck on a problem, I would become frustrated and lose motivation to find a solution. Most of the time, the issue was calling the element by the wrong name or ID. Upon reviewing the renamed elements or the names of elements in the HTML or JSON, I would usually find the error there.

For more time than I would like to admit, I was confused about the functionality of textContent and src when it came to putting data on the DOM. It wasn't until I switched to using document.querySelector('#' or '.') instead of document.getElementById('') that I understood the source of my confusion between textContent and src.

Initially, I used document.getElementById() because it seemed easier. However, I am now starting to see that there are limitations to using document.getElementById() that document.querySelector() overcomes. When elements become more nested, it can be almost impossible to access the element using document.getElementById().

The 15-week boot camp at Flatiron has been challenging, with its fair share of ups and downs. However, it has not diminished my passion and excitement in my journey to learn and improve my proficiency in coding languages and algorithms with Flatiron.

Top comments (0)