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.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay