Non-Standard | FireFox 3+ Returns the nsIURI object representing the element's URI.

Note: This property exists on all elements (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has UniversalXPConnect privileges.

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0 1.0 2.0 9.62 10.0b

Returns the current number of element nodes that are children of this element. 0 if this element has no child nodes that are of nodeType 1.

See also

? | FireFox 3.5+ Returns a collection of child elements of the given element.

The list returned is an ordered collection of element objects that are children of the current element. If the element has no children, then list returned contains no elements.

Note: The items in the collection of elements are objects and not strings. To get data from those node objects, you must use their properties (e.g. elementNodeReference.children[1].nodeName to get the name, etc.).

         // parg is an object reference to a <p> element
         if (parg.childElementCount()) {
             // So, first we check if the object is not empty, if the object has child nodes
             var children = parg.children;
             for (var i = 0; i < children.length; i++) {
             // do something with each child element as children[i]
             // NOTE: List is live, Adding or removing children will change the list
             };
         };
         

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

Note: offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for span elements in flowed text that wraps from one line to the next. The span may start in the middle of the page and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.

See also

         <div id=oDiv style="overflow:scroll; width:200; height:100"> . . . </div>
         <button onclick="alert(oDiv.clientHeight)">client height</button>
         <button onclick="alert(oDiv.offsetHeight)">offset heightY</button>

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

The width of the left border of an element in pixels.

It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding.

Note: The difference between the offsetLeft and clientLeft properties is the border of the object.

Note: When layout.scrollbar.side property is set to 1 or to 3 and when the text-direction is set to RTL, then the vertical scrollbar is positioned on the left and this impacts the way clientLeft is computed.

See also

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

The width of the top border of an element in pixels. It does not include the top margin or padding.

Note: The difference between the offsetTop and the clientTop properties is the border area of the object.

See also

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Returns the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

See also

         <div id=oDiv style="overflow:scroll; width:200; height:100"> . . . </div>
         <button onclick="alert(oDiv.clientWidth)">client width</button>
         <button onclick="alert(oDiv.offsetWidth)">offset widthY</button>

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0 1.0 2.0 9.62 10.0b

Returns the first child element node of this element. null if this element has no child elements.

See also

         <p id="para-01">
             <span>First span</span>
         </p>
         
         <script type="text/javascript">
             var p01 = document.getElementById('para-01');
             alert(p01.firstElementChild.nodeName);
         </script>

DOM Level 0 | NS\FireFox\IE4+ Sets or gets all of the markup and content within a given element.

Note: As there is no public specification for this property, implementations differ widely. For example, when text is entered into a text input, IE will change the value attribute of the input's innerHTML property but Gecko browsers do not.

Note: It should never be used to write parts of a table—W3C DOM methods should be used for that—though it can be used to write an entire table or the contents of a cell.

         // HTML:
         // <div id="d"><p>Content</p>
         // <p>Further Elaborated</p>
         // </div>
         
         d = document.getElementById("d");
         dump(d.innerHTML);
         
         // the string "<p>Content</p><p>Further Elaborated</p>"
         // is dumped to the console window
         

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0 1.0 2.0 9.62 10.0b

Returns the last child element node of this element. null if this element has no child elements.

See also

         <p id="para-01">
             <span>First span</span>
             <b>bold</b>
         </p>
         
         <script type="text/javascript">
             var p01 = document.getElementById('para-01');
             alert(p01.lastElementChild.nodeName);
         </script>

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0 1.0 2.0 9.62 10.0b

Returns the next sibling element node of this element. null if this element has no element sibling nodes that come after this one in the document tree.

See also

         <div id="div-01">Here is div-01</div>
         <div id="div-02">Here is div-02</div>
         
         <script type="text/javascript">
             var el = document.getElementById('div-01').nextElementSibling;
             document.write('<p>Siblings of div-01</p><ol>');
             while (el) {
                 document.write('<li>' + el.nodeName + '</li>');
                 el = el.nextElementSibling;
             }
             document.write('</ol>');
         </script>

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Height of an element relative to the element's offsetParent.

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.

Note (IE6): To comply with the Cascading Style Sheets, Level 1 (CSS1) World Wide Web link box model, Microsoft Internet Explorer 6 and later calculate the height of objects differently when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode. This difference may affect the value of the offsetWidth propety. When standards-compliant mode is switched on, the width property specifies the distance between the left and right edges of the bounding box that surrounds the object's content. When standards-compliant mode is not switched on, and with earlier versions of Windows Internet Explorer, the width property also includes the border and padding belts that surround the object's bounding box.

See also

         <html>
         <head>
         <title>A Simple Clock</title>
         <script type="text/javascript">
             function startClock() {
                 window.setInterval("Clock_Tick()", 1000);
                 Clock_Tick();
             }
         
             var iRatio = 4;
             function Clock_Tick() {
                 var dToday = Date();
                 var sTime = dToday.substring(11,19);
                 var iDocHeight = document.body.offsetHeight;
                 var iDocWidth = document.body.offsetWidth;
         
                 if ((iDocHeightRatio)>iDocWidth)
                 iDocHeight = iDocWidth / iRatio;
                 document.all.MyTime.innerText = sTime;
                 document.all.MyTime.style.fontSize = iDocHeight;
             }
         </script>
         </head>
         <body onload="startClock()">
         <p id="MyTime"> </p>
         </body>
         </html>

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

Note: offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as span) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.

See also

         var colorTable = document.getElementById("t1");
         var tOLeft = colorTable.offsetLeft;
         
         if (tOLeft > 5) {
             // large left offset: do something here
         }

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

The element from which all offset calculations are currently computed.

offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the root element (html in standards compliant mode; body in quirks rendering mode) is the offsetParent. offsetParent returns null when the element has style.display set to "none".

Note (IE5): In Microsoft Internet Explorer 5, the offsetParent property returns the table object for the td object.

Note (IE4): In Internet Explorer 4.0 it returns the tr object. You can use the parentElement property to retrieve the immediate container of the table cell.

See also

         <table border='1' align='right'>
             <tr>
                 <td id='oCell'>This is a small table.</td>
             </tr>
         </table>

         var oElement = document.getElementById("oCell");
         
         alert("The TD element is at (" + oElement.offsetLeft + 
         "," + oElement.offsetTop + ")\n" + "The offset parent is " 
         + oElement.offsetParent.tagName );

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Returns the distance of the current element relative to the top of the offsetParent node.

See also

         d = document.getElementById("div1");
         
         topPos = d.offsetTop;
         
         if (topPos > 10) {
             // object is offset more
             // than 10 pixels from its parent
         }

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

The width of an element, relative to the layout.

Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.

Note (IE6): To comply with the Cascading Style Sheets, Level 1 (CSS1) World Wide Web link box model, Microsoft Internet Explorer 6 and later calculate the height of objects differently when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode. This difference may affect the value of the offsetWidth propety. When standards-compliant mode is switched on, the width property specifies the distance between the left and right edges of the bounding box that surrounds the object's content. When standards-compliant mode is not switched on, and with earlier versions of Windows Internet Explorer, the width property also includes the border and padding belts that surround the object's bounding box.

See also

         <div id=oDiv STYLE="overflow:scroll; width:200; height:100"> . . . </div>
         <button onclick="alert(oDiv.clientWidth)">client width</button>
         <button onclick="alert(oDiv.offsetWidth)">offset width</button>

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0 1.0 2.0 9.62 10.0b

Returns the previous sibling element node of this element. null if this element has no element sibling nodes that come before this one in the document tree.

See also

         <div id="div-01">Here is div-01</div>
         <div id="div-02">Here is div-02</div>
         <li>This is a list item</li>
         <li>This is another list item</li>
         <div id="div-03">Here is div-03</div>
         
         <script type="text/javascript">
             var el = document.getElementById('div-03').previousElementSibling;
             document.write('<p>Siblings of div-03</p><ol>');
             while (el) {
                 document.write('<li>' + el.nodeName + '</li>');
                 el = el.previousElementSibling;
             }
             document.write('</ol>');
         </script>

DOM Level 3 | None The type information associated with this element.

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Height of the scroll view of an element; it includes the element padding but not its margin.

An element's scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow.

If the element's content generated a vertical scrollbar, the scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. When an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property.

See also

         <script type="text/javascript">
             function fnCheckScroll(){
                 var iNewHeight = oDiv.scrollHeight;
                 alert("The value of the scrollHeight property is: " 
                 + iNewHeight + "px"); 
             }
         </script>
         ...
         <div id="oDiv" style="overflow: scroll; height= 100px; width= 250px; text-align: left">
             ... 
         </div>
         <button onclick="fnCheckScroll()">Check scrollHeight</button>

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Gets or sets the number of pixels that an element's content is scrolled to the left.

See also

         // Set the number of pixels scrolled
         element.scrollLeft = 10;

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Gets or sets the number of pixels that the content of an element is scrolled upward.

An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content.

When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.

See also

         // Get the number of pixels scrolled
         var  intElemScrollTop = element.scrollTop;

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater.

If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than the clientWidth.

See also

         <div id="aDiv" style="width: 100px; height: 200px; overflow: auto;">
             -FooBar-FooBar-FooBar
         </div>
         <br/>
         <input type="button" value="Show scrollWidth"
         onclick="alert(document.getElementById('aDiv').scrollWidth);">

Product Versions :

5.0 1.0 8.0 1.3

The name of the element. If Node.localName is different from null, this attribute is a qualified name.

Product Version :

5.5

Attaches a behavior to the element.

This method, and the following remarks, apply only to attached behaviors, which are the original Dynamic HTML (DHTML) behaviors introduced in Microsoft Internet Explorer 5. Element behaviors are a feature in Internet Explorer 5.5 and cannot be added to or removed from an element.

This method enables you to attach a behavior without using Cascading Style Sheets (CSS).

Unless the specified behavior in the addBehavior call is one of the default behaviors built into Internet Explorer, the addBehavior call causes Internet Explorer to download the behavior asynchronously, before the behavior is attached to the element.

Due to the asynchronous nature of the addBehavior method, its return value cannot be relied on to determine whether the behavior was successfully applied to the element. Waiting for the onreadystatechange event to fire and verifying that the readyState property of the element is set to complete ensure that the behavior is completely attached to the element, and that all the behavior's members are available for scripting. Otherwise, attempting to use any behavior-defined member before the behavior is attached to the element results in a scripting error indicating that the object does not support that particular member.

Note : A behavior attached to an element using the addBehavior method, or by applying the proposed CSS behavior attribute inline, is not automatically detached from the element when the element is removed from the document hierarchy. However, a behavior attached using a style rule defined in the document is detached automatically as the element is removed from the document tree.

Parameters

         <SCRIPT LANGUAGE="JScript">
         var collBehaviorID = new Array();
         var collLI = new Array ();
         var countLI = 0;
         
         function attachBehavior() {
             collLI = document.all.tags("LI");
             countLI = collLI.length;
             for (i=0; i < countLI; i++) {
                 var iID = collLI[i].addBehavior("hilite.htc");
         
                 if (iID) collBehaviorID[i] = iID;
             }
         }
         </SCRIPT>
         
         //Click <A HREF="javascript:attachBehavior()">here</A>
         //to add a highlighting effect as you hover over each item below.
         

Product Version :

1.0

Makes the element either a child or parent of another element.

Parameters

         <SCRIPT>
         function fnApply() {
             var oNewNode = document.createElement("I");
             oList.applyElement(oNewNode);
         }
         </SCRIPT>
         
         <UL ID = oList>
         <LI>List item 1
         <LI>List item 2
         <LI>List item 3
         <LI>List item 4
         </UL>
         <INPUT TYPE="button" VALUE="Apply Element" onclick="fnApply()">
         

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Binds the specified function to an event, so that the function gets called whenever the event fires on the object.

Parameters

See also

if (window.attachEvent) window.attachEvent("onload", statusreport); //invoke function

Product Version :

5.0

Removes all attributes and values from the object.

The clearAttributes method clears only persistent HTML attributes. The ID attribute, styles, and script-only properties are not affected.

Product Version :

5.0

Returns the component located at the specified coordinates via certain events.

IE Note: The componentFromPoint method, available as of Microsoft Internet Explorer 5, is applicable to any object that can be given scroll bars through Cascading Style Sheets (CSS).

The componentFromPoint method might not return the same object consistently when it is used with the onmouseover event. Because a user's mouse speed and entry point can vary, different components of an element can fire the onmouseover event. For example, when a user moves the cursor over a textArea object with scroll bars, the event might fire when the mouse enters the component border, the scroll bars, or the client region. After the event fires, the expected element might not be returned, unless the scroll bars were the point of entry for the mouse. In this case, the onmousemove event can be used to provide more consistent results.

For the object's sizing handles to appear, designMode must be On, and the object must be selected.

Parameters

Product Version :

1.0

Checks whether the given element is contained within the object.

Parameters

Product Version :

1.0

Creates a controlRange collection of nontext elements.

IE Note: Creates a selection range object for control-based selection rather than text-based selection.

If a controlRange already exists, createControlRange overwrites the existing element; otherwise, it returns a pointer to the element created.

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Unbinds the specified function from the event, so that the function stops receiving notifications when the event fires.

Note (IE): Behaviors that attach to events using the attachEvent method must explicitly call the detachEvent method to stop receiving notifications from the page when the ondetach event fires. Behaviors that attach to events using the PUBLIC:ATTACH element automatically stop receiving notifications when the behavior detaches from the element, and thus do not need to call the detachEvent method.

Parameters

See also

         <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
         
         <script language="JScript">
         attachEvent ('onmouseover', Hilite);
         attachEvent ('onmouseout', Restore);
         
         function cleanup() {
             detachEvent ('onmouseover', Hilite);
             detachEvent ('onmouseout', Restore);
         }
         
         function Hilite() {
             if (event.srcElement == element) { 
                 normalColor = style.color;  
                 runtimeStyle.color  = "red";
                 runtimeStyle.cursor = "hand";
             }
         }
         
         function Restore() {
             if (event.srcElement == element) {
                 runtimeStyle.color  = normalColor;
                 runtimeStyle.cursor = "";
             }
         }
         </script>

Product Version :

5.0

Simulates a click on a scroll-bar component.

Cascading Style Sheets (CSS) allow you to scroll on all objects through the overflow property.

When the content of an element changes and causes scroll bars to display, the doScroll method might not work correctly immediately following the content update. When this happens, you can use the setTimeout method to enable the browser to recognize the dynamic changes that affect scrolling.

Parameters

Product Version :

1.0

Initiates a drag event.

You can use this method to fire the ondragstart event. If the event is not cancelled, a drag operation is started. The method returns true when the mouse is released. If the ondragstart event is cancelled, the method returns false immediately

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Fires a specified event on the object.

If the event being fired cannot be cancelled, fireEvent always returns true.

Regardless of their values specified in the event object, the values of the four event properties—cancelBubble, returnValue, srcElement, and type—are automatically initialized to the values shown in the following table.

• cancelBubble : false
• returnValue : true
• srcElement : element on which the event is fired
• type : name of the event that is fired

Parameters

See also

Product Version :

1.0

Returns the adjacent text string.

Parameters

Product Versions :

5.0 1.0 7.0 1.0

Returns the value of the named attribute on the specified element.

If the named attribute does not exist, the value returned will either be null or "" (the empty string).

Note: Essentially all web browsers (Firefox, Internet Explorer, recent versions of Opera, Safari, Konqueror, and iCab, as a non-exhaustive list) return null when the specified attribute does not exist on the specified element. The DOM specification says that the correct return value in this case is actually the empty string, and some DOM implementations implement this behavior. The implementation of getAttribute in XUL (Gecko) actually follows the specification and returns an empty string. Consequently, you should use hasAttribute to check for an attribute's existence prior to calling getAttribute() if it is possible that the requested attribute does not exist on the specified element.

The attributeName parameter is usually case sensitive, but it is case-insensitive when used upon HTML elements.

Parameters

         var div1 = document.getElementById("div1");
         var align = div1.getAttribute("align");
         alert(align); // shows the value of align for the element with id="div1"

Product Versions :

6.0 1.0 7.0 1.0

Returns the Attr node for the attribute with the given name.

Note: (IE8+) In IE8 mode, getAttributeNode correctly populates the value property of the returned attribute object regardless of whether the specified property is set to true or false. For more information on IE8 mode, see Defining Document Compatibility.

Note: (IE8+) In IE8 mode, the value property is correctly reported as a canonical attribute name. For example, <input type="text" readonly> and <input type="text" readonly="readonly"> would both set the input text field to read-only. In IE8 mode, the value is evaluated as a cannonical value, "readonly". In IE7 and earlier modes, it is evaluated as a Boolean value, true.

Parameters

See also

Product Versions :

1.0 8.0

Returns the Attr node for the attribute with the given namespace and name.

Parameters

Product Versions :

1.0 8.0

Returns the string value of the attribute with the specified namespace and name.

If the named attribute does not exist, the value returned will either be null or "" (the empty string).

Parameters

         var div1 = document.getElementById("div1");
         var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/", "special-align");
         alert(a); // shows the value of align for that div

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Retrieves an object that specifies the bounds of a collection of TextRectangle objects.

Note (IE8): In IE8 mode, the bounding rectangle is the same as the client rectangle.

Note (IE5): In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

Note (Firefox 3.5): Firefox 3.5 adds width and height properties to the TextRectangle object.

Note (Firefox): Firefox doesn't round the top/bottom coordinates.

See also

         var rects = obj.getClientRects();
         var numLines = rects.length;

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client. Each rectangle describes a single line.

Note (IE8): In IE8 mode, getClientRects always returns a collection of one rectangle—the same rectangle as getBoundingClientRect.

Note (IE): In IE5-7, split up a block-level element such as a <p> into one rectangle per line. This is incorrect: a block-level element should be reported as one rectangle.

Note (IE): In IE5-7, the rectangles are off by about two pixels. According to John Resig this is caused by the (invisible, but nonetheless present) borders of the <html> element.

Note (Firefox 3.5): Firefox 3.5 adds width and height properties to the TextRectangle object.

Note (Firefox): Firefox doesn't round the top/bottom coordinates.

See also

var rect = obj.getBoundingClientRect();

Product Version :

3.0

Returns a set of elements with the given class name.

When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName on any element; it will return only elements under the specified root element with the given class name.

Parameters

         //Get all elements that have a class of 'test' 
         document.getElementsByClassName('test');
         //Get all elements that have a class of 'red' and 'test' 
         document.getElementsByClassName('red test');

Product Versions :

5.0 1.0 7.0 1.0

Retrieves a collection of objects based on the specified element name.

Parameters

         // check the alignment on a number of cells in a table. 
         var table = document.getElementById("forecast-table"); 
         var cells = table.getElementsByTagName("td"); 
         for (var i = 0; i < cells.length; i++) { 
                 status = cells[i].getAttribute("status"); 
                 if ( status == "open") { 
                     // grab the data 
                 }
         }

Product Versions :

1.0 8.0

Returns a list of elements with the given tag name belonging to the given namespace.

Parameters

Product Version :

5.0

Retrieves the expression for the given property.

Parameters

         <body>
         <span id="trueBlueSpan" style="background-color:lightblue; width:100px">
         The width of this blue span is set inline at 100 pixels.
         </span>
         <span id="oldYellowSpan" style="background-color:lightyellow; width:200px">
         The width of this yelllow span is set inline at 200 pixels.
         </span>
         <br>
         <span id="AlGreenSpan" style="background-color:lightgreen; width:expression(trueBlueSpan.style.pixelWidth + oldYellowSpan.style.pixelWidth)">
         Click the button below to see the expression used to set the width of this span.
         </span>
         <br>
         <button onclick=alert(AlGreenSpan.style.getExpression("width"));>See Expression</button>
         </body>

Product Version :

1.0

DOM Level 2 | NS\FireFox Determines whether an attribute with the specified name exists.

Parameters

         // check that the attribute exists before setting a value
         var d = document.getElementById("div1"); 
         if d.hasAttribute("align") { 
                 d.setAttribute("align", "center"); 
         }

Product Versions :

1.0 8.0 1.3

Returns a boolean value indicating whether the current element has the specified attribute.

Parameters

         // check that the attribute exists 
         // before you set a value 
         var d = document.getElementById("div1"); 
         if (d.hasAttributeNS("http://www.mozilla.org/ns/specialspace/", "special-align")) {
             d.setAttribute("align", "center");
         }

Product Version :

1.0

Inserts an element at the specified location.

You cannot insert text while the document is loading. Wait for the onload event before attempting to call this method.

If you try to insert an object that already exists on the page, the existing object is moved to the point that you specified in the insertAdjacentElement method; no new object is created.

Parameters

Product Version :

4.0

Inserts the given HTML text into the element at the location.

If the text contains HTML tags, the method parses and formats the text as it is inserted.

You cannot insert text while the document is loading. Wait for the onload event to fire before attempting to call this method.

When using the insertAdjacentHTML method to insert script, you must include the DEFER attribute in the script element.

Parameters

Product Version :

1.0

Inserts the given text into the element at the specified location.

The text inserted into the element is plain text. You cannot insert text while the document loads. Wait for the onload event to fire before attempting to call this method.

Parameters

Product Version :

5.0

Copies all read/write attributes to the specified element.

The mergeAttributes method copies persistent HTML attributes, events, and styles.

IE Note: In Internet Explorer 5 and earlier, attributes that are read-only, such as ID, are not merged.

IE Note: As of Internet Explorer 5.5, by choosing not to preserve the identity of the destination object, you can merge all attributes of an object, including ID and NAME.

Parameters

Returns the first element that is a descendent of the element on which it is invoked that matches the specified group of selectors.

Parameters

See also

         <html xmlns="http://www.w3.org/1999/xhtml">
             <head>
                 <title>Selectors API Example</title>
             </head>
             <body>
         
                 <div id="foo">
                     <p class="warning">This is a sample warning</p>
                     <p class="error">This is a sample error</p>
                 </div>
                 <div id="bar">
                     <p>...</p>
                 </div>
             </body>
         </html>

var x = document.querySelector("#foo, #bar");

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5b4 3.0 3.1 4.0 1.0 2.0 9.62 10.0b

Returns a list of all elements descended from the element on which it is invoked that match the specified group of selectors.

Parameters

See also

         <html xmlns="http://www.w3.org/1999/xhtml">
             <head>
                 <title>Selectors API Example</title>
             </head>
             <body>
         
                 <div id="foo">
                     <p class="warning">This is a sample warning</p>
                     <p class="error">This is a sample error</p>
                 </div>
                 <div id="bar">
                     <p>...</p>
                 </div>
             </body>
         </html>

var alerts = document.querySelectorAll("p.warning, p.error");

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.5 3.0 3.1 4.0 1.0 2.0 9.62 10.0b

Removes mouse capture from the object in the current document.

For releaseCapture to have an effect, you must set mouse capture through the setCapture method.

You can invoke the releaseCapture method on the document object. The releaseCapture method makes it unnecessary to determine which element has capture to programmatically release it. Other actions that release document capture include displaying a modal dialog box and switching focus to another application or browser window.

See also

         <BODY onload="oOwnCapture.setCapture();" onclick="document.releaseCapture();">
         <DIV ID=oOwnCapture onmousemove="oWriteLocation.value = event.clientX + event.clientY"; onlosecapture="alert(event.srcElement.id + ' has lost mouse capture.')">
         <TEXTAREA ID=oWriteLocation COLS=2></TEXTAREA>
         </DIV>
         <HR>
         <DIV ID=oNoCapture>
         <P>Click the document to invoke the releaseCapture method.</P>
         </DIV>
         </BODY>

Product Versions :

4.0 1.0 8.0 1.0

Removes an attribute from the specified element.

Note : You should use removeAttribute instead of setting the attribute value to null using setAttribute.

Parameters

         // <div id="div1" align="left" width="200px">
         document.getElementById("div1").removeAttribute("align"); 
         // now: <div id="div1" width="200px">

Product Versions :

6.0 1.0 8.0 1.0

Removes an attribute object from the object.

Parameters

Product Versions :

1.0 8.0

Removes the specified attribute from an element.

FF Note : In Firefox 3 and later, this method resets DOM values to their defaults.

Parameters

         // <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" special:specialAlign="utterleft" width="200px" /> 
         d = document.getElementById("div1"); 
         d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); 
         // now: <div id="div1" width="200px" />

Product Version :

5.0

Detaches a behavior from the element.

This method applies only to attached behaviors, which are the original Dynamic HTML (DHTML) behaviors introduced in Microsoft Internet Explorer 5. Element behaviors are a feature in Internet Explorer 5.5 and cannot be added or removed from an element.

Parameters

Product Version :

5.0

Removes the expression from the specified property.

After the expression is removed from the specified property, the value of the property equals the last computed value of the expression. To remove expressions set by the setExpression method, use removeExpression.

Parameters

Removes the object from the document hierarchy.

This property is accessible at run time. If elements are removed at run time, before the closing tag is parsed, areas of the document might not render.

Parameters

See also

Product Version :

1.0

Replaces the text adjacent to the element.

Parameters

Replaces the object with another element.

When a node is replaced, all values that are associated with the replaced object are removed. For example, if a b object is replaced with an i object, any attributes and text between the opening and closing tags are also replaced. To preserve these values, copy them to the new element before the original object is replaced.

This method is accessible at run time. If elements are removed at run time before the closing tag is parsed, areas of the document might not render.

Parameters

See also

         <SCRIPT>
         function fnReplace() {
         var sPreserve = oList.innerHTML;
         var oNewNode = document.createElement("OL");
         oList.replaceNode(oNewNode);
         oNewNode.innerHTML = sPreserve;
         }
         </SCRIPT>
         
         <UL ID = oList>
         <LI>List Item 1
         <LI>List Item 2
         <LI>List Item 3
         <LI>List Item 4
         </UL>
         <INPUT TYPE = button VALUE = "Replace List" onclick = "fnReplace()">

Product Versions :

5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a

Causes the object to scroll into view, aligning it either at the top or bottom of the window.

The scrollIntoView method is useful for immediately showing the user the result of some action without requiring the user to manually scroll through the document to find the result.

Depending on the size of the given object and the current window, this method might not be able to put the item at the very top or very bottom, but will position the object as close to the requested position as possible.

Parameters

         <html>
         <head>
         <title>ScrollIntoView() example</title>
         
         <script type="text/javascript">
         function showIt(elID) {
         var el = document.getElementById(elID);
         el.scrollIntoView(true);
         }
         </script>
         
         </head>
         <body>
             <div style="height: 5em; width: 30em; overflow: scroll; border: 1px solid blue;">
                 <div style="height: 100px"></div>
                 <p id="pToShow">The para to show</p>
                 <div style="height: 100px"></div>
             </div>
             <input type="button" value="Show para" onclick="showIt('pToShow');">
         </body>

Product Version :

5.5

Sets the object as active without setting focus to the object.

The setActive method does not cause the document to scroll to the active object in the current page or in another frame or window.

         <script>
         function fnBottomActive() {
                 //Set the object with ID=btnLarger active in frame with ID=oFrame1.
                 window.parent.oFrame1.secondButton.setActive();
         }
         </script>

Product Versions :

5.0 1.0 8.0 1.0

Sets the value of the specified attribute.

IE Note: Internet Explorer 8 and later. IE8 mode enables several enhancements to the setAttribute, getAttribute, and removeAttribute methods that are not available when pages are displayed in earlier document modes.

The name parameter requires the name of the desired content attribute and not the Document Object Model (DOM) attribute. For example, in IE8 mode, this method no longer requires name to be "className" when setting, getting, or removing a CLASS attribute. Earlier versions of Internet Explorer and Internet Explorer 8 in compatibility mode still require name to specify the corresponding DOM property name.

The name parameter is not case sensitive. As a result, the caseSensitive parameter is no longer supported and should not be used.

The methods support event handlers. For example, the following code example defines an event handler to call a function called SomeFunction when the body of the page is loaded.

document.body.setAttribute('onload', 'SomeFunction()');

If the specified attribute is not already present, the setAttribute method adds the attribute to the object and sets the value.

If your pages are displayed in IE5 mode or IE7 mode, be careful when spelling attribute names. If you set iCaseSensitive to 1 and the name parameter does not have the same uppercase and lowercase letters as the attribute, a new attribute is created for the object. If two or more attributes have the same name, differing only in case, and iCaseSensitive is set to 0, this method assigns values only to the first attribute created with this name. All other attributes of the same name are ignored.

New for Internet Explorer 8 Internet Explorer 8 and later. When pages are displayed in IE8 mode, the vValue parameter only supports string values. Non-string values are not automatically converted to string values. For best results, formally convert values to strings before using them as parameter values. For example, do not attempt to pass an object directly to the vValue parameter; call the object's toString method instead.

Parameters

Product Versions :

4.0 1.0 8.0 1.0

Sets an attribute object node as part of the object.

If the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.

Parameters

         // <div id="one" align="left">one</div> 
         // <div id="two">two</div> 
         var d1 = document.getElementById("one"); 
         var d2 = document.getElementById("two"); 
         var a = d1.getAttributeNode("align"); 
         d2.setAttributeNode(a.cloneNode(true)); 
         alert(d2.attributes[1].value) 
         // returns: `left'

Product Versions :

1.0 8.0

Adds a new attribute node with the specified namespace and name.

If the specified attribute already exists on the element, then that attribute is replaced with the new one and the replaced one is returned.

Note: If you try to set without cloning the node, Mozilla gives an NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR "Attribute already in use" error, as the DOM requires cloning for Attr to be reused (unlike other Nodes which can be moved).

Parameters

         // <div id="one" xmlns:myNS="http://www.mozilla.org/ns/specialspace" myNS:special-align="utterleft">one</div> 
         // <div id="two">two</div> 
         
         var myns = "http://www.mozilla.org/ns/specialspace"; 
         var d1 = document.getElementById("one"); 
         var d2 = document.getElementById("two"); 
         var a = d1.getAttributeNodeNS(myns, "special-align"); 
         d2.setAttributeNodeNS(a.cloneNode(true));
         alert(d2.attributes[1].value) // returns: `utterleft'

Product Versions :

1.0 8.0

Adds a new attribute or changes the value of an attribute with the given namespace and name.

Parameters

         var d = document.getElementById("d1");
         d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");

Product Version :

5.0

Sets the mouse capture to the object that belongs to the current document.

After mouse capture is set to an object, all mouse events for the document are routed to that object. Supported mouse events include onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, and onmouseout. The srcElement property of the window event object always returns the object that is positioned under the mouse, instead of the object that has mouse capture.

Mouse clicks automatically trigger the onlosecapture event. To retain mouse capture, call setCapture inside the onclick event handler. Mouse capture is also lost if the browser window loses focus for any reason (including alerts or pop-up windows).

When the containerCapture parameter is set to true, a container object, such as a div, captures mouse events for all objects in it. By passing the value false, objects in that container can fire events, and cancel event bubbling.

Drag-and-drop operations, such as the ondragstart event, and text selection through the user interface are disabled when mouse capture is set programmatically. The following key events are unaffected by mouse capture and fire as usual: onkeydown, onkeyup, and onkeypress.

Parameters

         <BODY onload="oOwnCapture.setCapture()" onclick="document.releaseCapture()">
         <DIV ID=oOwnCapture STYLE="background-color:#ccc;padding:6pt"
         onmousemove="oWriteLocation.value = event.x + ':' + event.y";
         onlosecapture="alert(event.srcElement.id + ' lost mouse capture.')">
         <P>Mouse capture has been set to this gray division (DIV) 
         at load time using the setCapture method. The text area will 
         track the mousemove event through the <B>x</B> 
         and <B>y</B> properties of the event object.<BR>
         <P>Event bubbling works as usual on objects within a 
         container that has mouse capture. Demonstrate this concept by 
         clicking the button below or changing the active window from 
         this one and then back. After oOwnCapture loses mouse capture, 
         the text area continues tracking the mousemove events only 
         while the cursor is over objects it contains.</P>
         <BR><BR>
         <TEXTAREA ID=oWriteLocation COLS=9> </TEXTAREA>
         </DIV>
         <HR>
         <DIV ID=oNoCapture>
         <P>This white division is here to illustrate that mousemove 
         events over objects it contains are captured on the gray 
         division, oOwnCapture.
         <INPUT VALUE="Move mouse over this object.">
         <BUTTON>Click Anywhere to End Mouse Capture</BUTTON>
         </DIV>
         </BODY>

Product Version :

5.0

Sets an expression for the specified object.

Use the setExpression method to add expressions to supported Cascading Style Sheets (CSS) attributes and read/write DHTML Properties. To remove expressions set by setExpression, use the removeExpression method.

Parameters

If the parameter isId is true, this method declares the specified attribute to be a user-determined ID attribute. This affects the value of Attr.isId and the behavior of Document.getElementById, but does not change any schema that may be in use, in particular this does not affect the Attr.schemaTypeInfo of the specified Attr node. Use the value false for the parameter isId to undeclare an attribute for being a user-determined ID attribute. To specify an attribute by local name and namespace URI, use the setIdAttributeNS method.

Parameters

If the parameter isId is true, this method declares the specified attribute to be a user-determined ID attribute. This affects the value of Attr.isId and the behavior of Document.getElementById, but does not change any schema that may be in use, in particular this does not affect the Attr.schemaTypeInfo of the specified Attr node. Use the value false for the parameter isId to undeclare an attribute for being a user-determined ID attribute.

Parameters

If the parameter isId is true, this method declares the specified attribute to be a user-determined ID attribute. This affects the value of Attr.isId and the behavior of Document.getElementById, but does not change any schema that may be in use, in particular this does not affect the Attr.schemaTypeInfo of the specified Attr node. Use the value false for the parameter isId to undeclare an attribute for being a user-determined ID attribute.

Parameters

Exchanges the location of two objects in the document hierarchy.

This method is accessible at run time. If elements are removed at run time, before the closing tag is parsed, areas of the document might not render.

Parameters

See also

         <script>
                 function fnSwap() {
                     oList.children(0).swapNode(oList.children(1));
                 }
         </script>
         
         <ul ID = oList>
                 <li>List Item 1</li>
                 <li>List Item 2</li>
                 <li>List Item 3</li>
                 <li>List Item 4</li>
         </ul>
         <input type=button value="Swap List" onclick="fnSwap()">

Loading of a resource has been aborted.

An event target loses focus. The focus is taken from the element before the dispatch of this event type.

A control loses the input focus and its value has been modified since gaining focus. This event type is dispatched before the event type blur.

A pointing device button is clicked over an element. The definition of a click depends on the environment configuration; i.e. it may depend on the screen location or the delay between the press and release of the pointing device button. In any case, the event target must be the same between the mousedown, mouseup, and click. The sequence of these events is: mousedown, mouseup, and click. It depends on the environment configuration whether the event type click can occur if one or more of the event types mouseover, mousemove, and mouseout occur between the press and release of the pointing device button. In addition, the event type is dispatched as described in Activation requests and behavior.

A pointing device button is clicked twice over an element. The definition of a double click depends on the environment configuration, except that the event target must be the same between mousedown, mouseup, and dblclick. This event type is dispatched after the event type click if a click and double click occur simultaneously, and after the event type mouseup otherwise.

Refer to Activation requests and behavior.

Occurs after the namespaceURI and/or the nodeName of a Attr node have been modified (e.g., the attribute was renamed using Document.renameNode()). The target node of this event is the Element node whose Attr has been renamed.

Occurs after Attr.value has been modified and after an Attr node has been added to or removed from an Element. The target node of this event is the Element node where the change occured. It is implementation dependent whether this event type occurs when the children of the Attr node are changed in ways that do not affect the value of Attr.value.

Gecko-Specific Fired on a Window object when a document's DOM content is finished loading, but unlike "load", does not wait until all images are loaded. Used for example by GreaseMonkey to sneak in to alter pages before they are displayed. This event, as many others on this page, is dispatched to "trusted" targets only; for example, it is not dispatched to the content of the main browser object in Firefox, even if it comes from a chrome:/ URI.

Occurs after the namespaceURI and/or the nodeName of an Element node have been modified (e.g., the element was renamed using Document.renameNode()). The target node of this event is the renamed Element node.

An event target receives focus. The focus is given to the element before the dispatch of this event type. This event type is dispatched after the event type focus.

An event target loses focus. The focus is taken from the element before the dispatch of this event type. This event type is dispatched after the event type blur.

Gecko-Specific Same as DOMContentLoaded, but also fired for enclosed frames.

Gecko-Specific Undocumented

See also

Gecko-Specific Undocumented

See also

Gecko-Specific Undocumented

See also

Gecko-Specific Undocumented

See also

Gecko-Specific The DOMMouseScroll event is sent when the mouse wheel is moved. The target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the click event.

A node has been added as a child of another node or, in case of Attr nodes, has been added to an Element. This event is dispatched after the insertion has taken place. The target node of this event is the node being inserted.

A node has been inserted into a document, either through direct insertion of the node or insertion of a subtree in which it is contained; Attr nodes are considered part of an Element's subtree. This event is dispatched after the insertion has taken place. The target node of this event is the node being inserted. If the node is being directly inserted, the event type DOMNodeInserted occurs before this event type.

A node is being removed from its parent node or, in case of Attr nodes, removed from its ownerElement. This event is dispatched before the removal takes place. The target node of this event is the node being removed.

A node is being removed from a document, either through direct removal of the node or removal of a subtree in which it is contained; Attr nodes are considered part of an Element's subtree. This event is dispatched before the removal takes place. The target node of this event type is the node being removed. If the node is being directly removed, the event type DOMNodeRemoved occurs before this event type.

This is a general event for notification of all changes to the document. It can be used instead of the more specific mutation and mutation name events listed below. It may be dispatched after a single modification to the document or, at the implementation's discretion, after multiple changes have occurred. The latter use should generally be used to accommodate multiple changes which occur either simultaneously or in rapid succession. The target of this event is the lowest common parent of the changes which have taken place. This event is dispatched after any other events caused by the mutation(s) have occurred.

Gecko-Specific Undocumented

See also

Gecko-Specific Undocumented

See also

Gecko-Specific Fired when the window is about to be closed by window.close().

A resource failed to load, or has been loaded but cannot be interpreted according to its semantics such as an invalid image, a script execution error, or non-well-formed XML.

An event target receives focus. The focus is given to the element before the dispatch of this event type.

Gecko-Specific Undocumented

See also

A key is pressed down. This event type is device dependent and relies on the capabilities of the input devices and how they are mapped in the operating system. This event type is generated after the keyboard mapping but before the processing of an input method editor. This event should logically happen before the event keyup is produced. Whether a keydown contributes or not to the generation of a text event is implementation dependent.

A key is released. This event type is device dependent and relies on the capabilities of the input devices and how they are mapped in the operating system. This event type is generated after the keyboard mapping but before the processing of an input method editor. This event should logically happen after the event keydown is produced. Whether a keyup contributes or not to the generation of a text event is implementation dependent.

The DOM Implementation finishes loading the resource (such as the document) and any dependent resources (such as images, style sheets, or scripts). Dependent resources that fail to load will not prevent this event from firing if the resource that loaded them is still accessible via the DOM. If this event type is dispatched, implementations are required to dispatch this event at least on the Document node.

A pointing device button is pressed over an element.

A pointing device is moved while it is over an element.

A mouse wheel has been rotated. A default action of user agent generated event objects of this type causes implementations to dispatch a mousewheel event iff it supports that event type and MouseMultiWheelEvent.wheelDeltaY is non-zero.

A pointing device is moved away from an element.

A pointing device is moved onto an element.

A pointing device button is released over an element.

A mouse wheel has been rotated around the y-axis.

Gecko-Specific | Firefox 3.5+ The MozAfterPaint event is fired whenever content is repainted. It is sent to the document and bubbles up to the window level.

See also

Gecko-Specific | Firefox 3.5+ Regular mouse wheels can only scroll with a per-line resolution. However, there are also devices that support scrolling with pixel precision, notably Apple MacBook trackpads. When we started supporting pixel scrolling in bug 350471, we added the MozMousePixelScroll event. It basically works exactly like DOMMouseScroll, with the difference that the detail attribute is in pixels (instead of lines). For backwards compatibility DOMMouseScroll events are sent even if pixel scrolling is used. Every DOMMouseScroll event can have several associated MozMousePixelScroll events. If preventDefault() is called on the DOMMouseScroll event, the following associated MozMousePixelScroll events won't cause any scrolling. When you listen for MozMousePixelScroll events, you shouldn't handle DOMMouseScroll events - otherwise you'd end up processing the same scroll gesture twice. In order to make it possible to only listen for MozMousePixelScroll events, Gecko will send MozMousePixelScroll events even when scrolling with regular mouse wheels. These events will carry a meaningful pixel delta.

Gecko-Specific Undocumented

See also

Gecko-Specific Undocumented

See also