DOM Manipulation quiz: Test your knowledge of HTML attribute changes

📚 Quick Study Guide

• 🔑 Accessing Attributes: Use `element.getAttribute('attributeName')` to retrieve the value of an attribute.
• ✏️ Setting Attributes: Use `element.setAttribute('attributeName', 'newValue')` to modify an attribute.
• ❌ Removing Attributes: Use `element.removeAttribute('attributeName')` to delete an attribute from an element.
• ✅ Checking Attribute Existence: Use `element.hasAttribute('attributeName')` to determine if an element has a specific attribute.
• ✨ `className` Property: Use `element.className` to get or set the entire class attribute as a string.
• ➕ `classList` Property: Use `element.classList.add('className')`, `element.classList.remove('className')`, `element.classList.toggle('className')` for more convenient class manipulation.
• 🔗 Attribute Selectors (CSS): Utilize attribute selectors like `[attribute]`, `[attribute=value]`, `[attribute~=value]`, `[attribute|=value]`, `[attribute^=value]`, `[attribute$=value]`, and `[attribute*=value]` in CSS for styling based on attribute presence and values.

Practice Quiz

1. Which method is used to set the value of an HTML attribute using DOM manipulation?
   1. setAttribute()
   2. getAttribute()
   3. modifyAttribute()
   4. changeAttribute()
2. What is the correct way to retrieve the 'src' attribute of an image element with the ID 'myImage'?
   1. document.getElementById('myImage').src;
   2. document.getElementById('myImage').getAttribute('src');
   3. Both A and B
   4. Neither A nor B
3. Which method removes an attribute from an HTML element?
   1. deleteAttribute()
   2. removeAttribute()
   3. clearAttribute()
   4. voidAttribute()
4. How do you check if an element with the ID 'myDiv' has the attribute 'data-value'?
   1. document.getElementById('myDiv').hasAttribute('data-value');
   2. document.getElementById('myDiv').checkAttribute('data-value');
   3. document.getElementById('myDiv').attributeExists('data-value');
   4. document.getElementById('myDiv').containsAttribute('data-value');
5. What is the purpose of the `classList` property in DOM manipulation?
   1. To directly modify inline styles.
   2. To easily add, remove, and toggle CSS classes.
   3. To retrieve all attributes of an element.
   4. To create new HTML elements.
6. Which of the following is the correct way to add the class 'highlight' to an element with the ID 'myElement' using `classList`?
   1. document.getElementById('myElement').classList = 'highlight';
   2. document.getElementById('myElement').classList.add('highlight');
   3. document.getElementById('myElement').addClass('highlight');
   4. document.getElementById('myElement').className += ' highlight';
7. What will be the output of the following code? javascript const element = document.createElement('div'); element.setAttribute('data-count', '10'); element.setAttribute('data-count', '20'); console.log(element.getAttribute('data-count'));
   1. 10
   2. 20
   3. null
   4. undefined