Practice 50 JavaScript DOM Programming Questions, TechnoVlogs

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.

Share on Social Media