JavaScript Kit > DOM Reference > Here
DOM Element properties
Below lists the DOM properties that can be used on most elements in a document:
DOM Element properties
Properties | Description |
---|---|
attributes[] | Returns an array (NamedNodeMap) containing all the attributes
defined for the element in question, including custom attributes.
IE6 returns not just attributes explicitly defined by the webmaster,
but those of the element's internal DTD as well. In Firefox,
attributes[] work more as expected, returning only user defined
attributes, and even reflect changes done by scripting to an
attribute. Each attribute[] element returned supports a name and value property to retrieve additional information about the attribute. Example(s): var
imageattributes=document.getElementById("myimage").attributes |
childNodes[] | Returns an array of all of the child nodes of an
element as objects. Use the properties "nodeName" and "nodeType" to
retrieve additional information about a node. Example(s): //access some <ul> element |
className | Returns the CSS class attribute of an element.
Read/write. Example(s):
document.getElementById("test").className="class1" //Assign the
class "class1" to element |
clientWidth | A cross browser (NS7+, IE4+) property that returns
the viewable width of the content on the page, not including
borders, margins, or scrollbars (overflowing content). Example(s): var pagewidth=document.body.clientWidth |
clientHeight | A cross browser (NS7+, IE4+) property that returns the viewable height of the content on the page, not including borders, margins, or scrollbars (overflowing content). |
dir | Read/write property that returns the text direction
of the element. Valid values are "ltr" (left to right) and "rtl"
(right to left). Default is "ltr." Example(s): document.getElementById("mydiv").dir="rtl" //change text direction |
firstChild | Returns a reference to the first child of an element. |
id | Read/write property that reflects the ID attribute of an element. Use this property to access any element on the page easily. |
innerHTML | A cross browser (non W3C DOM) property that lets you
easily change the HTML contents of an element. Generally this
property can only be invoked after the document has fully loaded. Example(s): <p><b>Old paragraph text</b></p> |
lang | Read/write property that specifies the language of an element's attribute values and text content. Commonly invoked on the body level to determine the base language of the document. |
lastChild | Returns a reference to the last child of an element. |
localName | Returns the name of the node of an XML element. Equivilant to the nodeName property for regular HTML elements. |
namespaceURI | Returns the URI string assigned to the xmlns attribute of an XML element. |
nextSibling | Returns the next node following the current one. Returns null if there are none or for text nodes inside an element. |
nodeName | Returns a string indicating the name of the node, in
the case of elements, its tag name. Returned value is in uppercase. Example(s): if
(document.getElementById("test").firstChild.nodeName=="DIV") |
nodeType | Returns an integer indicating the type of a node.
See chart for what each integer value
represents. Example(s): alert(document.getElementById("adiv").nodeType) //DIV element. Alerts 1 |
nodeValue | Read/write property that reflects the value of a
node. For text nodes, the content of the node is returned, while for
attribute nodes, the attribute value. Null is returned for Document
and element nodes. Use this property to alter the contents of a text
or attribute node. Example(s): <body> |
offsetLeft | Gets the horizontal offset position of the current element relative to its offset container. Read only. Use "offsetParent" to determine what an element's container is. Typically a positioned DIV or TABLE will act as an offset container to any element contained inside them. |
offsetTop | Gets the vertical offset position of the current element relative to its offset container. Read only. Use "offsetParent" to determine what an element's container is. |
offsetParent | Returns the offset container of the current element.
For most elements on the page, the "BODY" is their offset container.
However, a positioned DIV for example creates its own offset
container space. Example(s): <body> |
offsetWidth | A cross browser (non W3C DOM) property that returns the width of the element, including borders and padding if any, but not margins. In IE6, if a valid doctype is not specified, margins/padding are NOT included in the returned value. |
offsetHeight | A cross browser (non W3C DOM) property that returns the height of the element, including borders and padding if any, but not margins. In IE6, if a valid doctype is not specified, margins/padding are NOT included in the returned value. |
ownerDocument | Returns the document object that contains the current node. |
parentNode | References the node that is the parent of the current one in the document tree. |
prefix | Returns the namespace prefix of the current XML
node, or null if not available. |
previousSibling | Returns the previous node relative the current one in the document tree. Returns null if there are none or for text nodes inside an element. |
scrollLeft | A cross browser (NS7+, IE4+) property that returns the distance between the actual left edge of the element and its left edge currently in view. In a horizontally scrollable DIV for example, as you drag the scrollbar to the right, the DIV's scrollLeft property increases as the distance between its actual left edge and visible left edge increases. Applicable to scrollable elements, such as a DIV with scrollbars, a textarea, the BODY etc. |
scrollTop | A cross browser (NS7+, IE4+) property that returns
the distance between the actual top edge of the element and its top
edge currently in view. Most commonly invoked on the BODY element
for the purpose of positioning an element on the page so
it's always
visible. Example(s): <div id="static" style="width:150px;
height:150px; position: absolute; border:1px solid yellow; left:
5px;">Some text</div> |
scrollHeight | A cross browser (NS7+, IE4+) property that returns the entire height of an element, including any area that may be hidden due to scrollbars. When the element does not contain vertical scrollbars, its scrollHeight is equal to its clientHeight. |
scrollWidth | A cross browser (NS7+, IE4+) property that returns the entire width of an element, including any area that may be hidden due to scrollbars. When the element does not contain horizontal scrollbars, its scrollWidth is equal to its clientWidth. |
style | References the style object of an element, in turn
accessing and modifying individual style attributes' values. Example(s): document.getElementById("test").style.backgroundColor="yellow" |
tabIndex | Gets/sets the tab order of the current element. |
tagName | Returns the name of the tag of an element as a string and in uppercase. |
title | Read/write property that returns the title of the document or "title" attribute of an element when invoked on an element. |
DD CSS Library
Free CSS menus and codes to give your site a visual boost.