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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

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

Okay