Using JavaScript
Studied by 0 people
Call Kai
Learn
Practice Test
Spaced Repetition
Match
Flashcards
Knowt Play1/42
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
43 Terms
platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.
DOM
In the DOM, each element within the HTML document is called
node
represents a collection of nodes
nodelist
is the root JavaScript object representing the entire HTML document
DOM document object
A NodeList of child nodes for this node
childNodes
First child node of this node
firstChild
Last child of this node
lastChild
Next sibling node for this node
nextSibling
Name of the node
nodeName
Type of the node
nodeType
Value of the node
nodeValue
Parent node for this node
parentNode
Previous sibling node for this node
previousSibling
Represents the text content (stripped of any tags) of the node
textContent
Returns the single element node whose id attribute matches the passed id.
getElementById("id")
Returns a NodeList of elements whose class name matches the passed name
getElementsByClassName("name")
Returns a NodeList of elements whose tag name matches the passed name.
getElementsByTagName("name")
Returns the first element node that matches the passed CSS selector.
querySelector("selector")
Returns a NodeList of elements that match the passed CSS selector.
querySelectorAll("selector")
A read-only list of CSS classes assigned to this element. This list has a variety of helper methods for manipulating this list.
classList
The current value for the class attribute of this HTML element.
className
The current value for the id of this element.
id
Represents all the content (text and tags) of the element.
innerHTML
The style attribute of an element. This returns a CSSStyleDeclaration object that contains sub-properties that correspond to the various CSS properties.
style
The tag name for the element.
tagName
Adds a new child node to the end of the current node.
appendChild
Creates a new attribute node.
createAttribute
Creates an HTML element node
createElement
Creates a text node.
createTextNode
Inserts a new child node at one of four positions relative to the current node.
insertAdjacentElement
Inserts a new text node at one of four positions relative to the current node.
insertAdjacentText
Inserts a new child node before a reference node in the current node.
insertBefore
Removes a child from the current node.
removeChild
Replaces a child node with a different child.
replaceChild
Fires when the entire page is loaded.
window.load
This includes images and stylesheets, so on a slow connection or a page with a lot of images, the load event can take a long time to fire.
window.load
Fires when the HTML document has been completely downloaded and parsed.
document.DOMContentLoaded
is when an event fires on an element that has ancestor elements, the event propagates to those ancestors.
Event Propagation
the browser checks the outermost ancestor (the <html> element) to see if that element has an event handler registered for the triggered event, and if so, it is executed.
event capturing phase
this continues until it reaches the element that triggered the event
event target
the opposite occurs. The browser checks if the element that triggered the event has an event handler registered for that event, and
if so, it is executed. It then proceeds outwards until it reaches the outermost ancestor
event bubbling phase
is a technique commonly used to avoid assigning numerous duplicate event listeners to a list of child events.
Event Delegation
provides read/write access to custom data attributes (data-*) set on the element.
dataset property