W3C DOM Reference - Wrox Press Beginning JavaScript 5th (2015)

Wrox Press Beginning JavaScript 5th (2015)

C. W3C DOM Reference

Because JavaScript is primarily used to program the browser and add behavior to web pages, it’s only natural to include a reference to the W3C DOM.

The following pages list the objects made available by the W3C DOM.

DOM CORE OBJECTS

This section describes and lists objects defined by the DOM standards—starting with the lowest level of DOM objects. All objects are in alphabetical order.

Low-Level DOM Objects

The DOM specification describes the Node, NodeList, and NamedNodeMap objects. These are the lowest-level objects in the DOM, and are the primary building blocks of higher-level objects.

Node

Defined in DOM Level 1, the Node object is the primary data type for the entire DOM. All objects in the DOM inherit from Node. There are 12 different types of Node objects; each type has an associated integer value. The following tables list the Node object’s type values, properties, and methods.

Node Types

TYPE NAME

INTEGER VALUE

INTRODUCED

ASSOCIATED DATA TYPE

ELEMENT_NODE

1

Level 1

Element

ATTRIBUTE_NODE

2

Level 1

Attr

TEXT_NODE

3

Level 1

Text

CDATA_SECTION_NODE

4

Level 1

CDATASection

ENTITY_REFERENCE_NODE

5

Level 1

EntityReference

ENTITY_NODE

6

Level 1

Entity

PROCESSING_INSTRUCTION_NODE

7

Level 1

ProcessingInstruction

COMMENT_NODE

8

Level 1

Comment

DOCUMENT_NODE

9

Level 1

Document

DOCUMENT_TYPE_NODE

10

Level 1

DocumentType

DOCUMENT_FRAGMENT_NODE

11

Level 1

DocumentFragment

NOTATION_NODE

12

Level 1

Notation

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

attributes

A NamedNodeMap containing the attributes of this node if it is an Element, or null otherwise.

Level 1

childNodes

A NodeList containing all children of this node.

Level 1

firstChild

Gets the first child of this node. Returns null if no child exists.

Level 1

lastChild

Gets the last child of this node. Returns null if no child exists.

Level 1

localName

Returns the local part of the node’s qualified name (the part after the colon of the qualified name when namespaces are used). Used primarily in XML DOMs.

Level 2

namespaceURI

The namespace URI of the node, or null if not specified.

Level 2

nextSibling

Gets the node immediately following this node. Returns null if no following sibling exists.

Level 1

nodeName

Gets the name of this node.

Level 1

nodeType

An integer representing the type of this node. See previous table.

Level 1

nodeValue

Gets the value of this node, depending on the type.

Level 1

ownerDocument

Gets the Document object this node is contained in. If this node is a Document node, it returns null.

Level 1

parentNode

Gets the parent node of this node. Returns null for nodes that are currently not in the DOM tree.

Level 1

prefix

Returns the namespace prefix of this node, or null if not specified.

Level 2

previousSibling

Gets the node immediately before this node. Returns null if no previous sibling.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

appendChild(newChild)

Adds the newChild to the end of the list of children.

Level 1

cloneNode(deep)

Returns a duplicate of the node. The returned node has no parent. If deep is true, this clones all nodes contained within the node.

Level 1

hasAttributes()

Returns a boolean value based on if the node has any attributes (if the node is an element).

Level 2

hasChildNodes()

Returns a boolean value based on whether the node has any child nodes.

Level 1

insertBefore(newChild, refChild)

Inserts the newChild node before the existing child referenced by refChild. If refChild is null, newChild is added at the end of the list of children.

Level 1

removeChild(oldChild)

Removes the specified child node and returns it.

Level 1

replaceChild(newChild, oldChild)

Replaces oldChild with newChild and returns oldChild.

Level 1

NodeList

The NodeList object is an ordered collection of nodes. The items contained in the NodeList are accessible via an index starting from 0.

A NodeList is a live snapshot of nodes. Any changes made to the nodes within the DOM are immediately reflected in every reference of the NodeList.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

length

The number of nodes in the list.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

item(index)

Returns the item at the specified index. Returns null if the index is greater than or equal to the list’s length.

Level 1

NamedNodeMap

Objects referred to as NamedNodeMaps represent collections of nodes that can be accessed by name. This object does not inherit from NodeList. An element’s attribute list is an example of a NamedNodeMap.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

length

The number of nodes in the map.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

getNamedItem(name)

Retrieves a node by the specified name.

Level 1

removeNamedItem(name)

Removes an item by the specified name.

Level 1

setNamedItem(node)

Adds a node to the list by using its nodeName property as its key.

Level 1

High-Level DOM Objects

These objects inherit Node and are the basis for even higher-level DOM objects as specified by the HTML DOM. These objects mirror the different node types.

The following objects are listed in alphabetical order. The CDATASection, Comment, DocumentType, Entity, EntityReference, Notation, and ProcessingInstruction objects are purposefully omitted from this section.

Attr

The Attr object represents an Element object’s attribute. Even though Attr objects inherit from Node, they are not considered children of the element they describe, and thus are not part of the DOM tree. The Node properties of parentNode, previousSibling, and nextSiblingreturn null for Attr objects.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

ownerElement

Returns the Element object the attribute is attached to.

Level 2

name

Returns the name of the attribute.

Level 1

value

Returns the value of the attribute.

Level 1

Document

The Document object represents the entire HTML or XML document. It is the root of the document tree. The Document is the container for all nodes within the document, and each Node object’s ownerDocument property points to the Document.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

docType

The DocType object associated with this document. Returns null for HTML and XML documents without a document type declaration.

Level 1

documentElement

Returns the root element of the document. For HTML documents, the documentElement is the <html/> element.

Level 1

implementation

The DOMImplementation object associated with the Document.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

createAttribute(name)

Returns a new Attr object with the specified name.

Level 1

createAttributeNS(namespaceURI, qualifiedName)

Returns an attribute with the given qualified name and namespace URI. Not for HTML DOMs.

Level 2

createComment(data)

Returns a new Comment object with the specified data.

Level 1

createCDATASection(data)

Returns a new CDATASection object whose value is the specified data.

Level 1

createDocumentFragment()

Returns an empty DocumentFragment object.

Level 1

createElement(tagName)

Returns a new Element object with the specified tag name.

Level 1

createElementNS(namespaceURI, qualifiedName)

Returns an element of the specified qualified name and namespace URI. Not for HTML DOMs.

Level 2

createTextNode(text)

Returns a new Text object containing the specified text.

Level 1

getElementById(elementId)

Returns the Element with the specified ID value. Returns null if the element does not exist.

Level 2

getElementsByTagName(tagName)

Returns a NodeList of all Element objects with the specified tag name in the order in which they appear in the DOM tree.

Level 1

getElementsByTagNameNS(namespaceURI, localName)

Returns a NodeList of all elements with the specified local name and namespace URI. Elements returned are in the order they appear in the DOM.

Level 2

importNode(importedNode, deep)

Imports a node from another document. The source node is not altered or removed from its document. A copy of the source is created. If deep is true, all child nodes of the imported node are imported. Iffalse, only the node is imported.

Level 2

DocumentFragment

The DocumentFragment object is a lightweight Document object. Its primary purpose is efficiency. Making many changes to the DOM tree, such as appending several nodes individually, is an expensive process. It is possible to append Node objects to a DocumentFragmentobject, which allows you to easily and efficiently insert all nodes contained within the DocumentFragment into the DOM tree.

The following code shows the use of a DocumentFragment:

var documentFragment = document.createDocumentFragment();

for (var i = 0; i < 1000; i++) {

var element = document.createElement(“div”);

var text = document.createTextNode(“Here is test for div #” + i);

element.setAttribute(“id”, i);

documentFragment.appendChild(element);

}

document.body.appendChild(documentFragment);

Without the DocumentFragment object, this code would update the DOM tree 1,000 times, thus degrading performance. With the DocumentFragment object, the DOM tree is updated only once.

The DocumentFragment object inherits the Node object, and as such has Node’s properties and methods. It does not have any other properties or methods.

Element

Elements are the majority of objects, other than text, that you will encounter in the DOM.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

tagName

Returns the name of the element. The same as Node.nodeName for this node type.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

getAttribute(name)

Retrieves the attribute’s value by the specified name.

Level 1

getAttributeNS(namespaceURI, localName)

Returns the Attr object by local name and namespace URI. Not for HTML DOMs.

Level 2

getAttributeNode(name)

Returns the Attr object associated with the specified name. Returns null if no attribute by that name exists.

Level 1

getElementsByTagName(tagName)

Returns a NodeList of all descendant elements with the specified tagName in the order in which they appear in the tree.

Level 1

getElementsByTagNameNS(namespaceURI, localName)

Returns a NodeList of all the descendant Element objects with the specified local name and namespace URI. Not for HTML DOMs.

Level 2

hasAttribute(name)

Returns a boolean value based on whether or not the element has an attribute with the specified name.

Level 2

hasAttributeNS(namespaceURI, localName)

Returns a boolean value based on whether the Element has an attribute with the given local name and namespace URI. Not for HTML DOMs.

Level 2

querySelector(selector)

Retrieves the first child element that matches the specified selector.

Level 3

querySelectorAll(selector)

Retrieves all child elements that match the specified selector.

Level 3

removeAttribute(name)

Removes the attribute with the specified name.

Level 1

removeAttributeNS(namespaceURI, localName)

Removes an attribute specified by the local name and namespace URI. Not for HTML DOMs.

Level 2

removeAttributeNode(oldAttr)

Removes and returns the specified attribute.

Level 1

setAttribute(name, value)

Creates and adds a new attribute, or changes the value of an existing attribute. The value is a simple string.

Level 1

setAttributeNS(namespaceURI, qualifiedName, value)

Creates and adds a new attribute with the specified namespace URI, qualified name, and value.

Level 2

setAttributeNode(newAttr)

Adds the specified attribute to the element. Replaces the existing attribute with the same name if it exists.

Level 1

setAttributeNodeNS(newAttr)

Adds the specified attribute to the element.

Level 2

Text

The Text object represents text content of an Element or Attr object.

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

splitText(indexOffset)

Breaks the Text node into two nodes at the specified offset. The new nodes stay in the DOM tree as siblings.

Level 1

HTML DOM OBJECTS

In order to adequately interface with the DOM, the W3C extends the DOM Level 1 and 2 specifications to describe objects, properties, and methods, specific to HTML documents.

Most of the objects you’ll interface with as a front-end developer are contained in this section.

Miscellaneous Objects: The HTML Collection

The HTMLCollection object is a list of nodes, much like NodeList. It does not inherit from NodeList, but HTMLCollections are considered live, like NodeLists, and are automatically updated when changes are made to the document.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

length

Returns the number of elements in the collection.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

item(index)

Returns the element at the specified index. Returns null if index is larger than the collection’s length.

Level 1

namedItem(name)

Returns the element using a name. It first searches for an element with a matching id attribute value. If none are found, it searches for elements with a matching name attribute value.

Level 1

HTML Document Objects: The HTML Document

The HTMLDocument object is the root of HTML documents and contains the entire content.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

anchors

Returns an HTMLCollection of all <a/> elements in the document that have a value assigned to their name attribute.

Level 1

applets

Returns an HTMLCollection of all <applet/> elements and <object/> elements that include applets in the document.

Level 1

body

Returns the element that contains the document’s content. Returns the <body/> element, or the outermost <frameset/> element depending on the document.

Level 1

cookie

Returns the cookies associated with the document. Returns an empty string if none.

Level 1

domain

Returns the domain name of the server that served the document. Returns null if the domain name cannot be identified.

Level 1

forms

Returns an HTMLCollection of all <form/> elements in the document.

Level 1

images

Returns an HTMLCollection object containing all <img/> elements in the document.

Level 1

links

Returns an HTMLCollection of all <area/> and <a/> elements (with an href value) in the document.

Level 1

referrer

Returns the URL of the page that linked to the page. Returns an empty string if the user navigated directly to the page.

Level 1

title

The title of the document as specified by the <title/> element in the document’s <head/> element.

Level 1

URL

The complete URL of the document.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

close()

Closes a document.

Level 1

getElementById(elementId)

Returns the element with the given elementId or null if no element could be found. Removed in DOM Level 2 and added to the Document object.

Level 1

getElementsByName(name)

Returns an HTMLCollection of elements with the specified name attribute value.

Level 1

open()

Opens a document for writing.

Level 1

write()

Writes a string of text to the document.

Level 1

writeln()

Writes a string of text to the document followed by a newline.

Level 1

HTML Element Objects

HTML element attributes are exposed as properties of the various HTML element objects. Their data type is determined by the attribute’s type in the HTML 4.0 specification.

Other than HTMLElement, all HTML element objects are described here in alphabetical order. The following pages do not contain a complete list of HTML element object types. Instead, only the following element object types are listed:

· HTMLAnchorElement

· HTMLBodyElement

· HTMLButtonElement

· HTMLDivElement

· HTMLFormElement

· HTMLFrameElement

· HTMLFrameSetElement

· HTMLIFrameElement

· HTMLImageElement

· HTMLInputElement

· HTMLOptionElement

· HTMLParagraphElement

· HTMLSelectElement

· HTMLTableCellElement

· HTMLTableElement

· HTMLTableRowElement

· HTMLTableSectionElement

· HTMLTextAreaElement

HTMLElement

HTMLElement is the base object for all HTML elements, much like how Node is the base object for all DOM nodes. Therefore, all HTML elements have the following properties.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

className

Gets or sets the value of the element’s class attribute.

Level 1

id

Gets or sets the value of the element’s id attribute.

Level 1

HTMLAnchorElement

Represents the HTML <a/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

accessKey

Gets or sets the value of the accessKey attribute.

Level 1

href

Gets or sets the value of the href attribute.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

target

Gets or set the value of the target attribute.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

blur()

Removes the keyboard focus from the element.

Level 1

focus()

Gives keyboard focus to the element.

Level 1

HTMLBodyElement

Represents the <body/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

aLink

Deprecated. Gets or sets the value of the alink attribute.

Level 1

background

Deprecated. Gets or sets the value of the background attribute.

Level 1

bgColor

Deprecated. Gets or sets the value of the bgColor attribute.

Level 1

link

Deprecated. Gets or sets the value of the link attribute.

Level 1

text

Deprecated. Gets or sets the value of the text attribute.

Level 1

vLink

Deprecated. Gets or sets the value of the vlink attribute.

Level 1

HTMLButtonElement

Represents <button/> elements.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

accessKey

Gets or sets the value of the accessKey attribute.

Level 1

disabled

Gets or sets the value of the disabled attribute.

Level 1

form

Gets the HTMLFormElement object containing the button. Returns null if the button is not inside a form.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

type

Gets the value of the type attribute.

Level 1

value

Gets or sets the value of the value attribute.

Level 1

HTMLDivElement

Represents the <div/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

HTMLFormElement

Represents the <form/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

action

Gets or sets the value of the action attribute.

Level 1

elements

Returns an HTMLCollection object containing all form control elements in the form.

Level 1

enctype

Gets or sets the value of the enctype attribute.

Level 1

length

Returns the number of form controls within the form.

Level 1

method

Gets or sets the value of the method attribute.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

target

Gets or sets the value of the target attribute.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

reset()

Resets all form control elements contained within the form to their default values.

Level 1

submit()

Submits the form. Does not fire the submit event.

Level 1

HTMLFrameElement

Represents the <frame/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

contentDocument

Gets the Document object for the frame. Returns null if one isn’t available.

Level 2

frameBorder

Gets or sets the value of the frameBorder attribute.

Level 1

marginHeight

Gets or sets the value of the marginHeight attribute.

Level 1

marginWidth

Gets or sets the value of the marginWidth attribute.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

noResize

Gets or sets the value of the noResize attribute.

Level 1

scrolling

Gets or sets the value of the scrolling attribute.

Level 1

src

Gets or sets the value of the src attribute.

Level 1

HTMLFrameSetElement

Represents the <frameset/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

cols

Gets or sets the value of the cols attribute.

Level 1

rows

Gets or sets the value of the rows attribute.

Level 1

HTMLIFrameElement

Represents the <iframe/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

contentDocument

Gets the Document object of the frame. Returns null if one doesn’t exist.

Level 2

frameBorder

Gets or sets the value of the frameBorder attribute.

Level 1

height

Gets or sets the value of the height attribute.

Level 1

marginHeight

Gets or sets the value of the marginHeight attribute.

Level 1

marginWidth

Gets or sets the value of the marginWidth attribute.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

noResize

Gets or sets the value of the noResize attribute.

Level 1

scrolling

Gets or sets the value of the scrolling attribute.

Level 1

src

Gets or sets the value of the src attribute.

Level 1

width

Gets or sets the value of the width attribute.

Level 1

HTMLImageElement

Represents the <img/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

alt

Gets or sets the value of the alt attribute.

Level 1

border

Deprecated. Gets or sets the value of the border attribute.

Level 1

height

Gets or sets the value of the height attribute.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

src

Gets or sets the value of the src attribute.

Level 1

width

Gets or sets the value of the width attribute.

Level 1

HTMLInputElement

Represents the <input/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

accessKey

Gets or sets the value of the accessKey attribute.

Level 1

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

alt

Gets or sets the value of the alt attribute.

Level 1

checked

Used when type is checkbox or radio. Returns a boolean value depending on whether or not the checkbox or radio button is checked.

Level 1

defaultChecked

Used when type is checkbox or radio. Gets or sets the checked attribute. The value does not change when other checkboxes or radio buttons are checked.

Level 1

disabled

Gets or sets the value of the disabled attribute.

Level 1

form

Gets the HTMLFormElement object containing the <input/> element. Returns null if the element is not inside a form.

Level 1

maxLength

Gets or sets the value of the maxLength attribute.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

readOnly

Used only if type is text or password. Gets or sets the value of the readonly attribute.

Level 1

size

Gets or sets the value of the size attribute.

Level 1

src

If type is image, this gets or sets the value of the src attribute.

Level 1

type

Gets the value of the type attribute.

Level 1

value

Gets or sets the value of the value attribute.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

blur()

Removes keyboard focus from the element.

Level 1

click()

Simulates a mouse click for <input/> elements with type button, checkbox, radio, reset, and submit.

Level 1

focus()

Gives keyboard focus to the element.

Level 1

select()

Selects content of <input/> elements with type text, password, and file.

Level 1

HTMLOptionElement

Represents the <option/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

defaultSelected

Gets or sets the selected attribute. The value of this property does not change as other <option/> elements in the <select/> element are selected.

Level 1

disabled

Gets or sets the value of the disabled attribute.

Level 1

form

Gets the HTMLFormElement object containing the <option/> element. Returns null if the element is not inside a form.

Level 1

index

Gets the index position of the <option/> element in its containing <select/> element. Starts at 0.

Level 1

label

Gets or sets the value of the label attribute.

Level 1

selected

Returns a boolean value depending on whether or not the <option/> element is currently selected.

Level 1

text

Gets the text contained within the <option/> element.

Level 1

value

Gets or sets the value of the value attribute.

Level 1

HTMLOptionCollection

The HTMLOptionCollection object was introduced in DOM Level 2. It contains a list of <option/> elements.

PROPERTY NAME

DESCRIPTION

INTRODUCED

length

Gets the number of <option/> elements in the list.

Level 2

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

item(index)

Retrieves the <option/> element at the specified index.

Level 2

namedItem(name)

Retrieves the <option/> element by the specified name. It first attempts to find an <option/> element with the specified id. If none can be found, it looks for <option/> elements with the specified name attribute.

Level 2

HTMLParagraphElement

Represents the <p/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

HTMLSelectElement

Represents the <select/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

disabled

Gets or sets the value of the disabled attribute.

Level 1

form

Gets the HTMLFormElement object containing the <select/> element. Returns null if the element is not inside a form.

Level 1

length

Returns the number of <option/> elements.

Level 1

multiple

Gets or sets the value of the multiple attribute.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

options

Returns an HTMLOptionsCollection object containing the list of the <option/> elements.

Level 1

selectedIndex

Returns the index of the currently selected <option/> element. Returns -1 if nothing is selected and returns the first <option/> element selected if multiple items are selected.

Level 1

size

Gets or sets the value of the size attribute.

Level 1

type

Gets the value of the type attribute.

Level 1

value

Gets or sets the current form control’s value.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

add(element[, before])

Adds an <option/> element to the <select/> element. If before is null, then element is added at the end of the list.

Level 1

blur()

Removes keyboard focus from the elements.

Level 1

focus()

Gives keyboard focus to the element.

Level 1

remove(index)

Removes the <option/> element at the given index. Does nothing if index is out of range.

Level 1

HTMLTableCellElement

Represents the <td/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

bgColor

Deprecated. Gets or sets the value of the bgcolor attribute.

Level 1

cellIndex

The index of the cell in the row in DOM tree order.

Level 1

colSpan

Gets or sets the value of the colspan attribute.

Level 1

height

Deprecated. Gets or sets the value of the height attribute.

Level 1

noWrap

Deprecated. Gets or sets the value of the nowrap attribute.

Level 1

rowSpan

Gets or sets the value of the rowSpan attribute.

Level 1

vAlign

Gets or sets the value of the valign attribute.

Level 1

width

Deprecated. Gets or sets the value of the width attribute.

Level 1

HTMLTableElement

Represents the <table/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

bgColor

Deprecated. Gets or sets the value of the bgcolor attribute.

Level 1

border

Gets or sets the value of the border attribute.

Level 1

cellPadding

Gets or sets the value of the cellPadding attribute.

Level 1

cellSpacing

Gets or sets the value of the cellSpacing attribute.

Level 1

rows

Returns an HTMLCollection containing all rows in the table.

Level 1

tBodies

Returns an HTMLCollection of the defined <tbody/> element objects in the table.

Level 1

tFoot

Returns the table’s <tfoot/> element object (HTMLTableSectionElement), or null if one doesn't exist.

Level 1

tHead

Returns the table’s <thead/> element object (HTMLTableSectionElement), or null if one doesn't exist.

Level 1

width

Gets or sets the value of the width attribute.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

createTFoot()

Creates and returns a <tfoot/> element if one does not exist. Returns the existing <tfoot/> element if it exists.

Level 1

createTHead()

Creates and returns a <thead/> element if one does not exist. Returns the existing <thead/> element if it exists.

Level 1

deleteRow(index)

Deletes the row at the specified index.

Level 1

deleteTFoot()

Deletes the table’s footer if one exists.

Level 1

deleteTHead()

Deletes the table’s header if one exists.

Level 1

insertRow(index)

Inserts and returns a new row at the specified index. If index is -1 or equal to the number of rows, the new row is appended to the end of the row list.

Level 1

HTMLTableRowElement

Represents the <tr/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

bgColor

Deprecated. Gets or sets the value of the bgcolor attribute.

Level 1

cells

Returns an HTMLCollection containing the cells in the row.

Level 1

rowIndex

The index of the row in the table.

Level 1

sectionRowIndex

The index of the row relative to the section it belongs to (<thead/>, <tfoot/>, or <tbody/>).

Level 1

vAlign

Gets or sets the value of the valign attribute.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

deleteCell(index)

Deletes the cell at the specified index.

Level 1

insertCell(index)

Inserts and returns an empty <td/> element. If index is -1 or equal to the number of cells in the row, the new cell is appended to the end of the list.

Level 1

HTMLTableSectionElement

Represents the <thead/>, <tbody/>, and <tfoot/> elements.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

align

Deprecated. Gets or sets the value of the align attribute.

Level 1

rows

Returns an HTMLCollection containing the rows of the section.

Level 1

vAlign

Gets or sets the value of the valign attribute.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

deleteRow(index)

Deletes the row at the specified index relative to the section.

Level 1

insertRow(index)

Inserts and returns a new row into the section at the specified index (relative to the section). If index is -1 or equal to the number of rows, the row is appended to the end of the list.

Level 1

HTMLTextAreaElement

Represents the <textarea/> element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

accessKey

Gets or sets the value of the accessKey attribute.

Level 1

cols

Gets or sets the value of the cols attribute.

Level 1

defaultValue

Gets or sets the contents of the element. The value does not change when the content changes.

Level 1

disabled

Gets or sets the value of the disabled attribute.

Level 1

form

Gets the HTMLFormElement object containing the <textarea/> element. Returns null if the element is not inside a form.

Level 1

name

Gets or sets the value of the name attribute.

Level 1

readOnly

Used only if type is text or password. Gets or sets the value of the readonly attribute.

Level 1

rows

Gets or sets the value of the rows attribute.

Level 1

type

Gets the value of the type attribute. Always set to textarea.

Level 1

value

Gets or sets the current value of the element.

Level 1

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

blur()

Removes keyboard focus from the element.

Level 1

focus()

Gives keyboard focus to the element.

Level 1

select()

Selects the contents of the element.

Level 1

HTML Media Objects

The HTMLMediaElement object is the base type for both <video/> and <audio/> elements.

HTMLMediaElement

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

autoplay

Reflects the autoplay attribute, and determines where playback should automatically begin as soon as enough media is available.

HTML5

buffered

Gets the ranges of the media source that the browser has buffered.

HTML5

controller

Gets or sets the media controller associated with the element; returns null if none is linked.

HTML5

controls

Gets or sets the controls attribute, determining if the browser’s default controls are displayed.

HTML5

currentSrc

Gets the absolute URL of the media.

HTML5

currentTime

The current playback time in seconds. Setting seeks the media to the specified time.

HTML5

defaultMuted

Gets or sets the muted attribute. This does not affect the audio after playback starts. Use the muted property for that.

HTML5

defaultPlaybackRate

The speed of playback. 1.0 is normal.

HTML5

duration

Gets the length of the media in seconds.

HTML5

ended

Indicates whether the media element has ended playback.

HTML5

error

The most recent error; null if no error has occurred.

HTML5

loop

Gets or sets the loop attribute; indicates whether the media should start over when it reaches the end.

HTML5

mediaGroup

Gets or sets the mediagroup attribute.

HTML5

muted

Mutes or unmutes the audio.

HTML5

networkState

The current state of fetching the media over the network.

HTML5

paused

Indicates whether the media element is paused.

HTML5

playbackRate

Gets or sets the current playback rate.

HTML5

played

Gets the ranges that the media source has played, if any.

HTML5

preload

Gets or sets the preload attribute.

HTML5

readyState

Gets the readiness of the media.

HTML5

seekable

Gets the time ranges that the user can seek.

HTML5

seeking

Indicates whether the media is in the process of seeking to a new position.

HTML5

src

Gets or sets the src attribute.

HTML5

volume

Gets or sets the volume of the audio. 0.0 (silent) to 1.0 (loudest)

HTML5

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

canPlayType()

Determines the likelihood the browser can play the given media type.

HTML5

load()

Begins loading the media content from the server.

HTML5

pause()

Pauses the media playback.

HTML5

play()

Begins or resumes the media playback.

HTML5

HTMLAudioElement

The <audio/> element does not have any unique properties or methods from HTMLMediaElement.

HTMLVideoElement

The <video/> element has a few unique properties.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

height

Gets or sets the height attribute, determining the size of the display area.

HTML5

poster

Gets or sets the poster attribute, specifying the image to show while no video data is available.

HTML5

videoHeight

Gets the intrinsic height of the resource in CSS pixels.

HTML5

videoWidth

Gets the intrinsic width of the resource in CSS pixels.

HTML5

width

Gets or sets the width attribute, determine the size of the display area.

HTML5

DOM EVENT MODEL AND OBJECTS

The DOM event model was introduced in DOM Level 2. It describes an event system where every event has an event target. When an event reaches an event target, all registered event handlers on the event target are triggered for that specific event. The following objects are described by the DOM event model.

EventTarget

The EventTarget object is inherited by all HTMLElement objects in the DOM. This object provides the means for the registration and removal of event handlers on the event target.

Methods

METHOD Name

DESCRIPTION

addEventListener(type, listener, useCapture)

Registers an event handler on an element. type is the event type to listen for, listener is the JavaScript function to call when the event is fired, and useCapture determines whether the event is captured or bubbles.

removeEventListener(type, listener, useCapture)

Removes a listener from the element.

Event

When an event fires, an Event object is passed to the event handler if one is specified. This object contains contextual information about an event.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

bubbles

Indicates whether or not the event is a bubbling event.

Level 2

cancelable

Indicates whether or not the event can have its default action prevented.

Level 2

currentTarget

Indicates the EventTarget whose listeners are currently being processed.

Level 2

target

Indicates the EventTarget object to which the event was originally fired.

Level 2

timeStamp

Specifies the time (in milliseconds) at which the event was fired.

Level 2

type

The name of the event (remember: this is the name without the on prefix).

Level 2

Methods

METHOD NAME

DESCRIPTION

INTRODUCED

preventDefault()

Cancels the event, preventing the default action from taking place, only if the event is cancelable.

Level 2

stopPropagation()

Prevents further propagation of an event.

Level 2

MouseEvent

The MouseEvent object provides specific information associated with mouse events. MouseEvent objects contain not only the following properties, but also the properties and methods of the Event object.

Valid mouse events are shown in the following table.

EVENT NAME

DESCRIPTION

click

Occurs when the mouse button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location.

mousedown

Occurs when the mouse button is pressed over an element.

mouseup

Occurs when the mouse button is released over an element.

mouseover

Occurs when the mouse pointer moves onto an element.

mousemove

Occurs when the mouse pointer moves while it is over the element.

mouseout

Occurs when the mouse pointer moves away from an element.

Properties

PROPERTY NAME

DESCRIPTION

INTRODUCED

altKey

Returns a boolean value indicating whether or not the Alt key was pressed during the event’s firing.

Level 2

button

Indicates which mouse button was pressed, if applicable. The number 0 represents the left button, 1 indicates the middle button, and 2 indicates the right button. Left-hand-configured mice reverse the buttons (right is 0, middle is 1, and left is 2).

Level 2

clientX

The horizontal coordinate relative to the client area.

Level 2

clientY

The vertical coordinate relative to the client area.

Level 2

ctrlKey

Returns a boolean value indicating whether or not the Ctrl key was pressed when the event fired.

Level 2

relatedTarget

Indentifies a secondary EventTarget. Currently, this property is used with the mouseover event to indicate the EventTarget that the mouse pointer exited and with the mouseout event to indicate which EventTarget the pointer entered.

Level 2

screenX

The horizontal coordinate relative to the screen.

Level 2

screenY

The vertical coordinate relative to the screen.

Level 2

shiftKey

Returns a boolean value indicating whether or not the Shift key was pressed when the event fired.

Level 2

MISCELLANEOUS EVENTS

The following tables describe the events available in client-side JavaScript.

Mouse Events

EVENT

DESCRIPTION

click

Raised when the user clicks an HTML control.

dblclick

Raised when the user double-clicks an HTML control.

mousedown

Raised when the user presses a mouse button.

mousemove

Raised when the user moves the mouse pointer.

mouseout

Raised when the user moves the mouse pointer out from within an HTML control.

mouseover

Raised when the user moves the mouse pointer over an HTML control.

mouseup

Raised when the user releases the mouse button.

Keyboard Events

EVENT

DESCRIPTION

keydown

Raised when the user presses a key on the keyboard.

keypress

Raised when the user presses a key on the keyboard. This event will be raised continually until the user releases the key.

keyup

Raised when the user releases a key that had been pressed.

HTML Control Events

EVENT

DESCRIPTION

blur

Raised when an HTML control loses focus.

change

Raised when an HTML control loses focus and its value has changed.

focus

Raised when focus is set to the HTML control.

reset

Raised when the user resets a form.

select

Raised when the user selects text in an HTML control.

submit

Raised when the user submits a form.

Window Events

EVENT

DESCRIPTION

load

Raised when the window has completed loading.

resize

Raised when the user resizes the window.

unload

Executes JavaScript code when the user exits a document.

Media Events

EVENT

DESCRIPTION

abort

Raised when playback is aborted.

canplay

Sent when enough data is available that the media can be played.

canplaythrough

Fired when the entire media can be played without interruption.

durationchange

Raised when the metadata has changed.

emptied

Fires when the media has become empty.

ended

Sent when playback completes.

error

Sent when an error occurs.

loadeddata

The media’s first frame has been loaded.

loadedmetadata

Fired when the media’s metadata is loaded.

loadstart

Sent when downloading begins.

pause

Playback has been paused.

play

Playback begins after a pause.

playing

Raised when media begins to play.

progress

Indicates the progress of the media download.

ratechange

Fires when the playback rate changes.

seeked

Seeking has ended.

seeking

Playback is being moved to a new position.

stalled

Raised when the browser tries to download the media, but receives no data.

suspend

Sent when the loading of the media is suspended.

timeupdate

The media’s currentTime has changed.

volumechange

Fires when the audio volume changes (both when volume is set and when muted).

waiting

Raised when playback is paused in order to download more data.

Other Events

EVENT

DESCRIPTION

abort

Raised when the user aborts loading an image.

error

Raised when an error occurs loading the page.