JavaScript DOM Manipulation Quiz for Grade 11

1. Which method selects a single HTML element by its ID?

Document.querySelector()

Document.getElementById()

Document.getElementByClass()

Document.selectElement()

document.getElementById() is a JavaScript method specifically designed to select a single HTML element using its unique ID attribute. It returns the element that matches the provided ID, making it a straightforward and efficient way to manipulate or access that specific element in the DOM.

Explanation

document.getElementById() is a JavaScript method specifically designed to select a single HTML element using its unique ID attribute. It returns the element that matches the provided ID, making it a straightforward and efficient way to manipulate or access that specific element in the DOM.

2. What does the textContent property do?

Gets the HTML inside an element

Gets or sets the plain text inside an element

Removes all text from an element

Adds HTML tags to text

The textContent property is used to retrieve or modify the plain text within an HTML element, excluding any HTML tags. This means it can either return the text present or allow you to set new text, effectively managing the textual content without affecting the underlying HTML structure.

Explanation

The textContent property is used to retrieve or modify the plain text within an HTML element, excluding any HTML tags. This means it can either return the text present or allow you to set new text, effectively managing the textual content without affecting the underlying HTML structure.

3. How do you add a CSS class to an element using JavaScript?

Element.addClass('class-name')

Element.classList.add('class-name')

Element.class = 'class-name'

Element.addStyle('class-name')

To add a CSS class to an element in JavaScript, you use the `classList` property, which provides methods to manipulate the classes of an element. The `add` method specifically allows you to add a new class without affecting existing ones, making it the most effective and recommended approach.

Explanation

To add a CSS class to an element in JavaScript, you use the `classList` property, which provides methods to manipulate the classes of an element. The `add` method specifically allows you to add a new class without affecting existing ones, making it the most effective and recommended approach.

4. Which event fires when a user clicks on an element?

Onhover

Onclick

Onchange

Onload

The `onclick` event is triggered when a user clicks on an element, such as a button or link. This event allows developers to execute specific JavaScript functions or actions in response to user interactions, making it essential for creating interactive web applications. Other options like `onhover` and `onchange` serve different purposes.

Explanation

The `onclick` event is triggered when a user clicks on an element, such as a button or link. This event allows developers to execute specific JavaScript functions or actions in response to user interactions, making it essential for creating interactive web applications. Other options like `onhover` and `onchange` serve different purposes.

5. What does document.createElement() do?

Selects an existing element

Creates a new HTML element in memory

Removes an element from the DOM

Changes an element's tag name

document.createElement() is a JavaScript method used to create a new HTML element in memory. This method allows developers to dynamically generate elements, which can then be modified and added to the DOM, enabling interactive and dynamic web pages without needing to reload or refresh.

Explanation

document.createElement() is a JavaScript method used to create a new HTML element in memory. This method allows developers to dynamically generate elements, which can then be modified and added to the DOM, enabling interactive and dynamic web pages without needing to reload or refresh.

6. How do you add an event listener to an element?

Element.on('click', function)

Element.addEventListener('click', function)

Element.attachEvent('click', function)

Element.click = function

To add an event listener to an element, the `addEventListener` method is used, which allows you to specify the event type (like 'click') and a callback function. This method provides better control over event handling, including the ability to add multiple listeners for the same event type without overwriting existing ones.

Explanation

To add an event listener to an element, the `addEventListener` method is used, which allows you to specify the event type (like 'click') and a callback function. This method provides better control over event handling, including the ability to add multiple listeners for the same event type without overwriting existing ones.

7. The innerHTML property allows you to get or set HTML content inside an element.

True

False

The innerHTML property is a versatile JavaScript feature that enables developers to retrieve or modify the HTML content within an element. By using innerHTML, you can dynamically change the structure and content of web pages, making it a powerful tool for creating interactive and responsive user interfaces.

Explanation

The innerHTML property is a versatile JavaScript feature that enables developers to retrieve or modify the HTML content within an element. By using innerHTML, you can dynamically change the structure and content of web pages, making it a powerful tool for creating interactive and responsive user interfaces.

8. Which method removes an element from the DOM?

Element.delete()

Element.remove()

Element.erase()

Element.destroy()

The `element.remove()` method is specifically designed to remove an element from the Document Object Model (DOM). It effectively detaches the specified element from its parent, ensuring that it no longer appears in the rendered web page. Other options listed do not exist in standard JavaScript for DOM manipulation.

Explanation

The `element.remove()` method is specifically designed to remove an element from the Document Object Model (DOM). It effectively detaches the specified element from its parent, ensuring that it no longer appears in the rendered web page. Other options listed do not exist in standard JavaScript for DOM manipulation.

9. What does document.querySelectorAll() return?

A single element

A NodeList of all matching elements

An array of elements

The first matching element

document.querySelectorAll() returns a NodeList, which is a collection of all elements in the document that match the specified CSS selectors. Unlike an array, a NodeList is a list of nodes that can be iterated over, allowing access to multiple elements that meet the criteria defined in the query.

Explanation

document.querySelectorAll() returns a NodeList, which is a collection of all elements in the document that match the specified CSS selectors. Unlike an array, a NodeList is a list of nodes that can be iterated over, allowing access to multiple elements that meet the criteria defined in the query.

10. How do you change the style of an element directly?

Element.style.color = 'red'

Element.css('color', 'red')

Element.setStyle('color', 'red')

Element.color = 'red'

To change the style of an element directly in JavaScript, you access the element's `style` property, which allows you to modify its CSS properties. By assigning a value to `element.style.color`, you can directly set the text color of that element to red. This method is straightforward and effective for inline styling.

Explanation

To change the style of an element directly in JavaScript, you access the element's `style` property, which allows you to modify its CSS properties. By assigning a value to `element.style.color`, you can directly set the text color of that element to red. This method is straightforward and effective for inline styling.

11. Which method appends a child element to a parent?

Parent.add(child)

Parent.appendChild(child)

Parent.addChild(child)

Parent.push(child)

The method `parent.appendChild(child)` is used in the Document Object Model (DOM) to add a child element to a specified parent element. This function ensures that the child is added as the last child of the parent, modifying the structure of the HTML document accordingly.

Explanation

The method `parent.appendChild(child)` is used in the Document Object Model (DOM) to add a child element to a specified parent element. This function ensures that the child is added as the last child of the parent, modifying the structure of the HTML document accordingly.

12. The getAttribute() method retrieves the value of a specific HTML attribute.

True

False

The getAttribute() method is a standard JavaScript function used to access the value of a specified attribute from an HTML element. By passing the attribute name as an argument, it returns the corresponding value, allowing developers to manipulate or retrieve data from the DOM effectively.

Explanation

The getAttribute() method is a standard JavaScript function used to access the value of a specified attribute from an HTML element. By passing the attribute name as an argument, it returns the corresponding value, allowing developers to manipulate or retrieve data from the DOM effectively.