element

Table of contents

  1. 1. Properties
  2. 2. Methods
  3. 3. Event handlers
  4. 4. Other Events
  5. 5. Constants

« Gecko DOM Reference

This chapter provides a brief reference for the general methods, properties, and events available to most HTML and XML elements in the Gecko DOM.

Various W3C specifications apply to elements:

The articles listed here span the above and include links to the appropriate W3C DOM specification.

While these interfaces are generally shared by most HTML and XML elements, there are more specialized interfaces for particular objects listed in the DOM HTML Specification. Note, however, that these HTML interfaces are "only for [HTML 4.01] and [XHTML 1.0] documents and are not guaranteed to work with any future version of XHTML." The HTML 5 draft does state it aims for backwards compatibility with these HTML interfaces but says of them that "some features that were formerly deprecated, poorly supported, rarely used or considered unnecessary have been removed." One can avoid the potential conflict by moving entirely to DOM XML attribute methods such as getAttribute().

Html , Head , Link , Title , Meta , Base , IsIndex , Style , Body , Form , Select , OptGroup , Option, Input , TextArea , Button , Label , FieldSet , Legend , UList , OList , DList , Directory , Menu , LI , Div , Paragraph , Heading , Quote , Pre , BR , BaseFont , Font , HR , Mod , Anchor , Image , Object , Param , Applet , Map , Area , Script , Table , TableCaption , TableCol , TableSection , TableRow , TableCell , FrameSet , Frame , IFrame

Properties

Name Description Type Availability
attributes All attributes associated with an element. NamedNodeMap All
baseURI Base URI as a string String HTML, XUL
baseURIObject New in Firefox 3 The read-only nsIURI object representing the base URI for the element. nsIURI All (with UniversalXPConnect privileges)
childElementCount New in Firefox 3.5 The number of child nodes that are elements. Number

HTML, XUL

childNodes All child nodes of an element. A live nsIDOMNodeList of the current child elements. NodeList All
children Requires Gecko 1.9 All child nodes of an element as a collection. HTMLCollection HTML, XUL
classList Requires Gecko 1.9.2 Token list of class attribute DOMTokenList HTML
className Gets/sets the class of the element. String HTML, XUL
clientHeight The inner height of an element. Number HTML
clientLeft The width of the left border of an element. Number HTML
clientTop The width of the top border of an element. Number HTML
clientWidth The inner width of an element. Number HTML
contentEditable Requires Gecko 1.9 Gets/sets whether or not the element is editable. String HTML, XUL
dataset Allows access to read and write custom data attributes on the element. DOMStringMap HTML
dir Gets/sets the directionality of the element. String HTML, XUL
firstChild The first direct child node of an element, or null if this element has no child nodes. Node All
firstElementChild Requires Gecko 1.9 The first direct child element of an element, or null if the element has no child elements. Element HTML, XUL
id Gets/sets the id of the element. String HTML, XUL
innerHTML Gets/sets the markup of the element's content. String HTML
isContentEditable Requires Gecko 2 Indicates whether or not the content of the element can be edited. Read only. Boolean HTML, XUL
lang Gets/sets the language of an element's attributes, text, and element contents. String HTML
lastChild The last direct child node of an element, or null if this element has no child nodes. Node All
lastElementChild Requires Gecko 1.9 The last direct child element of an element, or null if the element has no child elements. Element HTML, XUL
localName The local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. Requires Gecko 1.9.2 String All
Name Description Type Availability
name Gets/sets the name attribute of an element. String HTML
namespaceURI The namespace URI of this node, or null if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. Requires Gecko 1.9.2 String All
nextSibling The node immediately following the given one in the tree, or null if there is no sibling node. Node All
nextElementSibling New in Firefox 3.5 The element immediately following the given one in the tree, or null if there's no sibling node. Element HTML, XUL
nodeName The name of the node. String All
nodePrincipal New in Firefox 3 The node's principal. nsIPrincipal All (with UniversalXPConnect privileges)
nodeType A number representing the type of the node. Is always equal to 1 for DOM elements. Number All
nodeValue The value of the node. Is always equal to null for DOM elements. String All
offsetHeight The height of an element, relative to the layout. Number HTML
offsetLeft The distance from this element's left border to its offsetParent's left border. Number HTML
offsetParent The element from which all offset calculations are currently computed. Element HTML
offsetTop The distance from this element's top border to its offsetParent's top border. Number HTML
offsetWidth The width of an element, relative to the layout. Number HTML
outerHTML
Requires Gecko 11
Gets the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string. String HTML
ownerDocument The document that this node is in, or null if the node is not inside of one. Document All
Name Description Type Availability
parentNode The parent element of this node, or null if the node is not inside of a DOM Document . Node All
prefix The namespace prefix of the node, or null if no prefix is specified. String All
previousSibling The node immediately preceding the given one in the tree, or null if there is no sibling node. Node All
previousElementSibling New in Firefox 3.5 The element immediately preceding the given one in the tree, or null if there is no sibling element. Element HTML, XUL
schemaTypeInfo Returns TypeInfo regarding schema information for the element (also available on Attr ). TypeInfo Not supported
scrollHeight The scroll view height of an element. Number HTML
scrollLeft Gets/sets the left scroll offset of an element. Number HTML
scrollTop Gets/sets the top scroll offset of an element. Number HTML
scrollWidth The scroll view width of an element. Number HTML
spellcheck Controls spell-checking (present on all HTML elements) Boolean HTML
style An object representing the declarations of an element's style attributes. CSSStyleDeclaration HTML, XUL
tabIndex Gets/sets the position of the element in the tabbing order. Number HTML
tagName The name of the tag for the given element. String All
textContent Gets/sets the textual contents of an element and all its descendants. String All
title A string that appears in a popup box when mouse is over the element. String HTML

Methods

Name & Description Return Availability
addEventListener ( type, listener, useCapture )
Register an event handler to a specific event type on the element.
- All
appendChild ( appendedNode )
Insert a node as the last child node of this element.
Node All
blur ()
Removes keyboard focus from the current element.
- HTML, XUL
click ()
Simulates a click on the current element.
- HTML, XUL
cloneNode ( deep )
Clone a node, and optionally, all of its contents.
Node All
compareDocumentPosition ( otherNode ) Number All
dispatchEvent ( event )
Dispatch an event to this node in the DOM.
Boolean All
focus ()
Gives keyboard focus to the current element.
- HTML, XUL
getAttribute ( name )
Retrieve the value of the named attribute from the current node.
Object All
getAttributeNS ( namespace, name )
Retrieve the value of the attribute with the specified name and namespace, from the current node.
Object All
getAttributeNode ( name )
Retrieve the node representation of the named attribute from the current node.
Attr All
getAttributeNodeNS ( namespace, name )
Retrieve the node representation of the attribute with the specified name and namespace, from the current node.
Attr All
getBoundingClientRect ( )    

getClientRects ( )
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.

   
Name & Description Return Availability
getElementsByClassName ( ) NodeList  
getElementsByTagName ( name )
Retrieve a set of all descendant elements, of a particular tag name, from the current element.
NodeList All
getElementsByTagNameNS ( namespace, name )
Retrieve a set of all descendant elements, of a particular tag name and namespace, from the current element.
NodeList All
getFeature ( feature, version ) Object All
getUserDatakey ) DOMUserData All
hasAttribute ( name )
Check if the element has the specified attribute, or not.
Boolean All
hasAttributeNS ( namespace, name )
Check if the element has the specified attribute, in the specified namespace, or not.
Boolean All
hasAttributes ()
Check if the element has any attributes, or not.
Boolean All
hasChildNodes ()
Check if the element has any child nodes, or not.
Boolean All
insertBefore ( insertedNode , adjacentNode )
Inserts the first node before the second, child, Node in the DOM.
Node All
isDefaultNamespace ( namespaceURI ) Boolean All
isEqualNode ( nodeArg ) Boolean All
isSameNode ( otherNode Boolean All
isSupported ( feature, version ) Boolean All
lookupNamespaceURI ( prefix ) String All
lookupPrefix ( namespaceURI ) String All
mozMatchesSelector ( selector )
Returns whether or not the element would be selected by the specified selector string.
Boolean All
mozRequestFullScreen ( ) Non-standard
Asynchronously asks the browser to make the element full-screen.
- All
normalize ()
Clean up all the text nodes under this element (merge adjacent, remove empty).
- All
querySelector ( selectors[, nsresolver] ) New in Firefox 3.5 Node All
querySelectorAll ( selectors[, nsresolver] ) New in Firefox 3.5 NodeList All
removeAttribute ( name )
Remove the named attribute from the current node.
- All
removeAttributeNS ( namespace, name )
Remove the attribute with the specified name and namespace, from the current node.
- All
Name & Description Return Availability
removeAttributeNode ( attrNode )
Remove the node representation of the named attribute from the current node.
- All
removeChild ( removedNode )
Removes a child node from the current element.
Node All
removeEventListener ( type, handler, useCapture )
Removes an event listener from the element.
- All
replaceChild ( insertedNode , replacedNode )
Replaces one child node in the current element with another.
Node All
scrollIntoView ( alignWithTop )
Scrolls the page until the element gets into the view.
- HTML
setAttribute ( name, value )
Set the value of the named attribute from the current node.
- All
setAttributeNS ( namespace, name, value )
Set the value of the attribute with the specified name and namespace, from the current node.
- All
setAttributeNode ( name, attrNode )
Set the node representation of the named attribute from the current node.
- All
setAttributeNodeNS ( namespace, name, attrNode )
Set the node representation of the attribute with the specified name and namespace, from the current node.
- All
setCapture ( retargetToElement )
Sets up mouse event capture, redirecting all mouse events to this element.
- All

setIdAttribute (name, isIdBoolean)
Sets the attribute to be treated as an ID type attribute.

- Not supported
setIdAttributeNS ( namespaceURI, localName, isIdBoolean )
Sets the attribute to be treated as an ID type attribute.
- Not supported
setIdAttributeNode ( idAttr, isIdBoolean )
Sets the attribute to be treated as an ID type attribute.
- Not supported
setUserData ( key, data , handler ) DOMUserData All
insertAdjacentHTML ( position , text )
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
- All

Event handlers

These are properties that correspond to the HTML 'on' event attributes.

Unlike the corresponding attributes, the values of these properties are functions (or any other object implementing the EventListener interface) rather than a string. In fact, assigning an event attribute in HTML creates a wrapper function around the specified code. For example, given the following HTML:

<div onclick="foo();">click me!</div>

If element is a reference to this div, the value of element.onclick is effectively:

function onclick(event) {
   foo();
}

Note how the event object is passed as parameter event to this wrapper function.

Gecko 9.0 note
(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

Starting in Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) , you can now use the syntax if ("onabort" in element) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

element.onafterscriptexecute Requires Gecko 2.0 Non-standard
The event handling code for the afterscriptexecute event; this is used only for <script> elements.
element.onbeforescriptexecute Requires Gecko 2.0 Non-standard
The event handling code for the beforescriptexecute event; this is used only for <script> elements.
oncopy New in Firefox 3
Returns the event handling code for the copy event.
oncut New in Firefox 3
Returns the event handling code for the cut event.
onpaste New in Firefox 3
Returns the event handling code for the paste event.
onbeforeunload
Returns the event handling code for the beforeunload event.
onblur
Returns the event handling code for the blur event.
onchange
Returns the event handling code for the change event.
onclick
Returns the event handling code for the click event.
oncontextmenu
Returns the event handling code for the contextmenu event.
ondblclick
Returns the event handling code for the dblclick event.
onfocus
Returns the event handling code for the focus event.
onkeydown
Returns the event handling code for the keydown event.
onkeypress
Returns the event handling code for the keypress event.
onkeyup
Returns the event handling code for the keyup event.
onmousedown
Returns the event handling code for the mousedown event.
onmousemove
Returns the event handling code for the mousemove event.
onmouseout
Returns the event handling code for the mouseout event.
onmouseover
Returns the event handling code for the mouseover event.
onmouseup
Returns the event handling code for the mouseup event.
onresize
Returns the event handling code for the resize event.
onscroll
Returns the event handling code for the scroll event.

Other Events

There are also other DOM Events like DOMSubtreeModified, DOMAttrModified etc. as well as Gecko-Specific DOM Events like DOMContentLoaded, DOMTitleChanged etc.

Constants

See Node for those constants which Element inherits.

Tags (4)

Edit tags

Attachments (0)

 

Attach file