DOM Methods Flashcards
(13 cards)
getElementById
Returns the element that has the ID attribute with the specified value
getElementsByClassName
Returns an array-like object (live HTMLCollection) of all child elements which have all of the given class name(s)
getElementsByTagName
Returns a live HTMLCollection of elements with the given tag name that are descendants of the specified element (could be document or specific element)
querySelector
Returns the first element within the document that matches the specified selector or group of selectors. If not found, returns null.
querySelectorAll(“”)
Returns a static NodeList representing a list of the document’s elements that match the specified group of selectors
If you access elements using ____, the returned list is live and will update as more elements are added to the node.
getElementsByTagName, getElementsByClassName
If you access elements using ____, the returned list is static and will NOT update if more elements are added to the node.
querySelector
:scope
Represents elements that are a reference point for selectors to match against
querySelectorAll(“:scope .outer .inner”)
“<div class=”“outer””>
<div class=”“select””>
<div class=”“inner””></div>
</div>
</div>”
By default, querySelectorAll() only verifies that the last element in the selector is within the search scope.
console.dir()
Displays an interactive list of properties of the specified JavaScript object
innerText
Gets or sets the XML or HTML markup contained within the element
Ex.
const name = “<img></img>”;
element.innerHTML = name;
// shows the alert
Providing an invalid <img></img> value will allow scripts in user-supplied data to run
insertAdjacentHTML
Inserts the HTML into the document rather than replacing the contents of an element
