Scribd
Upload
2 views

javascript_dom_practice

The document contains a series of JavaScript DOM manipulation practice questions categorized into three levels: Basic, Intermediate, and Advanced. Each level includes specific tasks such as modifying element text, changing styles, creating elements, and handling events. The exercises aim to enhance skills in manipulating the Document Object Model (DOM) through various interactive scenarios.

Uploaded by

yekyabaathuyibhai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

javascript_dom_practice

The document contains a series of JavaScript DOM manipulation practice questions categorized into three levels: Basic, Intermediate, and Advanced. Each level includes specific tasks such as modifying element text, changing styles, creating elements, and handling events. The exercises aim to enhance skills in manipulating the Document Object Model (DOM) through various interactive scenarios.

Uploaded by

yekyabaathuyibhai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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`.

You might also like