Document Object Model (DOM)
appendChild
A method that adds a child node to the document, after the list of existing children.
insertBefore
A method that adds a child node to the document, which inserts the node given as the first argument before the node given as the second argument.
removeChild
A method that removes the given child node from the document.
replaceChild
A method that replaces a child node with another one. It takes as arguments two nodes: a new node and the node to be replaced. Example: varName.parentNode.replaceChild(new, old);
innerHTML
A property that can be used to get or change any HTML element, including <html> and <body>. Parses text as HTML.
style
A property that represents every style applied to an element. We can call document.getElementsByClassName('point')._____ to recover every _____ applied to .point.
Node.childNodes
A read-only property that returns a live collection of child nodes of the given element.
nodeType
A DOM node object property, which contains a numeric code that identifies the type of node.
nodeName
A DOM node object property, which contains the name of the node (in CAPS), if it's an element, or "#text", if it's text.
nodeValue
A DOM node object property, which contains: - the value of the node, if it's a #text node; or - null, if the node is an element.
event handler
A function that handles code in response to an event. It executes as soon as an action fires an event.
callback
A function that is passed as an argument to another function.
DOM tree
A hierarchy of DOM objects that resembles a tree. Created by the browser when it interprets a page's HTML and scripts.
NodeList
A list of notes returned by certain selectors, such as getElementsByClassName(). You can use index notation to reference a node in the list, e.g., var firstNode = NodeList[0];
event
A message that dispatches to the browser when a certain client action occurs.
node.nodeValue
A string containing the value of the current node, if any.
uniform resource identifier (URI)
A string of characters used to identify a resource, which enables interaction with representations of the resource over a network, typically the World Wide Web, using specific protocols.
property
A value that you can get or set (like changing the content of an HTML element).
document.appendChild(element)
Add an HTML element.
document.getElementById(id).onclick = function(){code}
Adding event handler code to an onclick event.
getBoundingClientRect()
returns an object with four properties, top, left, right, and bottom. Each property measures the distance (in pixels) from the outside of a selected element to the end of the viewport.
leaf node
A child node that terminates a branch.
data attribute
Allows us to store information in an attribute on an HTML element.
setAttribute
Allows you to set the attribute of a node. Syntax: target.___________("<attribute name>", "<value>");
target
Also known as the "originating element," it's the deepest element which triggers an event.
method
An action you can do (like add or deleting an HTML element).
document.ELEMENT_NODE
An element node such as <p> or <div>.
event listener
An object that receives a notification of the event when the event of a specified type (e.g. scroll) occurs. Parameters: type - Represents the type of event for which the DOM should be listening. listener - Passed in as an event handler and contains the code that executes when the event fires. useCapture - Specifies whether the user wishes to initiate capture.
element.attribute = new value
Change the attribute value of an HTML element.
element.innerHTML = new html content
Change the inner HTML of an element.
document.createElement(element)
Create an HTML element.
document.createTextNode
Creates a text node with the specified text. Examples: - var text = document.createTextNode(image.alt); - var text = document.createTextNode("Hello World!);
window.alert()
Displays an alert dialog with the optional specified content and an OK button.
document.getElementById(id)
Find an element by element id.
window.innerHeight
Height (in pixels) of the browser window viewport.
event dispatcher
Keeps track of which events are attached to DOM elements and dispatching the events at the appropriate time.
window
Object that represents a window containing a DOM document.
DOM scripting
The manipulation of an HTML page after it's loaded into the browser.
document node
The root node of the tree of document objects created by a browser (DOM tree).
root node
The top of the DOM tree structure. Contains the DTD and root element.
dispatching
To create an event with attributes and methods appropriate to its type and context, and propagate it through the DOM tree in the specified manner. Interchangeable with the term fire, e.g., fire a click event..
event delegation
Used to reduce the number of event listeners, it allows us to listen for an event on a parent element but target the behavior on one of its children.
document.write(text)
Write into the HTML output stream.
document.embeds
Returns all <embed> elements. DOM = 3
document.forms
Returns all <form> elements. DOM = 1
document.images
Returns all <img> elements. DOM 1
document.scripts
Returns all <script> elements. DOM = 3
document.strictErrorChecking
Returns if error checking is enforced. DOM = 3
document.readyState
Returns the (loading) status of the document. DOM 3
document.body
Returns the <body> element. DOM = 1
document.head
Returns the <head> element. DOM = 3
document.documentElement
Returns the <html> element. DOM = 3
document.title
Returns the <title> element. DOM = 1
element.setAttribute(attribute, value)
Change the attribute value of an HTML element.
element.style.property = new style
Change the style of an HTML element.
hasAttribute
Checks whether a node has an attribute, supplied in parens and quotes, e.g., target.___________("<class>"). Returns true or false.
DOM
Created by the browser when a page is loaded and constructed as a tree of objects (the DOM tree), or nodes, this is an object-oriented representation of a Web page that is browser- and platform independent. It makes everything in a Web page accessible with a common set of properties and methods, so JavaScript (and other programs) can get, change, add, or delete HTML elements.
event bubbling
Directs an event to its intended target, it works like this: - A button is clicked and the event is directed to the button - If an event handler is set for that object, the event is triggered - If no event handler is set for that object, the event bubbles up (like a bubble in water) to the object's parent The event bubbles up from parent to parent until it is handled, or until it reaches the document object. After an event triggers on the deepest possible element, it then triggers on parents in nesting order.
document.getElementsByClassName(name)
Find elements by class name
document.getElementsByTagName(name)
Find elements by tag name.
selectors
Methods that exist on the document object. Because the DOM interprets them as objects, we can use them to perform actions on elements in a web page.
document.domConfig
Obsolete. Returns the DOM configuration. DOM = 3
nextSibling
Points to adjacent node, which is the node with the same parent that appears immediately after the node itself. For a last child, nextSibling will be null.
previousSibling
Points to adjacent node, which is the node with the same parent that appears immediately before the node itself. For a first child, previousSibling will be null.
firstChild
Points to first child element or contains value, "null," for nodes without children.
lastChild
Points to last child element or contains value, "null," for nodes without children.
element, attribute, and text nodes
Primary nodes for HTML elements, HTML attributes, and text, which stem from the document node.
document.removeChild(element)
Remove an HTML element.
document.replaceChild(element)
Replace an HTML element.
window object
Represents a window containing a DOM document.
document.anchors
Returns all <a> elements that have a name attribute. DOM = 1
document.applets
Returns all <applet> elements (Deprecated in HTML5). DOM= 1
document.links
Returns all <area> and <a> elements that have a href attribute. DOM = 1
document.implementation
Returns the DOM implementation. DOM = 3
document.documentURI
Returns the URI of the document. DOM = 3
document.referrer
Returns the URI of the referrer (the linking document). DOM 1
document.baseURI
Returns the absolute base URI of the document. DOM = 3
document.URL
Returns the complete URL of the document
document.lastModified
Returns the date and time the document was updated. DOM = 3
document.cookie
Returns the document's cookie. DOM = 1
document.doctype
Returns the document's doctype. DOM = 3
document.inputEncoding
Returns the document's encoding (character set). DOM = 3
document.domain
Returns the domain name of the document server. DOM = 1
document.documentMode
Returns the mode used by the browser. DOM = 3
innerText
Returns the text of certain elements. "Aware" of CSS, it will not return hidden elements. Permanently destroys descendant text nodes.
getAttribute
Returns the value of a node's attribute. Syntax: target.___________("<attribute name>");
textContent
Sets or returns the text content--including CDATA--of the specified node, and all its descendants. Removes and replaces any child nodes with a single text node containing a concatenated string. Can have better performance than innerHTML, since it doesn't parse HTML. Using it can also help prevent cross-site scripting (XSS) attacks.
event capture
The event handler of a parent element fires first, its children consecutively.
object.onload
This event occurs when an object has been loaded. It's most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). It can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. It can also be used to deal with cookies
