DOM Flashcards
What does querySelector do?
It returns the first element that matches a given CSS selector.
How does querySelectorAll differ from querySelector?
querySelectorAll returns all matching elements as a NodeList, while querySelector returns only the first match.
What type of object does querySelectorAll return?
A NodeList, which can be iterated using forEach.
How do you select an element with id ‘header’?
document.getElementById('header')
What is the difference between getElementsByClassName and querySelectorAll?
getElementsByClassName returns a live HTMLCollection, while querySelectorAll returns a static NodeList.
How do you select the first element with class ‘btn’?
document.querySelector('.btn')
How do you select all paragraphs using querySelectorAll?
document.querySelectorAll('p')
How do you access the second element in a getElementsByClassName collection?
document.getElementsByClassName('className')[1]
What is returned when getElementById doesn’t find a matching element?
It returns null.
Can you modify elements inside getElementsByClassName directly?
Yes, you can access elements using index and modify them like an array.
“How do you remove an element directly from the DOM?”
“Use element.remove() method.”
“What happens when you use removeChild()?”
“It removes a specified child element from its parent.”
“Write a code snippet to remove an element with id ‘box’.”
“document.getElementById('box').remove();”
“How do you remove all child elements of a parent element?”
“Set parent.innerHTML = "";”
“What does replaceChild() do?”
“It replaces an existing child element with a new one.”
“Write a code snippet to replace a div with a paragraph.”
“let newPara = document.createElement('p'); newPara.textContent = 'New Content'; document.getElementById('container').replaceChild(newPara, document.getElementById('oldDiv'));”
“Can you use remove() on multiple elements at once?”
“No, remove() works on a single element. Use loops to remove multiple elements.”
“What happens if removeChild() is called on an element not present in the parent?”
“It throws a NotFoundError.”
“How do you create a new element in JavaScript?”
“Use document.createElement('tagName').”
“Write a code snippet to create a new <div> element.”
“let newDiv = document.createElement('div');”
“How do you add a newly created element to the DOM?”
“Use parent.appendChild(newElement).”
“Write a code snippet to append a new <p> inside an element with id ‘container’.”
“let p = document.createElement('p'); p.textContent = 'Hello!'; document.getElementById('container').appendChild(p);”
“What does insertBefore() do?”
“It inserts a new element before a specified child of a parent element.”
“Write a code snippet to insert a new <span> before an existing <div>.”
“let span = document.createElement('span'); span.textContent = 'New!'; parent.insertBefore(span, existingDiv);”
“What is the downside of using innerHTML for inserting elements?”
“It can introduce security risks (XSS) and overwrite existing content.”
“How do you replace an element using JavaScript?”
“Use parent.replaceChild(newElement, oldElement).”
