Scribd
Upload
36 views

Document Object Properties and Methods

This document provides information about the document object and element objects in HTML DOM. It lists many common properties and methods for accessing and manipulating nodes in the document tree, including the document object itself as well as element nodes. Some key properties and methods include document.body for the document body, element.innerHTML for getting/setting element content, element.getAttribute/setAttribute for getting/setting attributes, and element.addEventListener for attaching event handlers. The document object represents the entire document and provides global access to all nodes, while element objects allow access to individual elements.

Uploaded by

aswd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

Document Object Properties and Methods

This document provides information about the document object and element objects in HTML DOM. It lists many common properties and methods for accessing and manipulating nodes in the document tree, including the document object itself as well as element nodes. Some key properties and methods include document.body for the document body, element.innerHTML for getting/setting element content, element.getAttribute/setAttribute for getting/setting attributes, and element.addEventListener for attaching event handlers. The document object represents the entire document and provides global access to all nodes, while element objects allow access to individual elements.

Uploaded by

aswd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML DOM Document

Document Object Properties and Methods


The document object is the root node of the HTML document and the "owner" of all other nodes. The document object provides properties and
methods to access all node objects, from within JavaScript. The document is a part of the Window object and can be accessed as
window.document. Properties and methods can be accessed as “document.property” or “document.method()”.
Property/Method Description
activeElement Returns the currently focused element in the document
addEventListener() Attaches an event handler to the document
adoptNode() Adopts a node from another document
anchors Returns a collection of all <a> elements in the document that have a name attribute
applets Returns a collection of all <applet> elements in the document
baseURI Returns the absolute base URI of a document
body Sets or returns the document's body (the <body> element)
close() Closes the output stream previously opened with open()
cookie Returns all name/value pairs of cookies in the document
charset Deprecated. Use characterSet instead. Returns the character encoding for the document
characterSet Returns the character encoding for the document
createAttribute() Creates an attribute node
createComment() Creates a Comment node with the specified text
createDocumentFragment() Creates an empty DocumentFragment node
createElement() Creates an Element node
createTextNode() Creates a Text node
doctype Returns the Document Type Declaration associated with the document
documentElement Returns the Document Element of the document (the <html> element)
documentMode Returns the mode used by the browser to render the document
documentURI Sets or returns the location of the document
domain Returns the domain name of the server that loaded the document
domConfig Obsolete. Returns the DOM configuration of the document
embeds Returns a collection of all <embed> elements the document
forms Returns a collection of all <form> elements in the document
getElementById() Returns the element that has the ID attribute with the specified value
getElementsByClassName() Returns a NodeList containing all elements with the specified class name
getElementsByName() Returns a NodeList containing all elements with a specified name
getElementsByTagName() Returns a NodeList containing all elements with the specified tag name
hasFocus() Returns a Boolean value indicating whether the document has focus
head Returns the <head> element of the document
images Returns a collection of all <img> elements in the document
implementation Returns the DOMImplementation object that handles this document
importNode() Imports a node from another document
inputEncoding Returns the encoding, character set, used for the document
lastModified Returns the date and time the document was last modified
links Returns a collection of all <a> and <area> elements in the document that have a href attribute
normalize() Removes empty Text nodes, and joins adjacent nodes
normalizeDocument() Removes empty Text nodes, and joins adjacent nodes
open() Opens an HTML output stream to collect output from write()
querySelector() Returns the first element that matches a specified CSS selector(s) in the document
querySelectorAll() Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document
readyState Returns the (loading) status of the document
referrer Returns the URL of the document that loaded the current document
removeEventListener() Removes an event handler from the document (that has been attached with the addEventListener() method)
renameNode() Renames the specified node
scripts Returns a collection of <script> elements in the document
strictErrorChecking Sets or returns whether error-checking is enforced or not
title Sets or returns the title of the document
URL Returns the full URL of the HTML document
write() Writes HTML expressions or JavaScript code to a document
writeln() Same as write(), but adds a newline character after each statement
HTML DOM Elements
Document Object Properties and Methods
In the HTML DOM, the Element object represents an HTML element. Element objects can have child nodes of type element nodes, text nodes,
or comment nodes. A NodeList object represents a list of nodes, like an HTML element's collection of child nodes. Elements can also have
attributes. Attributes are attribute nodes (See next chapter).. Properties and methods can be accessed as “element.property” or
“element.method()”.
Property / Method Description
accessKey Sets or returns the accesskey attribute of an element
addEventListener() Attaches an event handler to the specified element
appendChild() Adds a new child node, to an element, as the last child node
attributes Returns a NamedNodeMap of an element's attributes
blur() Removes focus from an element
childElementCount Returns the number of child elements an element has
childNodes Returns a collection of an element's child nodes (including text and comment nodes)
children Returns a collection of an element's child element (excluding text and comment nodes)
classList Returns the class name(s) of an element
className Sets or returns the value of the class attribute of an element
click() Simulates a mouse-click on an element
clientHeight Returns the height of an element, including padding
clientLeft Returns the width of the left border of an element
clientTop Returns the width of the top border of an element
clientWidth Returns the width of an element, including padding
cloneNode() Clones an element
compareDocumentPosition() Compares the document position of two elements
contains() Returns true if a node is a descendant of a node, otherwise false
contentEditable Sets or returns whether the content of an element is editable or not
dir Sets or returns the value of the dir attribute of an element
firstChild Returns the first child node of an element
firstElementChild Returns the first child element of an element
focus() Gives focus to an element
getAttribute() Returns the specified attribute value of an element node
getAttributeNode() Returns the specified attribute node
getElementsByClassName() Returns a collection of all child elements with the specified class name
getElementsByTagName() Returns a collection of all child elements with the specified tag name
getFeature() Returns an object which implements the APIs of a specified feature
hasAttribute() Returns true if an element has the specified attribute, otherwise false
hasAttributes() Returns true if an element has any attributes, otherwise false
hasChildNodes() Returns true if an element has any child nodes, otherwise false
id Sets or returns the value of the id attribute of an element
innerHTML Sets or returns the content of an element
insertBefore() Inserts a new child node before a specified, existing, child node
isContentEditable Returns true if the content of an element is editable, otherwise false
isDefaultNamespace() Returns true if a specified namespaceURI is the default, otherwise false
isEqualNode() Checks if two elements are equal
isSameNode() Checks if two elements are the same node
isSupported() Returns true if a specified feature is supported on the element
lang Sets or returns the value of the lang attribute of an element
lastChild Returns the last child node of an element
lastElementChild Returns the last child element of an element
namespaceURI Returns the namespace URI of an element
nextSibling Returns the next node at the same node tree level
nextElementSibling Returns the next element at the same node tree level
nodeName Returns the name of a node
nodeType Returns the node type of a node
nodeValue Sets or returns the value of a node
normalize() Joins adjacent text nodes and removes empty text nodes in an element
offsetHeight Returns the height of an element, including padding, border and scrollbar
offsetWidth Returns the width of an element, including padding, border and scrollbar
offsetLeft Returns the horizontal offset position of an element
offsetParent Returns the offset container of an element
offsetTop Returns the vertical offset position of an element
ownerDocument Returns the root element (document object) for an element
parentNode Returns the parent node of an element
parentElement Returns the parent element node of an element
previousSibling Returns the previous node at the same node tree level
previousElementSibling Returns the previous element at the same node tree level
querySelector() Returns the first child element that matches a specified CSS selector(s) of an element
querySelectorAll() Returns all child elements that matches a specified CSS selector(s) of an element
removeAttribute() Removes a specified attribute from an element
removeAttributeNode() Removes a specified attribute node, and returns the removed node
removeChild() Removes a child node from an element
replaceChild() Replaces a child node in an element
removeEventListener() Removes an event handler that has been attached with the addEventListener() method
scrollHeight Returns the entire height of an element, including padding
scrollIntoView() Scrolls the specified element into the visible area of the browser window
scrollLeft Sets or returns the number of pixels an element's content is scrolled horizontally
scrollTop Sets or returns the number of pixels an element's content is scrolled vertically
scrollWidth Returns the entire width of an element, including padding
setAttribute() Sets or changes the specified attribute, to the specified value
setAttributeNode() Sets or changes the specified attribute node
style Sets or returns the value of the style attribute of an element
tabIndex Sets or returns the value of the tabindex attribute of an element
tagName Returns the tag name of an element
textContent Sets or returns the textual content of a node and its descendants
title Sets or returns the value of the title attribute of an element
toString() Converts an element to a string
nodelist.item() Returns the node at the specified index in a NodeList
nodelist.length Returns the number of nodes in a NodeList

HTML Audio/Video DOM Reference

The HTML5 DOM has methods, properties, and events for the <audio> and <video> elements. These methods,
properties, and events allow you to manipulate <audio> and <video> elements using JavaScript.

HTML Audio/Video Methods


Method Description
addTextTrack() Adds a new text track to the audio/video
canPlayType() Checks if the browser can play the specified audio/video type
load() Re-loads the audio/video element
play() Starts playing the audio/video
pause() Pauses the currently playing audio/video
HTML Audio/Video Properties
Property Description
audioTracks Returns an AudioTrackList object representing available audio tracks
autoplay Sets or returns whether the audio/video should start playing as soon as it is loaded
buffered Returns a TimeRanges object representing the buffered parts of the audio/video
controller Returns the MediaController object representing the current media controller of the audio/video
controls Sets or returns whether the audio/video should display controls (like play/pause etc.)
crossOrigin Sets or returns the CORS settings of the audio/video
currentSrc Returns the URL of the current audio/video
currentTime Sets or returns the current playback position in the audio/video (in seconds)
defaultMuted Sets or returns whether the audio/video should be muted by default
defaultPlaybackRate Sets or returns the default speed of the audio/video playback
duration Returns the length of the current audio/video (in seconds)
ended Returns whether the playback of the audio/video has ended or not
error Returns a MediaError object representing the error state of the audio/video
loop Sets or returns whether the audio/video should start over again when finished
mediaGroup Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements)
muted Sets or returns whether the audio/video is muted or not
networkState Returns the current network state of the audio/video
paused Returns whether the audio/video is paused or not
playbackRate Sets or returns the speed of the audio/video playback
played Returns a TimeRanges object representing the played parts of the audio/video
preload Sets or returns whether the audio/video should be loaded when the page loads
readyState Returns the current ready state of the audio/video
seekable Returns a TimeRanges object representing the seekable parts of the audio/video
seeking Returns whether the user is currently seeking in the audio/video
src Sets or returns the current source of the audio/video element
startDate Returns a Date object representing the current time offset
textTracks Returns a TextTrackList object representing the available text tracks
videoTracks Returns a VideoTrackList object representing the available video tracks
volume Sets or returns the volume of the audio/video
HTML DOM Events
Window Event Attributes Mouse Events
Attribute Description Attribute Description

onafterprint after the document is printed onclick a mouse click on the element

onbeforeprint before the document is printed ondblclick a mouse double-click on the element

onbeforeunload before the document is unloaded ondrag when an element is dragged

onerror an error occur ondragend at the end of a drag operation

onhaschange the document has changed


ondragenter when an element has been dragged to a valid drop target
onload the page is finished loading
ondragleave when an element leaves a valid drop target
onmessage the message is triggered
ondragover when an element is being dragged over a valid drop target
onoffline the document goes offline
ondragstart at the start of a drag operation
ononline the document comes online
ondrop when dragged element is being dropped
onpagehide the window is hidden
onmousedown a mouse button is pressed down on an element
onpageshow the window becomes visible
onmousemove the mouse pointer moves over an element
onpopstate the window's history changes
onmouseout the mouse pointer moves out of an element
onredo the document performs a redo
onmouseover the mouse pointer moves over an element
onresize the browser window is resized
onmouseup a mouse button is released over an element
onstorage a Web Storage area is updated
onmousewheel when the mouse wheel is being rotated
onundo the document performs an undo
onscroll when an element's scrollbar is being scrolled
onunload Fires once a page has unloaded
Form Events Media Events
Attribute Description Attribute Description

onblur the element loses focus onabort on abort

onchange the value of the element is changed oncanplay a file is ready to start playing

oncontextmenu a context menu is triggered oncanplaythrough a file can be played without pausing for buffering

onfocus the element gets focus ondurationchange the length of the media changes

onformchange a form changes onemptied the file is suddenly unavailable

onforminput a form gets user input onended the media has reach the end

oninput an element gets user input onerror an error occurs when the file is being loaded

oninvalid an element is invalid onloadeddata media data is loaded

onreset Reset button in a form is clicked onloadedmetadata meta data (like dimensions and duration) are loaded
Not supported in HTML5
onloadstart the file begins to load
onselect some text has been selected in an
element onpause the media is paused

onsubmit a form is submitted onplay the media is ready to start playing

onplaying the media actually has started playing


Keyboard Events onprogress the browser is getting the media data
Attribute Description
onratechange each time the playback rate changes
onkeydown a user is pressing a key
onreadystatechange each time the ready state changes
onkeypress a user presses a key
onseeked the seeking attribute is set to
onkeyup a user releases a key
onseeking the seeking attribute is set to

onstalled the browser is unable to fetch the media data

onsuspend fetching the media data is stopped

ontimeupdate the playing position has changed

onvolumechange the volume is changed

onwaiting the media has paused but is expected to resume

MouseEvent/KeyboardEvent Object
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, relative to the current window, when an event was triggered

clientY Returns the vertical coordinate of the mouse pointer, relative to the current window, when an event was triggered

ctrlKey Returns whether or not the "CTRL" key was pressed when an event was triggered

keyIdentifier Returns the identifier of a key

keyLocation Returns the location of the key on the advice

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, relative to the screen, when an event was triggered

screenY Returns the vertical coordinate of the mouse pointer, relative to the screen, when an event was triggered

shiftKey Returns whether or not the "SHIFT" key was pressed when an event was triggered

Event Object
Constant Description

CAPTURING_PHASE The current event phase is the capture phase (3)

AT_TARGET The current event is in the target phase, i.e. it is being evaluated at the event target (1)

BUBBLING_PHASE The current event phase is the bubbling phase (2)


Property Description

bubbles Returns whether or not an event is a bubbling event

cancelable Returns 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 (in milliseconds relative to the epoch) at which the event was created

type Returns the name of the event

Method Description

initEvent() Specifies the event type, whether or not the event can bubble, whether or not the event's default action can be prevented

preventDefault() To cancel the event if it is cancelable, meaning that any default action normally taken by the implementation as a result of
the event will not occur

stopPropagation() To prevent further propagation of an event during event flow

EventTarget Object
addEventListener() Allows the registration of event listeners on the event target (IE8 = attachEvent())

dispatchEvent() Allows to send the event to the subscribed event listeners (IE8 = fireEvent())

removeEventListener() Allows the removal of event listeners on the event target (IE8 = detachEvent())

EventListener Object
Method Description

handleEvent() Called whenever an event occurs of the event type for which the EventListener interface was registered

DocumentEvent Object
Method Description

createEvent()

You might also like