MCQS In HTML

Multiple Choice Question for Grand JS Quiz

(Chap # 51 - Reading and setting paragraph text)

(1) How do you read the text content of a paragraph element in JavaScript?

A) document.getElementById("paragraphID").text
B) document.getElementById("paragraphID").value
C) document.getElementById("paragraphID").innerHTML
D) document.getElementById("paragraphID").textContent

Answer: D) document.getElementById("paragraphID").textContent

Explanation: The "textContent" property is used to read the text content of a paragraph element in JavaScript.

(2) How do you set the text content of a paragraph element in JavaScript?

A) document.getElementById("paragraphID").innerText = "new text"
B) document.getElementById("paragraphID").text = "new text"
C) document.getElementById("paragraphID").textContent = "new text"
D) document.getElementById("paragraphID").innerHTML = "new text"

Answer: C) document.getElementById("paragraphID").textContent = "new text"

Explanation: The "textContent" property is used to set the text content of a paragraph element in JavaScript.

(3) What is the difference between innerHTML and textContent?

A) innerHTML retrieves HTML elements, while textContent retrieves only text
B) innerHTML retrieves only text, while textContent retrieves HTML elements
C) There is no difference between innerHTML and textContent
D) innerHTML retrieves both text and HTML, while textContent retrieves only text

Answer: D) innerHTML retrieves both text and HTML, while textContent retrieves only text

Explanation: "innerHTML" retrieves the HTML content (including tags), while "textContent" retrieves only the text content of the element.

(4) How can you append text to an existing paragraph element in JavaScript?

A) document.getElementById("paragraphID").appendText("new text")
B) document.getElementById("paragraphID").innerText += "new text"
C) document.getElementById("paragraphID").innerHTML += "new text"
D) Both B and C

Answer: D) Both B and C

Explanation: You can append text to a paragraph element using either "innerText" or "innerHTML" by using the += operator.

(5) How do you clear the text content of a paragraph element in JavaScript?

A) document.getElementById("paragraphID").text = ""
B) document.getElementById("paragraphID").textContent = ""
C) document.getElementById("paragraphID").clearText()
D) document.getElementById("paragraphID").innerHTML = ""

Answer: B) document.getElementById("paragraphID").textContent = ""

Explanation: To clear the text content of a paragraph element, you can set "textContent" to an empty string.

(6) Which of the following methods will give you the HTML content of a paragraph element?

A) document.getElementById("paragraphID").innerHTML
B) document.getElementById("paragraphID").textContent
C) document.getElementById("paragraphID").text
D) document.getElementById("paragraphID").htmlContent

Answer: A) document.getElementById("paragraphID").innerHTML

Explanation: The "innerHTML" property retrieves the HTML content, including tags, of the element.

(7) What will be the result of setting the "textContent" property of a paragraph to "new text"?

A) The paragraph will display the text "new text" with a bold tag
B) The paragraph will display the text "new text" without any HTML formatting
C) The paragraph will display the HTML as it is, showing new text as bold text
D) The browser will throw an error

Answer: B) The paragraph will display the text "new text" without any HTML formatting

Explanation: "textContent" only retrieves and sets text, ignoring any HTML tags.

(8) How do you read the content of a paragraph element using innerText?

A) document.getElementById("paragraphID").innerText
B) document.getElementById("paragraphID").textContent
C) document.getElementById("paragraphID").value
D) document.getElementById("paragraphID").innerHTML

Answer: A) document.getElementById("paragraphID").innerText

Explanation: The "innerText" property can be used to read the visible text content of an element.

(9) How would you replace the text inside a paragraph element with new content?

A) document.getElementById("paragraphID").innerHTML = "new content"
B) document.getElementById("paragraphID").innerText = "new content"
C) document.getElementById("paragraphID").textContent = "new content"
D) All of the above

Answer: D) All of the above

Explanation: You can replace the text of a paragraph element using any of these properties: innerHTML, innerText, or textContent.

(10) Which property should be used to set the text of an element if you need to include HTML formatting?

A) innerHTML
B) textContent
C) innerText
D) Both B and C

Answer: A) innerHTML

Explanation: The "innerHTML" property allows you to include HTML formatting when setting the text of an element.

(Chap # 52 - Manipulating images and text)

(1) How can you change the source of an image element in JavaScript?

A) document.getElementById("imageID").src = "newImage.jpg"
B) document.getElementById("imageID").source = "newImage.jpg"
C) document.getElementById("imageID").href = "newImage.jpg"
D) document.getElementById("imageID").imgSrc = "newImage.jpg"

Answer: A) document.getElementById("imageID").src = "newImage.jpg"

Explanation: The "src" property is used to change the source of an image in JavaScript.

(2) How do you change the text content of an HTML paragraph element in JavaScript?

A) document.getElementById("paraID").innerText = "new text"
B) document.getElementById("paraID").textContent = "new text"
C) document.getElementById("paraID").text = "new text"
D) Both A and B

Answer: D) Both A and B

Explanation: Both "innerText" and "textContent" can be used to change the text content of a paragraph element.

(3) Which of the following is the correct way to manipulate an image in JavaScript?

A) document.getElementById("imageID").style.backgroundImage = "url('newImage.jpg')"
B) document.getElementById("imageID").style.background = "url('newImage.jpg')"
C) document.getElementById("imageID").style.src = "newImage.jpg"
D) Both A and B

Answer: D) Both A and B

Explanation: Both backgroundImage and background properties can be used to manipulate an image in JavaScript.

(4) How do you hide an image using JavaScript?

A) document.getElementById("imageID").display = "none"
B) document.getElementById("imageID").style.display = "none"
C) document.getElementById("imageID").style.visibility = "hidden"
D) Both B and C

Answer: D) Both B and C

Explanation: You can hide an image either by setting "style.display" to "none" or by setting "style.visibility" to "hidden".

(5) What will be the effect of the following code?

document.getElementById("imageID").style.width = "500px";
A) It will set the width of the image to 500px.
B) It will set the width of the image to 500%.
C) It will enlarge the image without changing the width.
D) It will change the image's source to 500px.

Answer: A) It will set the width of the image to 500px.

Explanation: The code sets the width of the image element with the id "imageID" to 500px.

(6) How do you remove an image from the page in JavaScript?

A) document.getElementById("imageID").remove()
B) document.getElementById("imageID").src = ""
C) document.getElementById("imageID").delete()
D) Both A and B

Answer: D) Both A and B

Explanation: You can remove an image from the page by either using the "remove()" method or by setting the "src" to an empty string.

(7) Which of the following methods will change the size of an image in JavaScript?

A) document.getElementById("imageID").width = "500px"
B) document.getElementById("imageID").style.width = "500px"
C) document.getElementById("imageID").style.height = "500px"
D) Both B and C

Answer: D) Both B and C

Explanation: You can adjust the size of the image by manipulating the "style.width" or "style.height" properties.

(8) What is the correct way to swap two images on the webpage using JavaScript?

A) document.getElementById("imageID1").src = document.getElementById("imageID2").src
B) document.getElementById("imageID1").src = "newImage.jpg"; document.getElementById("imageID2").src = "newImage2.jpg"
C) document.getElementById("imageID1").src = "image1.jpg"; document.getElementById("imageID2").src = "image2.jpg"
D) document.getElementById("imageID1").src = "newImage.jpg"; document.getElementById("imageID2").src = "newImage.jpg"

Answer: A) document.getElementById("imageID1").src = document.getElementById("imageID2").src

Explanation: Swapping the source URLs of two images is done by setting one image's source to the other image's source.

(9) How do you apply a class to an image in JavaScript?

A) document.getElementById("imageID").className = "newClass"
B) document.getElementById("imageID").classList.add("newClass")
C) Both A and B
D) document.getElementById("imageID").setAttribute("class", "newClass")

Answer: C) Both A and B

Explanation: You can apply a class to an image by using either "className" or "classList.add".

(10) What does the following code do?

document.getElementById("imageID").style.display = "none";
A) Hides the image from view
B) Removes the image from the document
C) Changes the image's size to 0px
D) Changes the image's background to none

Answer: A) Hides the image from view

Explanation: This code sets the "display" style property of the image to "none", which hides the image from view.

(Chap # 53 - Swaping images)

(1) How can you swap the image of an image element in JavaScript?

A) document.getElementById("imageID").src = "newImage.jpg"
B) document.getElementById("imageID").image = "newImage.jpg"
C) document.getElementById("imageID").replaceImage("newImage.jpg")
D) document.getElementById("imageID").src.replace("image.jpg", "newImage.jpg")

Answer: A) document.getElementById("imageID").src = "newImage.jpg"

Explanation: You can change the source of an image by assigning a new image URL to the "src" property.

(2) Which JavaScript method is used to change the image source dynamically on a mouse click event?

A) onclick = "changeImage()"
B) document.getElementById("imageID").src = "newImage.jpg"
C) addEventListener("click", changeImage)
D) Both B and C

Answer: D) Both B and C

Explanation: You can either directly change the "src" or use an event listener to trigger a function that changes the image source.

(3) How do you implement an image swapping functionality using two images in JavaScript?

A) document.getElementById("image1").src = document.getElementById("image2").src;
B) document.getElementById("image1").src = "newImage.jpg";
C) document.getElementById("image1").src = "image1.jpg";
D) document.getElementById("image1").src = "image2.jpg";

Answer: A) document.getElementById("image1").src = document.getElementById("image2").src;

Explanation: To swap images, you assign the source of one image to the other, effectively swapping their appearances.

(4) What is the best way to swap two images using JavaScript with event listeners?

A) Use a single function to swap image sources when an event is triggered.
B) Add multiple event listeners for each image.
C) Only use the "onclick" event.
D) Change the "src" of both images using their ID selectors.

Answer: A) Use a single function to swap image sources when an event is triggered.

Explanation: The most efficient way is to use a single function that changes the "src" of both images when an event occurs.

(5) In JavaScript, how can you detect when the image swap has completed?

A) Using the "load" event listener on the image element.
B) Checking the image source after every function call.
C) Using the "readyState" property.
D) By adding a timeout in the code.

Answer: A) Using the "load" event listener on the image element.

Explanation: The "load" event listener can be used to detect when the image has successfully loaded after the swap.

(6) How can you add a "hover" effect to change an image when the mouse is over it?

A) Add a "mouseover" event listener to the image.
B) Use CSS with the ":hover" selector.
C) Both A and B
D) Change the "src" on mouse enter event only.

Answer: C) Both A and B

Explanation: You can achieve this effect either with a "mouseover" event listener in JavaScript or by using the ":hover" selector in CSS.

(7) What is the correct code to swap two images on a mouse click event?

A) document.getElementById("image1").src = "image2.jpg"; document.getElementById("image2").src = "image1.jpg";
B) document.getElementById("image1").src = "image1.jpg"; document.getElementById("image2").src = "image2.jpg";
C) document.getElementById("image1").src = "newImage.jpg"; document.getElementById("image2").src = "newImage2.jpg";
D) document.getElementById("image1").src = "newImage.jpg"; document.getElementById("image2").src = "newImage.jpg";

Answer: A) document.getElementById("image1").src = "image2.jpg"; document.getElementById("image2").src = "image1.jpg";

Explanation: This code swaps the source between two image elements with the IDs "image1" and "image2".

(8) What is the simplest method to swap an image on mouse click using an event handler?

A) document.getElementById("imageID").onclick = changeImage;
B) document.getElementById("imageID").src = "newImage.jpg";
C) document.getElementById("imageID").style.visibility = "hidden";
D) document.getElementById("imageID").style.display = "none";

Answer: A) document.getElementById("imageID").onclick = changeImage;

Explanation: By assigning a function (like "changeImage") to the "onclick" event handler, you can easily swap images when the user clicks on the image.

(9) How can you swap the images back to the original ones?

A) By resetting the "src" attributes of the images.
B) By using the "revert" method.
C) By calling the "swapImages" function again.
D) Both A and C.

Answer: D) Both A and C.

Explanation: To swap back, you either reset the "src" attributes or call the image swapping function again to revert the changes.

(10) What will happen if you use the wrong image source in the "src" attribute of an image?

A) The image will not be displayed.
B) A broken image icon will be displayed.
C) The image will be replaced by a default placeholder image.
D) All of the above.

Answer: D) All of the above.

Explanation: If the "src" attribute contains an incorrect URL, the image will not display, and a broken image icon may appear, or a placeholder image might be shown depending on the browser settings.

(Chap # 54 - Swapping images and setting class)

(1) How can you change the class of an element when swapping images in JavaScript?

A) document.getElementById("imageID").classList.add("newClass");
B) document.getElementById("imageID").classList.remove("oldClass");
C) document.getElementById("imageID").className = "newClass";
D) All of the above

Answer: D) All of the above

Explanation: You can add a new class, remove an old class, or directly change the class name of an element to modify its style when swapping images.

(2) Which method is used to remove a class from an element?

A) document.getElementById("imageID").removeClass("oldClass");
B) document.getElementById("imageID").classList.remove("oldClass");
C) document.getElementById("imageID").classList.delete("oldClass");
D) document.getElementById("imageID").className.remove("oldClass");

Answer: B) document.getElementById("imageID").classList.remove("oldClass");

Explanation: To remove a class from an element, use the "classList.remove()" method, passing the class name you want to remove.

(3) How can you add multiple classes to an element when swapping images?

A) document.getElementById("imageID").className = "newClass newClass2";
B) document.getElementById("imageID").classList.add("newClass", "newClass2");
C) document.getElementById("imageID").classList.add("newClass newClass2");
D) document.getElementById("imageID").classList.replace("oldClass", "newClass newClass2");

Answer: B) document.getElementById("imageID").classList.add("newClass", "newClass2");

Explanation: You can add multiple classes using the "classList.add()" method by passing each class as a separate argument.

(4) What is the correct way to swap two images and change the class of the image?

A) document.getElementById("image1").src = "image2.jpg"; document.getElementById("image1").classList.add("newClass");
B) document.getElementById("image2").src = "image1.jpg"; document.getElementById("image2").classList.remove("oldClass");
C) document.getElementById("image1").src = "newImage.jpg"; document.getElementById("image2").className = "newClass";
D) document.getElementById("image1").classList.add("newClass"); document.getElementById("image2").src = "image1.jpg";

Answer: A) document.getElementById("image1").src = "image2.jpg"; document.getElementById("image1").classList.add("newClass");

Explanation: You can swap images and change the class of the swapped image using both the "src" and "classList" properties.

(5) How can you toggle between two classes when swapping an image?

A) document.getElementById("imageID").classList.toggle("class1");
B) document.getElementById("imageID").classList.replace("oldClass", "newClass");
C) document.getElementById("imageID").classList.toggle("class1", "class2");
D)

document.getElementById("imageID").classList.add("class1"); document.getElementById("imageID").classList.remove("class2");

Answer: A) document.getElementById("imageID").classList.toggle("class1");

Explanation: The "classList.toggle()" method can be used to add the class if it is not present, or remove it if it is.

(6) Which event handler can be used to swap images and change classes when an image is clicked?

A) onclick = changeImageAndClass;
B) document.getElementById("imageID").onmouseover = changeImage;
C) document.getElementById("imageID").onclick = swapImageAndClass;
D) document.getElementById("imageID").addEventListener("click", swapImage);

Answer: C) document.getElementById("imageID").onclick = swapImageAndClass;

Explanation: The "onclick" event can be used to execute the function that swaps the image and changes the class.

(7) How can you use the "classList.toggle()" method to swap an image and change its class?

A) document.getElementById("imageID").classList.toggle("newClass");
B) document.getElementById("imageID").src = "image.jpg"; document.getElementById("imageID").classList.toggle("newClass");
C) document.getElementById("imageID").classList.add("newClass");
D) document.getElementById("imageID").className = "newClass";

Answer: B) document.getElementById("imageID").src = "image.jpg"; document.getElementById("imageID").classList.toggle("newClass");

Explanation: You can swap an image by updating the "src" and toggle the class by calling "classList.toggle()" on the image element.

(8) What happens if you try to swap images but don't update the class?

A) The image source will change, but the style won't be updated.
B) The image source will change, but the class will reset to the default.
C) The image will be hidden.
D) The class will automatically be swapped with the new image.

Answer: A) The image source will change, but the style won't be updated.

Explanation: If you don't update the class, the styling of the image will remain the same even after the source changes.

(9) How do you ensure that both the image and its class are swapped correctly?

A) By only updating the "src" property.
B) By changing both the "src" and "classList" properties.
C) By using a different event listener for each swap.
D) By resetting the "className" to the default class.

Answer: B) By changing both the "src" and "classList" properties.

Explanation: To swap both the image and its associated class, you need to update both the "src" and the "classList" properties.

(10) What does the "classList" property allow you to do in relation to swapping images?

A) It allows you to add, remove, or toggle classes on the image element.
B) It allows you to change the image source.
C) It adds animations to the image element.
D) It automatically swaps images.

Answer: A) It allows you to add, remove, or toggle classes on the image element.

Explanation: The "classList" property enables you to manipulate the classes on an element, which can be useful for styling after swapping images.

(Chap # 55 - setting styles)

(1) How can you set an inline style for an element using JavaScript?

A) document.getElementById("elementID").style.backgroundColor = "red";
B) document.getElementById("elementID").setStyle("background-color: red");
C) document.getElementById("elementID").css("background-color", "red");
D) document.getElementById("elementID").setAttribute("style", "background-color: red");

Answer: A) document.getElementById("elementID").style.backgroundColor = "red";

Explanation: The correct way to set an inline style is by modifying the "style" property of the element.

(2) What is the proper way to modify multiple CSS properties at once using JavaScript?

A) document.getElementById("elementID").style = "background-color: red; color: white";
B)

document.getElementById("elementID").style.backgroundColor = "red"; document.getElementById("elementID").style.color = "white";

C) document.getElementById("elementID").setAttribute("style", "background-color: red; color: white");
D) All of the above

Answer: D) All of the above

Explanation: You can either set individual properties or directly modify the "style" attribute to apply multiple styles at once.

(3) Which of the following JavaScript properties allows you to set the CSS style of an element?

A) styleAttribute
B) classList
C) style
D) setAttribute("style")

Answer: C) style

Explanation: The "style" property of an element allows you to modify its CSS styles directly in JavaScript.

(4) What happens if you try to apply an invalid CSS property using JavaScript?

A) The browser will ignore the invalid property.
B) The browser will display an error.
C) The page will crash.
D) The CSS rule will be added but won't take effect.

Answer: A) The browser will ignore the invalid property.

Explanation: If an invalid CSS property is applied, it is simply ignored, and no error occurs.

(5) How can you change the background color of an element to "blue" using JavaScript?

A) document.getElementById("elementID").style.backgroundColor = "blue";
B) document.getElementById("elementID").setAttribute("background-color", "blue");
C) document.getElementById("elementID").backgroundColor = "blue";
D) document.getElementById("elementID").style.background = "blue";

Answer: A) document.getElementById("elementID").style.backgroundColor = "blue";

Explanation: To set a background color via JavaScript, you use the "style.backgroundColor" property.

(6) How can you set the visibility of an element to "hidden" using JavaScript?

A) document.getElementById("elementID").style.visibility = "hidden";
B) document.getElementById("elementID").style.display = "none";
C) document.getElementById("elementID").visibility = "hidden";
D) document.getElementById("elementID").setAttribute("visibility", "hidden");

Answer: A) document.getElementById("elementID").style.visibility = "hidden";

Explanation: The "visibility" property controls whether the element is visible, and setting it to "hidden" makes the element invisible without affecting the layout.

(7) How can you make an element disappear without affecting the layout using JavaScript?

A) document.getElementById("elementID").style.display = "none";
B) document.getElementById("elementID").style.visibility = "hidden";
C) document.getElementById("elementID").style.opacity = "0";
D) All of the above

Answer: B) document.getElementById("elementID").style.visibility = "hidden";

Explanation: The "visibility" property makes the element invisible without changing its layout space, unlike "display" or "opacity".

(8) How can you set a custom font size for an element using JavaScript?

A) document.getElementById("elementID").style.fontSize = "20px";
B) document.getElementById("elementID").fontSize = "20px";
C) document.getElementById("elementID").setAttribute("font-size", "20px");
D) document.getElementById("elementID").style.font = "20px Arial";

Answer: A) document.getElementById("elementID").style.fontSize = "20px";

Explanation: The "style.fontSize" property allows you to set the font size of an element directly.

(9) Which JavaScript method allows you to modify the CSS class of an element?

A) getElementById("elementID").setAttribute("class", "newClass");
B) getElementById("elementID").style.className = "newClass";
C) getElementById("elementID").classList.add("newClass");
D) getElementById("elementID").style.classList = "newClass";

Answer: C) getElementById("elementID").classList.add("newClass");

Explanation: "classList.add()" allows you to add a new class to the element's class list.

(10) How do you remove the inline style of an element using JavaScript?

A) document.getElementById("elementID").style = "";
B) document.getElementById("elementID").style.remove();
C) document.getElementById("elementID").removeAttribute("style");
D) document.getElementById("elementID").style.removeAttribute("style");

Answer: C) document.getElementById("elementID").removeAttribute("style");

Explanation: To remove the inline style, you can use the "removeAttribute()" method on the "style" attribute of the element.

(Chap # 56 - Target all elements by tag name)

(1) How can you target all <div> elements in a document using JavaScript?

A) document.getElementsByTagName("div");
B) document.querySelectorAll("div");
C) document.querySelector("div");
D) Both A and B

Answer: D) Both A and B

Explanation: Both getElementsByTagName() and querySelectorAll() can be used to target all <div> elements. The former returns a live HTMLCollection, while the latter returns a static NodeList.

(2) Which method returns a NodeList of all <span> elements in a document?

A) document.getElementsByTagName("span");
B) document.getElementById("span");
C) document.querySelector("span");
D) document.querySelectorAll("span");

Answer: D) document.querySelectorAll("span");

Explanation: querySelectorAll() returns a NodeList of all matching elements, whereas getElementsByTagName() returns an HTMLCollection.

(3) What does the document.getElementsByTagName("p") method return?

A) An array of all <p> elements in the document.
B) A live HTMLCollection of all <p> elements in the document.
C) A NodeList of all <p> elements in the document.
D) A static list of all <p> elements in the document.

Answer: B) A live HTMLCollection of all <p> elements in the document.

Explanation: The method returns a live HTMLCollection, which means it automatically updates when elements are added or removed.

(4) Which of the following methods would you use to select all <h1> elements in a document?

A) document.getElementsByTagName("h1");
B) document.getElementById("h1");
C) document.querySelector("h1");
D) document.querySelectorAll("h1");

Answer: D) document.querySelectorAll("h1");

Explanation: querySelectorAll() returns all matching <h1> elements in a static NodeList, which is useful for selecting all elements of a particular tag.

(5) What is the difference between getElementsByTagName() and querySelectorAll()?

A) getElementsByTagName() returns a live collection, while querySelectorAll() returns a static NodeList.
B) getElementsByTagName() returns an array, while querySelectorAll() returns a NodeList.
C) There is no difference between the two.
D) querySelectorAll() is more efficient than getElementsByTagName().

Answer: A) getElementsByTagName() returns a live collection, while querySelectorAll() returns a static NodeList.

Explanation: The live collection of getElementsByTagName() automatically updates as elements are added or removed, whereas the static NodeList returned by querySelectorAll() does not.

(6) How can you access the first <div> element in the document?

A) document.querySelector("div");
B) document.getElementsByTagName("div")[0];
C) Both A and B
D) None of the above

Answer: C) Both A and B

Explanation: Both methods will return the first <div> element. querySelector("div") returns the first matching element, while getElementsByTagName("div")[0] gives the first <div> element in the HTMLCollection.

(7) Which method returns a live HTMLCollection of elements with the specified tag name?

A) document.querySelectorAll()
B) document.getElementsByTagName()
C) document.getElementsByClassName()
D) document.querySelector()

Answer: B) document.getElementsByTagName()

Explanation: getElementsByTagName() returns a live HTMLCollection of elements, which means it updates automatically as elements are added or removed.

(8) What is the advantage of using querySelectorAll() over getElementsByTagName()?

A) querySelectorAll() returns a static NodeList, which is easier to work with in modern web development.
B) querySelectorAll() allows you to use complex CSS selectors.
C) querySelectorAll() is faster.
D) There is no difference between the two.

Answer: B) querySelectorAll() allows you to use complex CSS selectors.

Explanation: querySelectorAll() allows you to use more complex selectors, like classes and IDs, whereas getElementsByTagName() is limited to selecting elements by tag name only.

(9) Which of the following is the correct way to select all <li> elements inside a <ul> using CSS selectors?

A) document.querySelector("ul li");
B) document.querySelectorAll("ul li");
C) Both A and B
D) None of the above

Answer: C) Both A and B

Explanation: Both querySelector() and querySelectorAll() can be used to select all <li> elements inside a <ul>, but querySelectorAll() returns a static NodeList, while querySelector() returns only the first matching element.

(10) What is the difference between querySelectorAll() and getElementsByTagName()?

A) querySelectorAll() returns a NodeList, while getElementsByTagName() returns an HTMLCollection.
B) querySelectorAll() returns a static NodeList, while getElementsByTagName() returns a live HTMLCollection.
C) Both A and B
D) There is no difference.

Answer: C) Both A and B

Explanation: querySelectorAll() returns a static NodeList, whereas getElementsByTagName() returns a live HTMLCollection.

(Chap # 57 - Target some elements by tag name)

(1) How can you target specific <div> elements based on a tag name in JavaScript?

A) document.querySelector("div");
B) document.getElementsByTagName("div");
C) document.querySelectorAll("div");
D) None of the above

Answer: B) document.getElementsByTagName("div");

Explanation: getElementsByTagName() targets all elements by their tag name. It returns a live HTMLCollection of all matching elements.

(2) Which method can be used to select all <span> elements in a document?

A) document.querySelector("span");
B) document.getElementsByTagName("span");
C) document.querySelectorAll("span");
D) All of the above

Answer: D) All of the above

Explanation: All three methods can be used to select <span> elements. However, querySelectorAll() will return a static NodeList, while the others return a live HTMLCollection or just the first matching element.

(3) What is the difference between querySelector() and querySelectorAll()?

A) querySelector() selects the first matching element, while querySelectorAll() selects all matching elements.
B) querySelector() returns an HTMLCollection, while querySelectorAll() returns a NodeList.
C) There is no difference.
D) querySelectorAll() is faster than querySelector().

Answer: A) querySelector() selects the first matching element, while querySelectorAll() selects all matching elements.

Explanation: querySelector() returns the first matching element, while querySelectorAll() returns all matching elements as a static NodeList.

(4) Which method returns a live HTMLCollection of elements with the specified tag name?

A) document.querySelectorAll()
B) document.getElementsByTagName()
C) document.getElementsByClassName()
D) document.querySelector()

Answer: B) document.getElementsByTagName()

Explanation: getElementsByTagName() returns a live HTMLCollection, which updates automatically when elements are added or removed.

(5) Which of the following methods would you use to select all <h1> elements in a document?

A) document.getElementsByTagName("h1");
B) document.querySelector("h1");
C) document.querySelectorAll("h1");
D) Both A and C

Answer: D) Both A and C

Explanation: Both getElementsByTagName("h1") and querySelectorAll("h1") can select all <h1> elements. However, getElementsByTagName() returns a live HTMLCollection, while querySelectorAll() returns a static NodeList.

(6) What is a key feature of querySelectorAll() in comparison to getElementsByTagName()?

A) querySelectorAll() returns a live HTMLCollection, while getElementsByTagName() returns a static NodeList.
B) querySelectorAll() can select elements based on multiple selectors, while getElementsByTagName() can only select by tag name.
C) There is no difference between the two.
D) querySelectorAll() is faster than getElementsByTagName().

Answer: B) querySelectorAll() can select elements based on multiple selectors, while getElementsByTagName() can only select by tag name.

Explanation: querySelectorAll() is more flexible as it allows using multiple selectors like class names or IDs, whereas getElementsByTagName() is limited to selecting elements based on their tag name only.

(7) How do you target all <div> elements inside a <section> element using JavaScript?

A) document.getElementsByTagName("div");
B) document.querySelectorAll("section div");
C) document.querySelector("section div");
D) document.getElementsByTagName("section div");

Answer: B) document.querySelectorAll("section div");

Explanation: querySelectorAll("section div") will select all <div> elements inside a <section> element.

(8) What does the method document.getElementsByTagName("div")[0] return?

A) The first <div> element in the document.
B) A live HTMLCollection of all <div> elements.
C) A NodeList of all <div> elements.
D) The last <div> element in the document.

Answer: A) The first <div> element in the document.

Explanation: The method getElementsByTagName("div")[0] returns the first <div> element in the HTMLCollection.

(9) Which method should you use to get all <img> elements in the document?

A) document.querySelectorAll("img");
B) document.getElementsByTagName("img");
C) Both A and B
D) None of the above

Answer: C) Both A and B

Explanation: Both querySelectorAll() and getElementsByTagName() can be used to select all <img> elements in the document.

(10) What type of collection does getElementsByTagName() return?

A) An array.
B) A static NodeList.
C) A live HTMLCollection.
D) A list of strings.

Answer: C) A live HTMLCollection.

Explanation: getElementsByTagName() returns a live HTMLCollection, meaning the collection automatically updates as elements are added or removed from the DOM.

(Chap # 58 - The DOM)

(1) What does the DOM (Document Object Model) represent in a web page?

A) A server-side database
B) A set of HTML elements that can be manipulated
C) A set of CSS styles
D) The web browser's internal code

Answer: B) A set of HTML elements that can be manipulated

Explanation: The DOM represents the structure of an HTML document as a tree of objects, each representing a part of the page, such as elements, attributes, and text. It allows JavaScript to manipulate the page dynamically.

(2) Which method can be used to get an element by its ID in JavaScript?

A) getElementById()
B) getElementByName()
C) getElementsByTagName()
D) querySelector()

Answer: A) getElementById()

Explanation: getElementById() is a DOM method that allows you to select an element by its unique ID. It returns the first element with the matching ID or null if no such element is found.

(3) Which of the following DOM methods is used to select all elements with a specific class name?

A) getElementById()
B) getElementsByClassName()
C) getElementsByTagName()
D) querySelector()

Answer: B) getElementsByClassName()

Explanation: getElementsByClassName() returns a live HTMLCollection of all elements in the document with the specified class name.

(4) Which method is used to add a new node as a child to a specific element in the DOM?

A) appendChild()
B) insertBefore()
C) removeChild()
D) replaceChild()

Answer: A) appendChild()

Explanation: appendChild() adds a new child node to the end of the list of children of a specified parent node.

(5) How do you change the text content of an element using the DOM?

A) element.innerHTML = "new text";
B) element.textContent = "new text";
C) element.setAttribute("text", "new text");
D) A and B

Answer: D) A and B

Explanation: Both innerHTML and textContent can be used to change the text content of an element. innerHTML also includes HTML tags, while textContent changes only the text.

(6) Which of the following is true about the DOM?

A) It represents a static snapshot of the HTML document.
B) It allows JavaScript to interact with HTML and CSS.
C) It is only accessible through server-side languages.
D) It does not allow dynamic changes to the document.

Answer: B) It allows JavaScript to interact with HTML and CSS.

Explanation: The DOM allows JavaScript to manipulate the structure, style, and content of a document dynamically, enabling interactive web pages.

(7) How can you remove a child node from a parent node in the DOM?

A) parentNode.removeChild(childNode);
B) parentNode.deleteChild(childNode);
C) parentNode.detachChild(childNode);
D) parentNode.deleteNode(childNode);

Answer: A) parentNode.removeChild(childNode);

Explanation: The removeChild() method removes a specified child node from its parent node.

(8) What is the return type of getElementsByTagName()?

A) A static NodeList
B) A live HTMLCollection
C) A JavaScript array
D) A list of strings

Answer: B) A live HTMLCollection

Explanation: getElementsByTagName() returns a live HTMLCollection, which automatically updates when elements are added or removed from the DOM.

(9) How do you access an element’s attribute value using the DOM?

A) element.getAttribute("attributeName");
B) element.attributeName;
C) element.get("attributeName");
D) element.getValue("attributeName");

Answer: A) element.getAttribute("attributeName");

Explanation: getAttribute() retrieves the value of the specified attribute from an element.

(10) What method would you use to target all <div> elements that are children of a <section> element?

A) document.querySelector("section div");
B) document.getElementsByTagName("div");
C) document.querySelectorAll("section div");
D) Both A and C

Answer: D) Both A and C

Explanation: Both querySelector("section div") and querySelectorAll("section div") can be used to select all <div> elements that are children of a <section> element.

(Chap # 59 - The DOM parent and children)

(1) How do you access the parent element of a node in the DOM?

A) node.getParent()
B) node.parentElement
C) node.parentNode()
D) node.getParentElement()

Answer: B) node.parentElement

Explanation: The parentElement property is used to access the parent element of a node in the DOM.

(2) Which method is used to get the child nodes of an element in the DOM?

A) element.getChildNodes()
B) element.children()
C) element.childNodes
D) element.getChild()

Answer: C) element.childNodes

Explanation: The childNodes property returns a NodeList of all child nodes of a given element, including text nodes and comment nodes.

(3) How can you add a new child element to an existing parent element in the DOM?

A) parent.appendChild(newElement)
B) parent.insertChild(newElement)
C) parent.addChild(newElement)
D) parent.appendChild(newElement, true)

Answer: A) parent.appendChild(newElement)

Explanation: The appendChild() method adds a new child node to the end of the list of children of a specified parent node.

(4) How can you remove a child element from a parent element in the DOM?

A) parent.removeChild(child)
B) parent.deleteChild(child)
C) parent.detachChild(child)
D) parent.removeNode(child)

Answer: A) parent.removeChild(child)

Explanation: The removeChild() method is used to remove a specified child node from its parent node.

(5) What does the parentNode property do in the DOM?

A) It gets the next sibling of an element.
B) It gets the previous sibling of an element.
C) It gets the parent node of an element.
D) It gets the child nodes of an element.

Answer: C) It gets the parent node of an element.

Explanation: The parentNode property returns the parent node of the specified element, or null if the element has no parent.

(6) What happens if you try to access parentElement for a root element that has no parent?

A) It returns null
B) It throws an error
C) It returns an empty string
D) It returns the document element

Answer: A) It returns null

Explanation: If the element is a root element (such as <html>), the parentElement will return null since it has no parent element.

(7) What is the difference between childNodes and children in the DOM?

A) childNodes returns a live list, and children returns a static list.
B) childNodes includes all types of nodes (like text nodes), while children only includes element nodes.
C) childNodes is faster than children.
D) There is no difference between childNodes and children.

Answer: B) childNodes includes all types of nodes (like text nodes), while children only includes element nodes.

Explanation: childNodes returns all types of child nodes (including text and comment nodes), while children only returns element nodes.

(8) Which of the following methods is used to insert a node before another node in the DOM?

A) insertBefore()
B) insertAfter()
C) appendChild()
D) addChild()

Answer: A) insertBefore()

Explanation: The insertBefore() method inserts a new node before a specified existing child node of the parent element.

(9) Which of the following is true about the parentNode and parentElement properties?

A) parentNode returns a node, and parentElement returns an element.
B) Both properties return the same result.
C) parentNode only works with element nodes, and parentElement works with all nodes.
D) parentElement is not supported by modern browsers.

Answer: A) parentNode returns a node, and parentElement returns an element.

Explanation: parentNode can return a node, such as a text or comment node, whereas parentElement always returns an element node.

(10) Which of the following is used to check if a node has a parent in the DOM?

A) node.hasParent()
B) node.hasParentElement()
C) node.parentNode !== null
D) node.parentElement !== null

Answer: C) node.parentNode !== null

Explanation: To check if a node has a parent, you can verify if its parentNode is not null.

(Chap # 60 - The DOM: finding children)

(1) Which method is used to get all the child elements of a parent element by tag name?

A) parent.getElementsByTagName()
B) parent.querySelectorAll()
C) parent.children()
D) parent.getChildrenByTagName()

Answer: A) parent.getElementsByTagName()

Explanation: The getElementsByTagName() method retrieves all child elements of a parent element that match the specified tag name.

(2) What does parent.children return?

A) A NodeList of all children nodes, including text nodes.
B) A NodeList of all child element nodes.
C) An array of all child nodes.
D) A live HTMLCollection of child element nodes.

Answer: D) A live HTMLCollection of child element nodes.

Explanation: The children property returns a live HTMLCollection of child elements of the specified element, excluding text and comment nodes.

(3) How can you access the first child element of a parent element?

A) parent.firstChildElement
B) parent.firstElementChild
C) parent.firstChild()
D) parent.getFirstChild()

Answer: B) parent.firstElementChild

Explanation: The firstElementChild property returns the first child element of the parent element (ignoring text and comment nodes).

(4) How can you find all child elements of a parent element that have a specific class?

A) parent.querySelectorAll('.className')
B) parent.getElementsByClassName('.className')
C) parent.querySelectorAll('.className').children
D) parent.getElementsByClassName('.className').childNodes

Answer: A) parent.querySelectorAll('.className')

Explanation: The querySelectorAll() method allows you to select all children elements that match a specific class name.

(5) Which property would you use to find the last child element of a parent element?

A) parent.lastChildElement
B) parent.lastElementChild
C) parent.lastChild()
D) parent.getLastChild()

Answer: B) parent.lastElementChild

Explanation: The lastElementChild property returns the last child element of the parent element, excluding text and comment nodes.

(6) Which method can be used to retrieve the first child node, including text nodes?

A) parent.firstChild()
B) parent.firstElementChild
C) parent.getFirstChild()
D) parent.firstChildNode()

Answer: A) parent.firstChild()

Explanation: The firstChild property retrieves the first child node of a parent element, including text and comment nodes.

(7) What is the difference between childNodes and children in DOM traversal?

A) childNodes returns only element nodes, while children returns all types of nodes.
B) childNodes returns all types of nodes, including text and comment nodes, while children only returns element nodes.
C) childNodes returns a static list, while children returns a live list.
D) There is no difference between childNodes and children.

Answer: B) childNodes returns all types of nodes, including text and comment nodes, while children only returns element nodes.

Explanation: The childNodes property returns all child nodes, including text and comment nodes, while children only returns child element nodes.

(8) Which method can be used to retrieve a specific child element by its index in the DOM?

A) parent.getChildAt(index)
B) parent.children[index]
C) parent.getChild(index)
D) parent.childNodes(index)

Answer: B) parent.children[index]

Explanation: The children property returns an HTMLCollection, which allows direct access to child elements by their index using array-like notation.

(9) How can you check if a parent element has any child elements in the DOM?

A) parent.hasChildren()
B) parent.hasChildNodes()
C) parent.children.length > 0
D) parent.getChildElements().length > 0

Answer: B) parent.hasChildNodes()

Explanation: The hasChildNodes() method checks if the specified parent element has any child nodes.

(10) Which of the following will return the last child node of an element, including text nodes?

A) parent.lastChildElement
B) parent.lastElementChild
C) parent.lastChild
D) parent.lastNodeChild

Answer: C) parent.lastChild

Explanation: The lastChild property returns the last child node of the specified element, including text and comment nodes.

⏪ ⏩

Multiple Choice Question for Grand JS Quiz