DOM Manipulation and Events: Clarify element selection by using variables and console.log

[davidumoru]

Because

The previous example in the "Targeting nodes with selectors" section was confusing as it used console.dir() in a way that implied it was selecting DOM elements, which led to misunderstandings among learners.

This PR

• Replaced console.dir() with variable assignments for clarity.
• Updated comments to correctly describe the action (logs instead of selects).
• Used console.log() to log the selected elements for better understanding.

Issue

Closes #28908

Additional Information

Love The Odin Project!

Pull Request Requirements

• I have thoroughly read and understand The Odin Project curriculum contributing guide
• The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
• If any lesson files are included in this PR, they follow the Layout Style Guide

[MaoShizhong]

Thanks for doing this @davidumoru. Just a couple of changes for the following reasons:

• More appropriate variable names for what will contain the .display element (consideration raised in the linked issue).
• Separate code block examples make using the same display variable name make more sense rather than "in the same block of code" (can't do).
• Changes log comments to show exactly what you'll see getting logged.

The changes below should address my original considerations in the linked issue.

[MaoShizhong]

🙏