JAVASCRIPT
- Understanding Hoisting in JavaScript
- Understanding Closures in JavaScript: A Complete Guide for Beginners
- Understanding Anonymous Functions in JavaScript
- JavaScript Functions: A Complete Guide
- Var vs let vs const in JavaScript
- Understanding Temporal Dead Zone (TDZ) in JavaScript
- what is surrounding state and lexical environment
- Understanding the Scope Chain in JavaScript
- How Javascript Works And Code is executed
- What is undefined and null in JavaScript?
- What are template literals in JavaScript?
- What is the difference between typeof and instanceof?
- What is a callback function?
- Explain IIFE (Immediately Invoked Function Expression).
- What is the difference between function declarations and function expressions?
- What is the arguments object in JavaScript?
- What are rest parameters and default parameters?
- What are first-class functions?
- What is the difference between call, apply, and bind?
- Explain private variables in JavaScript.
- What is an object in JavaScript?
- What are object properties and methods?
- What are getters and setters in JavaScript?
- Difference between object literal and constructor function.
- What is the difference between Object.freeze and Object.seal?
- How does Object.create() work?
- What is the DOM?
- How do you prevent default behavior of events?
- Difference between innerHTML, innerText, and textContent.
- Understanding Events in JavaScript: A Complete Guide
- How to Chain Promises in JavaScript? (Complete Guide)
- What is the difference between function scope and block scope?
- What are data attributes?
- Understanding the JavaScript Event Loop: A Complete Guide
- Explain this keyword in JavaScript.
- What is prototype and prototypal inheritance?
- How do you add or remove properties from an object?
- Difference between array and object.
- What is event delegation?
- What are array methods like map, filter, reduce?
- How do you clone an array?
- Difference between forEach and map.
- What is destructuring?
- What are template literals?
- What are modules in JavaScript?
- What is spread and rest operator?
- Difference between import and require.
- What is a promise?
- How do you remove an event listener?
- Explain async/await in JavaScript.
- Difference between HTMLCollection and NodeList.
- How do you select elements in DOM?
- Explain event delegation.
- What is a generator function?
- What is the difference between bubbling and capturing?
- How to create and remove DOM elements dynamically?
- How to traverse the DOM?
- Explain event bubbling and capturing.
- Difference between onclick and addEventListener.
- What is preventDefault and stopPropagation?
- How to handle keyboard events?
- How to handle mouse events?
- How to handle form submission using JS?
- Difference between synchronous and asynchronous code.
- Explain memoization in JavaScript.
- Explain debounce and throttle.
- Difference between shallow copy and deep copy.
- What is Proxy and Reflect in JavaScript?
- Explain Symbol in JavaScript.
What are data attributes?
In HTML, data attributes are custom attributes that let you store extra information on standard HTML elements without using non-standard attributes or cluttering class names.
They start with data- followed by your own attribute name. For example:
<button id="btn1" data-user-id="42" data-role="admin">
Click Me
</button>
Key Points:
- Custom Data Storage
- You can use them to store additional information directly in HTML, useful for JavaScript.
- Example:
data-user-id="42"stores the user ID.
- Syntax
- Must start with
data-. - Example:
data-*→data-name,data-product-id,data-role.
- Must start with
- Accessing Data Attributes
- In JavaScript, you can access them via the
datasetproperty:
const btn = document.getElementById("btn1"); console.log(btn.dataset.userId); // "42" console.log(btn.dataset.role); // "admin"- Note:
data-user-idbecomesdataset.userId(camelCase conversion).
- In JavaScript, you can access them via the
- Use Cases
- Attaching metadata (IDs, roles, states) without making extra API calls.
- Passing small bits of configuration or state to JavaScript.
- Useful for dynamic UI elements (e.g., product IDs in a shopping cart).
✅ Good practice: Use data attributes for small amounts of data. For large or complex data, use JSON or APIs.
No comments yet! You be the first to comment.