
Practice 50 JavaScript DOM Programming Questions
Q1. Write a JavaScript program to change the content of a paragraph with the ID "demo".
Input: Change content to "Hello, World!"
Expected Output: Paragraph content updated to "Hello, World!"
Q2. Write a JavaScript program to change the background color of the page using the style property.
Input: Change background color to "lightblue"
Expected Output: Background color of the page is light blue.
Q3. Write a JavaScript program to add a new list item to an unordered list with ID "myList".
Input: Add "Item 4"
Expected Output: A new list item "Item 4" is added to the list.
Q4. Write a JavaScript program to remove the first child element from a div with ID "container".
Input: Remove first child
Expected Output: The first child element of the div is removed.
Q5. Write a JavaScript program to hide an element with ID "hideMe" when a button is clicked.
Input: Button click
Expected Output: The element with ID "hideMe" is hidden.
Q6. Write a JavaScript program to display an alert when the user clicks a button with ID "alertButton".
Input: Button click
Expected Output: An alert saying "Button clicked!"
Q7. Write a JavaScript program to change the text color of a paragraph with ID "text" to "red".
Input: Change text color to red
Expected Output: The text color of the paragraph is changed to red.
Q8. Write a JavaScript program to set the inner HTML of an element with ID "message" to "Welcome to JavaScript!".
Input: Change inner HTML to "Welcome to JavaScript!"
Expected Output: The content of the element is changed to "Welcome to JavaScript!".
Q9. Write a JavaScript program to get the value of an input field with ID "username".
Input: Enter "John" in the input field
Expected Output: "John"
Q10. Write a JavaScript program to toggle the visibility of an element with ID "toggleElement" when a button is clicked.
Input: Button click
Expected Output: The element's visibility is toggled between visible and hidden.
Q11. Write a JavaScript program to create a new div element and append it to the body of the document.
Input: Create and append a div element
Expected Output: A new div element is added to the page.
Q12. Write a JavaScript program to change the font size of a paragraph with ID "text" to 20px.
Input: Change font size to 20px
Expected Output: The font size of the paragraph is changed to 20px.
Q13. Write a JavaScript program to add a class "highlight" to a div with ID "box".
Input: Add class "highlight"
Expected Output: The div with ID "box" gets the class "highlight".
Q14. Write a JavaScript program to remove a class "highlight" from a div with ID "box".
Input: Remove class "highlight"
Expected Output: The div with ID "box" no longer has the class "highlight".
Q15. Write a JavaScript program to find the total number of child elements inside a div with ID "container".
Input: Find child elements
Expected Output: The total number of child elements is displayed.
Q16. Write a JavaScript program to change the title of the webpage.
Input: Change title to "My Webpage"
Expected Output: The title of the webpage changes to "My Webpage".
Q17. Write a JavaScript program to add an event listener to a button that alerts "Button clicked!" when clicked.
Input: Button click
Expected Output: An alert "Button clicked!" is shown.
Q18. Write a JavaScript program to change the background color of a button with ID "btn" when hovered.
Input: Hover over the button
Expected Output: The background color of the button changes.
Q19. Write a JavaScript program to change the text of a button with ID "btn" to "Click Me!".
Input: Change text to "Click Me!"
Expected Output: The text on the button changes to "Click Me!".
Q20. Write a JavaScript program to add a new table row at the end of the table with ID "myTable".
Input: Add a new row
Expected Output: A new row is added at the end of the table.
Q21. Write a JavaScript program to delete the last row of a table with ID "myTable".
Input: Delete last row
Expected Output: The last row of the table is removed.
Q22. Write a JavaScript program to set the background color of the entire webpage to "lightgreen".
Input: Change background color to lightgreen
Expected Output: The webpage background color changes to lightgreen.
Q23. Write a JavaScript program to create a new button element and append it to a div with ID "buttonContainer".
Input: Create and append a button
Expected Output: A new button is added to the div with ID "buttonContainer".
Q24. Write a JavaScript program to disable an input field with ID "myInput".
Input: Disable the input field
Expected Output: The input field is disabled.
Q25. Write a JavaScript program to add a new option to a select dropdown with ID "mySelect".
Input: Add a new option "Option 4"
Expected Output: A new option "Option 4" is added to the dropdown.
Q26. Write a JavaScript program to change the border of a div with ID "box" to 2px solid red.
Input: Change border to 2px solid red
Expected Output: The div "box" gets a red border.
Q27. Write a JavaScript program to get the first child element of a div with ID "container".
Input: Get the first child
Expected Output: The first child element of the div is returned.
Q28. Write a JavaScript program to change the text of a div with ID "message" when a button is clicked.
Input: Button click, change text to "Hello, World!"
Expected Output: The div content changes to "Hello, World!".
Q29. Write a JavaScript program to show a hidden element with ID "hiddenElement" when a button is clicked.
Input: Button click
Expected Output: The element with ID "hiddenElement" becomes visible.
Q30. Write a JavaScript program to check if an element with ID "inputField" is empty or not.
Input: Check input field
Expected Output: If empty, show "Input is empty". If not, show the input value.
Q31. Write a JavaScript program to add a border to all paragraphs in the document.
Input: Add border
Expected Output: All paragraphs in the document get a border.
Q32. Write a JavaScript program to append text to an existing paragraph with ID "textPara".
Input: Append " - JavaScript is fun!"
Expected Output: The paragraph content becomes "Original Text - JavaScript is fun!".
Q33. Write a JavaScript program to prevent the default behavior of a form submission.
Input: Submit form
Expected Output: The form does not submit.
Q34. Write a JavaScript program to create a new image element and append it to the body.
Input: Create and append an image with source URL "image.jpg"
Expected Output: A new image is displayed on the page.
Q35. Write a JavaScript program to change the width of an image with ID "img1" to 300px.
Input: Change width to 300px
Expected Output: The image width changes to 300px.
Q36. Write a JavaScript program to get all the anchor tags on the page.
Input: Retrieve all anchor tags
Expected Output: An array of all anchor tags is returned.
Q37. Write a JavaScript program to change the font style of all headings (h1, h2, h3) to italic.
Input: Change font style to italic
Expected Output: All headings are displayed in italic.
Q38. Write a JavaScript program to append a new paragraph to the body when a button is clicked.
Input: Button click, new paragraph text: "New paragraph added!"
Expected Output: A new paragraph is added to the body.
Q39. Write a JavaScript program to change the text content of a list item when clicked.
Input: Click on the list item
Expected Output: The text of the list item changes.
Q40. Write a JavaScript program to add a new div with a class "newDiv" to the page.
Input: Add div with class "newDiv"
Expected Output: A new div with class "newDiv" is added to the page.
Q41. Write a JavaScript program to change the color of a button with ID "myButton" when the mouse is over it.
Input: Mouse hover
Expected Output: The button changes color when hovered.
Q42. Write a JavaScript program to set a custom attribute "data-info" to a div with ID "infoDiv".
Input: Set "data-info" to "Custom Data"
Expected Output: The div gets a new attribute "data-info" with the value "Custom Data".
Q43. Write a JavaScript program to log the value of an input field with ID "inputField" to the console.
Input: Log input field value
Expected Output: The value of the input field is printed in the console.
Q44. Write a JavaScript program to change the visibility of an element with ID "visibilityToggle" from visible to hidden.
Input: Toggle visibility
Expected Output: The element's visibility is toggled.
Q45. Write a JavaScript program to add a new row at the top of the table with ID "myTable".
Input: Add new row
Expected Output: A new row is added at the top of the table.
Q46. Write a JavaScript program to append a text node to a div with ID "textContainer".
Input: Append "New text node"
Expected Output: The text node is added inside the div.
Q47. Write a JavaScript program to change the value of a text input with ID "input1".
Input: Set value to "New value"
Expected Output: The input field's value is changed to "New value".
Q48. Write a JavaScript program to log the current URL of the webpage to the console.
Input: Log the URL
Expected Output: The URL of the webpage is printed to the console.
Q49. Write a JavaScript program to create a dropdown menu with options "Option 1", "Option 2", and "Option 3".
Input: Create dropdown with options
Expected Output: A dropdown menu is displayed with three options.
Q50. Write a JavaScript program to toggle the class "active" on a button with ID "toggleButton" when clicked.
Input: Button click
Expected Output: The button either gets or removes the "active" class.