Categories:

JavaScript Kit > DOM Reference > Here

DOM Element properties

Last updated: Februrary 27th, 2006

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

imageattributes[0].name //name of the first attribute of "myimage"

imageattributes[0].value //value of the first attribute of "myimage"

imageattributes.getNamedItem("src").value //value of the "src" property of "myimage"

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
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
if (mylist.childNodes[i].nodeName=="LI")
//do something
}

className Returns the CSS class attribute of an element. Read/write.

Example(s):

document.getElementById("test").className="class1" //Assign the class "class1" to element

document.getElementById("test").className+=" class2" //Assign an additional "class2" class 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>
<script type="text/javascript">
window.onload=function(){
document.getElementsByTagName("p")[0].innerHTML="<b>new paragraph text</b>"
}
</script>

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")
alert("This is a 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>
<div id="test">Old text</div>

<script type="text/javascript">
if (document.getElementById("test").firstChild.nodeName=="#text")
document.getElementById("test").firstChild.nodeValue="New text"

</script>

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>
<div id="master" style="position: relative">
<div id="slave" style="position: relative">test</div>
</div>

<script type="text/javascript">
alert(document.getElementById("slave").offsetParent.id) //alerts "master"
</script>

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>


<script type="text/javascript">
//Keep "static" always in view on the page
setInterval("document.getElementById('static').style.top=document.body.scrollTop+10+'px'", 50)
</script>

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.
Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table
Miscellaneous

 

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.