DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

2

DOM Selection with Custom Function

Objective:
Create and use a custom function to select DOM elements similar to how jQuery's $ function works.

Explanation:
We'll define a function named $ that uses document.querySelector to select an element based on a CSS selector.

Code Example:
Here's the HTML and JavaScript needed to create and use the custom $ function.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Selection Example</title>
</head>
<body>
    <button id="submit-btn">Submit</button>
    <div class="card">Card Content</div>
    <input type="text" class="form" placeholder="Enter text">
    <div class="space">Space Content</div>

    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

JavaScript (script.js):

// Define the custom $ function
function $(selector) {
    return document.querySelector(selector);
}

// Select elements using the custom $ function
const submitBtn = $('#submit-btn'),
      card = $('.card'),
      formInput = $('.form'),
      space = $('.space');

// Log the selected elements to the console
console.log(submitBtn);  // Output: <button id="submit-btn">Submit</button>
console.log(card);       // Output: <div class="card">Card Content</div>
console.log(formInput);  // Output: <input type="text" class="form" placeholder="Enter text">
console.log(space);      // Output: <div class="space">Space Content</div>
Enter fullscreen mode Exit fullscreen mode

Steps:
1. Define the Custom Function:

Create a function named $ that takes a selector as a parameter.
Use document.querySelector inside the function to return the selected element.

function $(selector) {
    return document.querySelector(selector);
}
Enter fullscreen mode Exit fullscreen mode

2. Select Elements:
Use the $ function to select elements from the DOM.
Pass a CSS selector (e.g., '#submit-btn', '.card') as the argument to the $ function.

const submitBtn = $('#submit-btn'),
      card = $('.card'),
      formInput = $('.form'),
      space = $('.space');
Enter fullscreen mode Exit fullscreen mode

3. Log the Selected Elements:

Log the selected elements to the console to verify that they have been correctly selected.

console.log(submitBtn);  // Output: <button id="submit-btn">Submit</button>
console.log(card);       // Output: <div class="card">Card Content</div>
console.log(formInput);  // Output: <input type="text" class="form" placeholder="Enter text">
console.log(space);      // Output: <div class="space">Space Content</div>
Enter fullscreen mode Exit fullscreen mode

By defining a custom $ function, you can simplify the process of selecting DOM elements, making your code cleaner and more readable. This approach is especially useful if you are familiar with jQuery and want similar functionality in vanilla JavaScript.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay