Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript focus a particular element with div class, not div id declaration?
In this article, we will learn to focus on a particular element with a div class in JavaScript. In JavaScript, setting focus on an element is commonly done using the focus() method, which works with elements selected by class name.
What is the focus() method?
The focus() method in JavaScript is used to bring a specific element into focus. This means the element becomes active, allowing the user to interact with it, such as typing in an input field or highlighting a section of the webpage.
Syntax
element.focus();
Here, the element is the DOM element that will receive the focus.
Selecting Elements by Class
If an element has a class rather than an id, we can select it using document.querySelector() or document.querySelectorAll(). The first matched element can then be focused using the focus() method.
// Select first element with class 'my-class'
let element = document.querySelector('.my-class');
element.focus();
// Or select all elements and focus the first one
let elements = document.querySelectorAll('.my-class');
if (elements.length > 0) {
elements[0].focus();
}
Making Elements Focusable
By default, only form elements and links are focusable. To make other elements focusable (like div or span), add the tabindex attribute:
<div class="focusable-div">This div can be focused</div> <span class="focusable-span">This span can be focused</span>
Complete Example
Below is a complete example demonstrating how to focus on elements with a specific class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Element by Class</title>
<style>
.focus-target {
padding: 20px;
border: 2px solid #ccc;
margin: 10px 0;
background-color: #f9f9f9;
}
.focus-target:focus {
border-color: #007bff;
background-color: #e7f3ff;
outline: none;
}
</style>
</head>
<body>
<div class="focus-target">
First focusable div with class 'focus-target'
</div>
<div class="focus-target">
Second focusable div with class 'focus-target'
</div>
<button id="focusFirst">Focus First Element</button>
<button id="focusSecond">Focus Second Element</button>
<script>
// Focus first element with the class
document.getElementById('focusFirst').addEventListener('click', function() {
document.querySelector('.focus-target').focus();
});
// Focus second element with the class
document.getElementById('focusSecond').addEventListener('click', function() {
let elements = document.querySelectorAll('.focus-target');
if (elements.length > 1) {
elements[1].focus();
}
});
</script>
</body>
</html>
Key Points
- Use
document.querySelector('.classname')to select the first element with a specific class - Use
document.querySelectorAll('.classname')to select all elements with a specific class - Add
tabindex="-1"to make non-form elements focusable - Use CSS
:focuspseudo-class to style focused elements - Always check if elements exist before calling
focus()
Browser Compatibility
The focus() method is supported in all modern browsers. The querySelector and querySelectorAll methods are also widely supported in all browsers including Internet Explorer 8+.
Conclusion
The focus() method combined with document.querySelector() allows you to focus elements by class name instead of relying on id attributes. Remember to make elements focusable using the tabindex attribute for non-form elements.
2K+ Views
