DOM Document Object
Each HTML document loaded into a browser window becomes a Document object.
The Document object provides access to all HTML elements in a page, from within a script.
Collections
| Collection | Description |
|---|---|
anchors[] |
Returns an array of all the anchors in the document |
forms[] |
Returns an array of all the forms in the document |
images[] |
Returns an array of all the images in the document |
links[] |
Returns an array of all the links in the document |
Properties
| Property | Description |
|---|---|
cookie |
Returns all name/value pairs of cookies in the document |
documentMode |
Returns the mode used by the browser to render the document |
domain |
Returns the domain name of the server that loaded the document |
lastModified |
Returns the date and time the document was last modified |
readyState |
Returns the (loading) status of the document |
referrer |
Returns the URL of the document that loaded the current document |
title |
Sets or returns the title of the document |
URL |
Returns the full URL of the document |
Methods
| Method | Description |
|---|---|
close() |
Closes the output stream previously opened with document.open() |
getElementById() |
Accesses the first element with the specified id |
getElementsByName() |
Accesses all elements with a specified name |
getElementsByTag |
Accesses all elements with a specified tagname |
open() |
Opens an output stream to collect the output from document.write() or document.writeln() |
write() |
Writes HTML expressions or JavaScript code to a document |
writeln() |
Same as write(), but adds a newline character after each statement |
DOM HTMLElement Object
The tables below list the collections, properties, methods, and events below that can be used on all HTML elements.
Collections
| Collection | Description |
|---|---|
attributes[] |
Returns an array of the attributes of an element |
childNodes[] |
Returns an array of child nodes for an element |
Properties
| Property | Description |
|---|---|
accessKey |
Sets or returns an accesskey for an element |
className |
Sets or returns the class attribute of an element |
clientHeight |
Returns the viewable height of the content on a page (not including borders, margins, or scrollbars) |
clientWidth |
Returns the viewable width of the content on a page (not including borders, margins, or scrollbars) |
dir |
Sets or returns the text direction of an element |
disabled |
Sets or returns the disabled attribute of an element |
firstChild |
Returns the first child of an element |
height |
Sets or returns the height attribute of an element |
id |
Sets or returns the id of an element |
innerHTML |
Sets or returns the HTML contents (+text) of an element |
lang |
Sets or returns the language code for an element |
lastChild |
Returns the last child of an element |
length |
|
nextSibling |
Returns the element immediately following an element |
nodeName |
Returns the tagname of an element (in uppercase) |
nodeType |
Returns the type of the element |
nodeValue |
Returns the value of the element |
offsetHeight |
Returns the height of an element, including borders and padding if any, but not margins |
offsetLeft |
Returns the horizontal offset position of the current element relative to its offset container |
offsetParent |
Returns the offset container of an element |
offsetTop |
Returns the vertical offset position of the current element relative to its offset container |
offsetWidth |
Returns the width of an element, including borders and padding if any, but not margins |
ownerDocument |
Returns the root element (document object) for an element |
parentNode |
Returns the parent node of an element |
previousSibling |
Returns the element immediately before an element |
scrollHeight |
Returns the entire height of an element (including areas hidden with scrollbars) |
scrollLeft |
Returns the distance between the actual left edge of an element and its left edge currently in view |
scrollTop |
Returns the distance between the actual top edge of an element and its top edge currently in view |
scrollWidth |
Returns the entire width of an element (including areas hidden with scrollbars) |
style |
Sets or returns the style attribute of an element |
tabIndex |
Sets or returns the tab order of an element |
tagName |
Returns the tagname of an element as a string (in uppercase) |
title |
Sets or returns the title attribute of an element |
width |
Sets or returns the width attribute of an element |
Methods
| Method | Description |
|---|---|
appendChild() |
Adds a new child element to the end of the list of children of the element |
blur() |
Removes focus from an element |
click() |
Executes a click on an element |
cloneNode() |
Clones an element |
focus() |
Gives focus to an element |
getAttribute() |
Returns the value of an attribute |
getElementsBy |
Accesses all elements with a specified tagname |
hasChildNodes() |
Returns whether an element has any child elements |
insertBefore() |
Inserts a new child element before an existing child element |
item() |
Returns an element based on its index within the document tree |
normalize() |
Puts all text nodes underneath this element (including attributes) into a "normal" form where only structure (e.g., elements, comments, processing instructions, CDATA sections, and entity references) separates Text nodes, i.e., there are neither adjacent Text nodes nor empty Text nodes |
removeAttribute() |
Removes a specified attribute from an element |
removeChild() |
Removes a child element |
replaceChild() |
Replace a child element |
setAttribute() |
Adds a new attribute to an element |
toString() |
Converts an element to a string |
Events
| Event | Description |
|---|---|
onblur |
When an element loses focus |
onclick |
When a mouse click occurs on an element |
ondblclick |
When a mouse-doubleclick occurs on an element |
onfocus |
When an element gets focus |
onkeydown |
When a keyboard key is pressed |
onkeypress |
When a keyboard key is pressed or held down |
onkeyup |
When a keyboard key is released |
onmousedown |
When a mouse button is pressed |
onmousemove |
When the mouse cursor moves |
onmouseout |
When the mouse cursor moves out of an element |
onmouseover |
When the mouse cursor moves over an element |
onmouseup |
When a mouse button is released |
onresize |
When a window or frame is resized |
DOM Event Object
The event object gives you information about an event that has occurred.
The Event object represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons.
Event Handlers
The table below lists the attributes that can be inserted into HTML tags to define event actions.
| Attribute | The Event occurs when... |
|---|---|
onblur |
An element loses focus |
onchange |
The content of a field changes |
onclick |
Mouse clicks an object |
ondblclick |
Mouse double-clicks an object |
onerror |
An error occurs when loading a document or an image |
onfocus |
An element gets focus |
onkeydown |
A keyboard key is pressed |
onkeypress |
A keyboard key is pressed or held down |
onkeyup |
A keyboard key is released |
onmousedown |
A mouse button is pressed |
onmousemove |
The mouse is moved |
onmouseout |
The mouse is moved off an element |
onmouseover |
The mouse is moved over an element |
onmouseup |
A mouse button is released |
onresize |
A window or frame is resized |
onselect |
Text is selected |
onunload |
The user exits the page |
Mouse / Keyboard Attributes
| Property | Description |
|---|---|
altKey |
Returns whether or not the "ALT" key was pressed when an event was triggered |
button |
Returns which mouse button was clicked when an event was triggered |
clientX |
Returns the horizontal coordinate of the mouse pointer when an event was triggered |
clientY |
Returns the vertical coordinate of the mouse pointer when an event was triggered |
ctrlKey |
Returns whether or not the "CTRL" key was pressed when an event was triggered |
metaKey |
Returns whether or not the "meta" key was pressed when an event was triggered |
relatedTarget |
Returns the element related to the element that triggered the event |
screenX |
Returns the horizontal coordinate of the mouse pointer when an event was triggered |
screenY |
Returns the vertical coordinate of the mouse pointer when an event was triggered |
shiftKey |
Returns whether or not the "SHIFT" key was pressed when an event was triggered |
Other Event Attributes
| Property | Description |
|---|---|
bubbles |
Returns a Boolean value that indicates whether or not an event is a bubbling event |
cancelable |
Returns a Boolean value that indicates whether or not an event can have its default action prevented |
currentTarget |
Returns the element whose event listeners triggered the event |
eventPhase |
Returns which phase of the event flow is currently being evaluated |
target |
Returns the element that triggered the event |
timeStamp |
Returns the time stamp, in milliseconds, from the epoch (system start or event trigger) |
type |
Returns the name of the event |
