JavaScript DOM Manipulation Practice Questions
## Basic Level (10 Questions)
1. **Select an element by ID and modify its text**
- Select an element with id="title" using JavaScript.
- Change its text content to "Hello, JavaScript!".
2. **Change the background color of all `<p>` elements**
- Select all paragraph (`<p>`) elements.
- Change their background color to `lightblue`.
3. **Create and append a new `<h2>` element**
- Create an `<h2>` element using `document.createElement`.
- Set its text to "Welcome to DOM".
- Append it to the `<body>`.
4. **Remove an element from the DOM**
- Select an element with the class name `remove-me`.
- Remove it from the DOM using `remove()` or
`parentNode.removeChild()`.
5. **Toggle a class on an element when clicked**
- Select an element with `id="box"`.
- Toggle the class `highlight` on it when a button is clicked.
6. **Dynamically create and add a button**
- Create a button element.
- Set its text to "Click Me".
- Append it inside a `<div id="container">`.
7. **Get the value of an input field**
- Select an `<input>` field with `id="username"`.
- Get and display its value when a button is clicked.
8. **Modify the font size of `<h1>` elements**
- Select all `<h1>` elements.
- Change their font size to `24px`.
9. **Change an image source dynamically**
- Select an `<img>` element.
- Change its `src` attribute to `"new-image.jpg"` when a button is
clicked.
10. **Count the number of `<li>` elements in a list**
- Select a `<ul>` list.
- Count and display the number of `<li>` elements inside it.
## Intermediate Level (10 Questions)
11. **Add a new `<li>` element dynamically**
- Create a function that adds a new `<li>` element with random text
to a `<ul>` when a button is clicked.
12. **Replace an existing `<div>` with a `<p>` element**
- Select a `<div>`.
- Replace it with a newly created `<p>` element containing custom
text.
13. **Move an element to a different parent**
- Select an element with `id="item"`.
- Move it inside another `<div id="newParent">`.
14. **Toggle visibility of an element**
- Select an element.
- Hide it when clicked and show it again when clicked again.
15. **Change button text when clicked**
- Create an event listener that changes the text of a button to
"Clicked!" when pressed.
16. **Prevent default behavior of a link**
- Select an `<a>` tag.
- Prevent it from navigating to another page when clicked.
17. **Trigger an alert when Enter key is pressed**
- Select an `<input>` field.
- Display an alert when the user presses the "Enter" key.
18. **Change background color on mouse hover**
- Select a `<div>`.
- Change its background color when the mouse hovers over it.
19. **Animate element width expansion**
- Select an element and increase its width from `100px` to `300px`
over 1 second.
20. **Shuffle elements in a `<ul>` list**
- Select all `<li>` elements inside a `<ul>`.
- Shuffle their order when a button is clicked.
## Advanced Level (10 Questions)
21. **Create a counter**
- Build a counter that increases or decreases a number when
respective buttons are clicked.
22. **Build a simple to-do list**
- Allow users to add and remove items dynamically from a list.
23. **Create a modal popup**
- Build a modal that opens when a button is clicked and closes
when clicking outside it.
24. **Generate a dynamic table**
- Allow users to add and remove rows and columns in an HTML
table dynamically.
25. **Store user input in `localStorage`**
- Save text entered in an input field to `localStorage` and load it
when the page is refreshed.
26. **Build a dropdown menu**
- Show/hide a dropdown menu when clicked.
27. **Fetch and display API data**
- Fetch JSON data from an API and display it inside a `<div>`.
28. **Implement light/dark mode toggle**
- Create a switch that toggles light and dark mode and saves the
preference.
29. **Implement drag-and-drop functionality**
- Allow users to drag items from one `<div>` container to another.
30. **Debounce an input field**
- Implement a search box where results appear only if the user
stops typing for `500ms`.
