Document Object Model (DOM)

Ace your homework & exams now with Quizwiz!

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


Related study sets

Texas 30-Hour Promulgated Contract Forms with Flex Units

View Set

Argument Technique in Martin Luther King, Jr.'s "I Have a Dream" Speech Quiz Complete

View Set