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 lists the objects made available by the W3C DOM.
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.
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.
Defined in DOM Level 1, the Node
object is the primary datatype 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 |
---|---|---|---|
| 1 | Level 1 |
|
| 2 | Level 1 |
|
| 3 | Level 1 |
|
4 | Level 1 |
| |
| 5 | Level 1 |
|
| 6 | Level 1 |
|
| 7 | Level 1 |
|
| 8 | Level 1 |
|
| 9 | Level 1 |
|
| 10 | Level 1 |
|
| 11 | Level 1 |
|
| 12 | Level 1 |
|
Properties
Property Name | Description | Introduced |
---|---|---|
| A | Level 1 |
| A | Level 1 |
| Gets the first child of this node. Returns | Level 1 |
| Gets the last child of this node. Returns | Level 1 |
| 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 |
| The namespace URI of the node, or | Level 2 |
| Gets the node immediately following this node. Returns | Level 1 |
| Gets the name of this node. | Level 1 |
An integer representing the type of this node. See previous table. | Level 1 | |
| Gets the value of this node, depending on the type. | Level 1 |
| Gets the | Level 1 |
| Gets the parent node of this node. Returns | Level 1 |
| Returns the namespace prefix of this node, or | Level 2 |
| Gets the node immediately before this node. Returns | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Adds the | Level 1 |
| Returns a duplicate of the node. The returned node has no parent. If | Level 1 |
| Returns a Boolean value based on if the node has any attributes (if the node is an element). | Level 2 |
| Returns a Boolean value based on whether the node has any child nodes. | Level 1 |
| Inserts the | Level 1 |
| Removes the specified child node and returns it. | Level 1 |
| Replaces | Level 1 |
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 change made to the nodes within the DOM are immediately reflected in every reference of the NodeList
.
Properties
Property Name | Description | Introduced |
---|---|---|
| The number of nodes in the list. | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Returns the item at the specified index. Returns | Level 1 |
Objects referred to as NamedNodeMap
s 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 |
---|---|---|
| The number of nodes in the map. | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Retrieves a node by the specified name. | Level 1 |
| Removes an item by the specified name. | Level 1 |
| Adds a node to the list by using its | Level 1 |
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.
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 nextSibling
return null
for Attr
objects.
Properties
Property Name | Description | Introduced |
---|---|---|
| Returns the | Level 2 |
| Returns the name of the attribute. | Level 1 |
| Returns the value of the attribute. | Level 1 |
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 |
---|---|---|
| The | Level 1 |
| Returns the root element of the document. For HTML documents, the | Level 1 |
| The | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Returns a new | Level 1 |
| Returns an attribute with the given qualified name and namespace URI. Not for HTML DOMs. | Level 2 |
| Returns a new | Level 1 |
| Returns a new | Level 1 |
| Returns an empty | Level 1 |
| Returns a new | Level 1 |
| Returns an element of the specified qualified name and namespace URI. Not for HTML DOMs. | Level 2 |
Returns a new | Level 1 | |
| Returns the | Level 2 |
| Returns a | Level 1 |
| Returns a | Level 2 |
| 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 | Level 2 |
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 DocumentFragment
object, 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.
Elements are the majority of objects, other than text, that you will encounter in the DOM.
Properties
Property Name | Description | Introduced |
---|---|---|
| Returns the name of the element. The same as | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Retrieves the attribute's value by the specified name. | Level 1 |
| Returns the | Level 2 |
| Returns the | Level 1 |
Returns a | Level 1 | |
| Returns a | Level 2 |
| Returns a Boolean value based on whether or not the element has an attribute with the specified name. | Level 2 |
| Returns a Boolean value based on whether the | Level 2 |
| Removes the attribute with the specified name. | Level 1 |
| Removes an attribute specified by the local name and namespace URI. Not for HTML DOMs. | Level 2 |
| Removes and returns the specified attribute. | Level 1 |
| Creates and adds a new attribute, or changes the value of an existing attribute. The value is a simple string. | Level 1 |
| Creates and adds a new attribute with the specified namespace URI, qualified name, and value. | Level 2 |
| Adds the specified attribute to the element. Replaces the existing attribute with the same name if it exists. | Level 1 |
| Adds the specified attribute to the element. | Level 2 |
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.
The HTMLCollection
object is a list of nodes, much like NodeList
. It does not inherit from NodeList
, but HTMLCollection
s are considered live, like NodeList
s, and are automatically updated when changes are made to the document.
Properties
Property Name | Description | Introduced |
---|---|---|
| Returns the number of elements in the collection. | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Returns the element at the specified index. Returns | Level 1 |
| Returns the element using a name. It first searches for an element with a matching | Level 1 |
The HTMLDocument
object is the root of HTML documents and contains the entire content.
Properties
Property Name | Description | Introduced |
---|---|---|
| Returns an | Level 1 |
| Returns an | Level 1 |
| Returns the element that contains the document's content. Returns the | Level 1 |
| Returns the cookies associated with the document. Returns an empty string if none. | Level 1 |
| Returns the domain name of the server that served the document. Returns | Level 1 |
| Returns an | Level 1 |
| Returns an | Level 1 |
| Returns an | Level 1 |
| 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 |
| The title of the document as specified by the | Level 1 |
| The complete URL of the document. | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Closes a document and opened with | Level 1 |
| Returns the element with the given | Level 1 |
Returns an | Level 1 | |
| Opens a document for writing. | Level 1 |
| Writes a string of text to the document. | Level 1 |
| Writes a string of text to the document followed by a newline. | Level 1 |
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
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 |
---|---|---|
| Gets or sets the value of the element's | Level 1 |
| Gets or sets the value of the element's | Level 1 |
Represents the HTML <a/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or set the value of the | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Removes the keyboard focus from the element. | Level 1 |
| Gives keyboard focus to the element. | Level 1 |
Represents the <body/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
Deprecated. Gets or sets the value of the | Level 1 | |
| Deprecated. Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
Represents <button/>
elements.
Properties
Property Name | Description | Introduced |
---|---|---|
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
Represents the <div/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
Represents the <form/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Gets or sets the value of the | Level 1 |
| Returns an | Level 1 |
| Gets or sets the value of the | Level 1 |
| Returns the number of form controls within the form. | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Resets all form control elements contained within the form to their default values. | Level 1 |
| Submits the form. Does not fire the | Level 1 |
Represents the <frame/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Gets the | Level 2 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
Gets or sets the value of the | Level 1 | |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
Represents the <frameset/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
Represents the <iframe/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
| Gets the | Level 2 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
Represents the <img/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
Represents the <input/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Used when | Level 1 |
| Used when | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Used only if | Level 1 |
Gets or sets the value of the | Level 1 | |
| If | Level 1 |
| Gets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Removes keyboard focus from the element. | Level 1 |
| Simulates a mouse click for | Level 1 |
| Gives keyboard focus to the element. | Level 1 |
| Selects content of | Level 1 |
Represents the <option/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Gets or sets the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets the | Level 1 |
| Gets the index position of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Returns a Boolean value depending on whether or not the | Level 1 |
Gets the text contained within the <option/> element. | Level 1 | |
| Gets or sets the value of the | Level 1 |
The HTMLOptionCollection
object was introduced in DOM Level 2. It contains a list of <option/>
elements.
Property Name | Description | Introduced |
---|---|---|
| Gets the number of | Level 2 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Retrieves the | Level 2 |
| Retrieves the | Level 2 |
Represents the <p/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
Represents the <select/>
element.
Properties
Methods
Method Name | Description | Introduced |
---|---|---|
| Adds an | Level 1 |
| Removes keyboard focus from the elements. | Level 1 |
| Gives keyboard focus to the element. | Level 1 |
| Removes the | Level 1 |
Represents the <td/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
| The index of the cell in the row in DOM tree order. | Level 1 |
| Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
Deprecated. Gets or sets the value of the | Level 1 | |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
Represents the <table/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Returns an | Level 1 |
| Returns an | Level 1 |
| Returns the table's | Level 1 |
| Returns the table's | Level 1 |
| Gets or sets the value of the | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Creates and returns a | Level 1 |
| Creates and returns a | Level 1 |
Deletes the row at the specified index. | Level 1 | |
| Deletes the table's footer if one exists. | Level 1 |
| Deletes the table's header if one exists. | Level 1 |
| Inserts and returns a new row at the specified index. If | Level 1 |
Represents the <tr/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
| Deprecated. Gets or sets the value of the | Level 1 |
| Returns an | Level 1 |
| The index of the row in the table. | Level 1 |
| The index of the row relative to the section it belongs to ( | Level 1 |
| Gets or sets the value of the | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Deletes the cell at the specified index. | Level 1 |
| Inserts and returns an empty | Level 1 |
Represents the <thead/>
, <tbody/>
, and <tfoot/>
elements.
Properties
Property Name | Description | Introduced |
---|---|---|
| Deprecated. Gets or sets the value of the | Level 1 |
| Returns an | Level 1 |
| Gets or sets the value of the | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Deletes the row at the specified index relative to the section. | Level 1 |
| Inserts and returns a new row into the section at the specified index (relative to the section). If | Level 1 |
Represents the <textarea/>
element.
Properties
Property Name | Description | Introduced |
---|---|---|
| Gets or sets the value of the | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets or sets the contents of the element. The value does not change when the content changes. | Level 1 |
| Gets or sets the value of the | Level 1 |
| Gets the | Level 1 |
| Gets or sets the value of the | Level 1 |
Used only if | Level 1 | |
| Gets or sets the value of the | Level 1 |
| Gets the value of the | Level 1 |
| Gets or sets the current value of the element. | Level 1 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Removes keyboard focus from the element. | Level 1 |
| Gives keyboard focus to the element. | Level 1 |
| Selects the contents of the element. | Level 1 |
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.
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 |
---|---|
| Registers an event handler on an element. |
| Removes a listener from the element. |
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 |
---|---|---|
| Indicates whether or not the event is a bubbling event. | Level 2 |
| Indicates whether or not the event can have its default action prevented. | Level 2 |
| Indicates the | Level 2 |
| Indicates the | Level 2 |
| Specifies the time (in milliseconds) at which the event was fired. | Level 2 |
| The name of the event (remember: this is the name without the | Level 2 |
Methods
Method Name | Description | Introduced |
---|---|---|
| Cancels the event, preventing the default action from taking place, only if the event is cancelable. | Level 2 |
| Prevents further propagation of an event. | Level 2 |
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 |
---|---|
| Occurs when the mouse button is clicked over an element. A |
| Occurs when the mouse button is pressed over an element. |
Occurs when the mouse button is released over an element. | |
| Occurs when the mouse pointer moves onto an element. |
| Occurs when the mouse pointer moves while it is over the element. |
| Occurs when the mouse pointer moves away from an element. |
Properties
Property Name | Description | Introduced |
---|---|---|
| Returns a Boolean value indicating whether or not the Alt key was pressed during the event's firing. | Level 2 |
| Indicates which mouse button was pressed, if applicable. The number | Level 2 |
| The horizontal coordinate relative to the client area. | Level 2 |
| The vertical coordinate relative to the client area. | Level 2 |
| Returns a Boolean value indicating whether or not the Ctrl key was pressed when the event fired. | Level 2 |
| Indentifies a secondary | Level 2 |
| The horizontal coordinate relative to the screen. | Level 2 |
| The vertical coordinate relative to the screen. | Level 2 |
| Returns a Boolean value indicating whether or not the Shift key was pressed when the event fired. | Level 2 |
The following tables describe the events available in client-side JavaScript.
Mouse Events
Event | Description |
---|---|
| Raised when the user clicks an HTML control. |
| Raised when the user double-clicks an HTML control. |
| Raised when the user presses a mouse button. |
| Raised when the user moves the mouse pointer. |
| Raised when the user moves the mouse pointer out from within an HTML control. |
| Raised when the user moves the mouse pointer over an HTML control. |
| Raised when the user releases the mouse button. |
Keyboard Events
Event | Description |
---|---|
| Raised when the user presses a key on the keyboard. |
| Raised when the user presses a key on the keyboard. This event will be raised continually until the user releases the key. |
| Raised when the user releases a key that had been pressed. |
HTML Control Events
Event | Description |
---|---|
| Raised when an HTML control loses focus. |
| Raised when an HTML control loses focus and its value has changed. |
| Raised when focus is set to the HTML control. |
| Raised when the user resets a form. |
| Raised when the user selects text in an HTML control. |
| Raised when the user submits a form. |
Event | Description |
---|---|
| Raised when the window has completed loading. |
| Raised when the user resizes the window. |
| Executes JavaScript code when the user exits a document. |
Other Events
Event | Description |
---|---|
| Raised when the user aborts loading an image. |
| Raised when an error occurs loading the page. |
18.227.161.225