JavaScript DOM MCQ Questions and Answers

Practice these JavaScript DOM MCQ questions and answers to test your knowledge of DOM element selection, manipulation, traversal, and commonly used JavaScript methods. This quiz covers concepts such as getElementById(), getElementsByClassName(), querySelector(), and other DOM-related interview topics frequently asked in front-end development interviews.

What Is the JavaScript DOM?

The Document Object Model (DOM) is a programming interface that represents an HTML document as a tree of objects. JavaScript uses the DOM to access, modify, create, and remove elements dynamically on a web page.

Developers commonly use methods such as getElementById(), getElementsByClassName(), querySelector(), and querySelectorAll() to locate and manipulate elements within the DOM.

DOM-related questions are frequently asked during JavaScript interviews because they test a developer's ability to interact with web pages, handle events, update content dynamically, and build interactive user interfaces.

Instructions

Topic- JS dom element operations

The test consists of 12 questions.

No negative marking for this test.

No Time limit

The pass percentage is 70%

The correct answer with a description will be displayed after the answer has been marked.

Submit the test to calculate your score once you are done with all the questions.

Complexity Level- Moderate

Q1: Select the correct JavaScript code to change the content of the HTML element below.

document.getElementId("para").value("hello JS website");

document.getElementById("para").value("hello JS website");

doc.getElementById("para").value("hello JS website");

document.getElementById("para").innerHTML="hello JS website";

Q2: Select the correct JavaScript code to change the content of the HTML element below.

document.getElementsByTagName("p").innerHTML = "Hello World!";

document.getElementById("para").innerHTML="Hello World!";

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

document.getElementsByTagName("div")[0].innerHTML = "Hello World!";

Q3: Consider the below HTML code:

On executing the below JavaScript code,
document.querySelector(".para").innerHTML = "Hello World!";

which of the following para will be replaced by the text - "Hello World!" ?

para 1

para 2

Both the paragraphs

None of the paragraphs

Q4: Select the correct JavaScript code to change the color of the HTML element below:

var e= document.getElementByClass("firstHeading");
e.style.color = "red";

var e= document.getElementByName("firstHeading");
e.style.color = "red";

var e= document.getElementById("firstHeading");
e.css.color = "red";

var e= document.getElementById("firstHeading");
e.style.color = "red";

Q5: If two or more elements with the same id exist, then getElementById() returns the first.

Select, whether the statement is true or false:

True

False

Q6: What is the correct syntax for creating a function in JavaScript?

func displayResult()

function: displayResult()

function displayResult()

function::displayResult()

Q7: Consider the below radio button.

Which of the following JavaScript codes will check whether the radio button is checked or not?

var ele=document.getElementById("value3");
console.log(ele.checked());

var ele=document.getElementById("value3");
console.log(ele.checked);

var ele=document.getElementById("value3");
console.log(ele.ticked);

var ele=document.getElementById("value3");
console.log(ele.ticked());

Q8: Which input checkbox property will check whether the checkbox is enabled or disabled?

displayed

visible

enabled

disabled

Q9: 'onchange' event will be triggered when ______

Select the correct event when the 'onchange' event gets triggered:

On click of a checkbox.

On click of a button.

The value of a select tag/element gets changed.

On entering some values in an input text field.

Q10: Consider the below input field:

Which of the below javascript code will fetch and print the input value on the console?

var e= document.getElementById("testInput").innerHTML;
console.log(e.value);

var e= document.getElementById("testInput");
console.log(e.length);

var e= document.getElementById("testInput");
console.log(e.value);

All of the above

Q11: Which event gets triggered when a user right-clicks on an element?

onclick

oncontextmenu

onmousemove

onmouseenter

Q12: What will be the output of the below JS code?

const d = new Date("2023-05-21")
console.log(d.getFullYear());

2023

2021

2000 to 2023

2023-05-21

Share the link

Frequently Asked Questions (FAQs)

What is the DOM in JavaScript?

The DOM (Document Object Model) is a structured representation of an HTML document that allows JavaScript to access and modify page elements dynamically.

What is getElementById() in JavaScript?

getElementById() is a DOM method used to locate and return an HTML element based on its unique id attribute.

What is the difference between querySelector() and getElementById()?

getElementById() selects elements by id, whereas querySelector() can select elements using CSS selectors such as ids, classes, attributes, and element names.

Are DOM questions common in JavaScript interviews?

Yes. JavaScript interviews frequently include questions about DOM manipulation, element selection, event handling, and dynamic content updates.

Who should practice JavaScript DOM MCQs?

These questions are useful for students, front-end developers, web developers, and interview candidates preparing for JavaScript and web development roles.

FIRST NAME:
LAST NAME:
CITY:
BACKGROUND:
INTERESTED IN:
FEEDBACK:

Vocabulary MCQ Tests:

Essential Words

Grammar

Selenium MCQ Tests:

Selenium

Testing

JavaScript DOM MCQ Questions and Answers

What Is the JavaScript DOM?

Frequently Asked Questions (FAQs)

What is the DOM in JavaScript?

What is getElementById() in JavaScript?

What is the difference between querySelector() and getElementById()?

Are DOM questions common in JavaScript interviews?

Who should practice JavaScript DOM MCQs?

Vocabulary MCQ Tests:

Essential Words

Grammar

Selenium MCQ Tests:

Selenium

Testing

JavaScript DOM MCQ Questions and Answers

What Is the JavaScript DOM?

More JavaScript MCQ Quizzes

JavaScript MCQ Hub

JavaScript Data Types Quiz

JavaScript Variables Quiz

JavaScript String Quiz

Frequently Asked Questions (FAQs)

What is the DOM in JavaScript?

What is getElementById() in JavaScript?

What is the difference between querySelector() and getElementById()?

Are DOM questions common in JavaScript interviews?

Who should practice JavaScript DOM MCQs?