This table was last changed on 4 September 2005. It has been replaced by a newer version.
If you'd like to have some practical examples of what you can do with the W3C DOM, read my book ppk on JavaScript, especially chapter 8.
These old compatibility tables detail support for the W3C DOM HTML Level 1 and 2 modules in all modern browsers.
There are four tables on this page. You must know the first two tables by heart, the other two are far less important.
See also the key to my compatibility tables.
All Safari 1.2 tests by Mark 'Tarquin' Wilton-Jones.
First some quite important properties of all HTML elements. You can create a lot of nice effects by playing with these properties.
You must know these properties by heart.
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
---|---|---|---|---|---|---|
className
The class attribute.
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.className The value of attribute CLASS of node x , if any.Can also be set: x.className="name" .The element takes on the styles of the new class. |
||||||
dir
The dir attribute.
Test page |
Yes | Yes | Incom |
Yes | Yes | Yes |
x.dir Gives the text direction (ltr or rtl, left to right or right to left) of element x .Can also be set: x.dir = 'ltr' .For the moment dir serves as a glorified align.
|
||||||
id
The id attribute.
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.id The ID of node x , which must be a tag. If no ID is specified in the HTML, it is empty.Can also be set: x.id = 'newid' The element takes on the styles of the new id. |
||||||
innerHTML
The HTML contained by a tag, as a string.Originally a Microsoft extension, innerHTML is so useful that all other browsers support it, too. Test page |
Yes | Yes | Buggy | Yes | Yes | Yes |
x.innerHTML The HTML contained by node x .Can also be set: x.innerHTML = 'The <b>new</b> text' When setting the innerHTML of an element in Explorer 5 Mac, the element may become much larger than it was at first. This does not happen in the test page, but I encountered it often enough. Solve this by first setting innerHTML to an empty string and then setting it to the new value. x.innerHTML = ''; x.innerHTML = 'The <b>new</b> text' If you write a large string with lots of HTML to an element's innerHTML, this string is not immediately accessible as a node tree. I found that the best solution for this problem is to stop the script and set a timeout for the follow-up script to start in, say, one second. This gives the browser time to turn the string into a node tree. Is innerHTML faster than the official Core methods like createElement() and appendChild() ?
See the
W3C DOM vs. innerHTML test page for more information.
|
||||||
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
innerText
The text contained by a tag.
Test page |
Yes | Yes | Yes | No | Yes | Yes |
x.innerText The text contained by node x . If there are HTML tags in the node, these are ignored.Can also be set: x.innerText = 'The new text' |
||||||
outerHTML
The HTML of a tag, including the tag itself.
Test page |
Yes | Yes | Yes | No | Yes | Yes |
x.outerHTML The HTML of the entire node x , so it includes the outermost tag (element x itself).Can also be set: x.outerHTML = '<p>The <b>new</b> text</p>' |
||||||
outerText
The text of a tag, including the tag itself.
Test page |
Yes | Yes | Yes | No | Yes | Yes |
x.outerText The text contained by node x . If there are HTML tags in the node, these are ignored.Can also be set: x.outerText = 'The new text'. The difference with innerText seems to be
that setting outerText makes the node a text node instead of an element node.
|
||||||
title
The title attribute.
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.title The title attribute of node x .Can also be set: x.title = 'Other title!'
|
Some miscellaneous items, the first two of which are sometimes important.
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
---|---|---|---|---|---|---|
body
The body tag
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
document.body Represents the BODY tag. document.body can hold interesting information about the dimensions of the document and/or the window. However, it's not exactly easy to use. See the Viewport compatibility page for more information. |
||||||
compatMode
Strict mode or Quirks mode
Test page |
No | Yes | No | Yes | No | Incor |
document.compatMode Explorer and Mozilla: BackCompat vs. CSS1Compat Opera: QuirksMode vs. CSS1Compat Explorer 5 Windows knows only Quirks Mode, Safari knows only Strict Mode. As to Explorer on Mac, you can detect Strict Mode by giving an element a width without a unit, for instance x.style.width = 1 . In Strict Mode the browser throws an error, which you
can catch.
Even though this property is anything but standardized and Opera's value honours the very name of this site, I must judge its support Incorrect. BackCompat is the de facto standard.
|
||||||
create
Create an HTML document, I suppose
Test page |
No | No | No | No | Yes | Yes |
document.implementation.createHTMLDocument() I don't know what to do with the created HTML document. |
||||||
defaultView
The window the document is displayed in
Test page |
No | No | No | Yes | No | Yes |
document.defaultView | ||||||
parentWindow
The window the document is displayed in
Test page |
Yes | Yes | Yes | No | No | Yes |
document.parentWindow | ||||||
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
Two new methods for select boxes.
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
---|---|---|---|---|---|---|
add()
Add an option to a select box. The argument is an index number.
Test page Do not use See the Dynamic options script for a safe way of adding options. |
Yes | Yes | Yes | Alter |
Yes | Yes |
x.add(y,x.options[x.options.length]) x.add(y,1) where x is the SELECT and y is the new option.
|
||||||
remove()
Remove an option from a select box
Test page
|
Yes | Yes | Yes | Yes | Yes | Yes |
x.remove(1) Remove the second OPTION from SELECT x .
|
All methods, arrays and properties for child elements of tables. My W3C DOM vs. innerHTML tests show that these methods are the slowest way to build a table in Explorer on Windows. Use with care.
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
---|---|---|---|---|---|---|
caption
The caption of a table
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.caption Access the caption of x , which must be a table.
|
||||||
cellIndex
The index number of a cell in its row
Test page |
Yes | Yes | Yes | Yes | Incor |
Yes |
x.cellIndex The index number of element x , which must be a TD or TH, in its row (TR).
|
||||||
cellPadding
The ancient attribute
Test page Do not use |
Yes | Yes | Yes | Yes | No | Yes |
x.cellPadding = 10 Sets the cell padding of table x to 10 pixels. cellPadding is
overruled by any CSS padding declaration. When you set cellPadding ,
the changes only apply to table cells without any CSS padding.
You should use CSS to set the padding of your cells. |
||||||
cells[]
An array with all cells in a row
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.tBodies[0].rows[1].cells An array with all cells of the second row of the first tBody of table x .(tBodies is not necessary) |
||||||
cellSpacing
The ancient attribute
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.cellSpacing = 10 Sets the cell spacing of table x to 10.
|
||||||
createCaption()
Create a caption for a table
Test page |
Yes | Yes | Minimal | Yes | Yes | Yes |
x.createCaption() If table x already has a caption this method returns the caption. If not, a
caption is created.
|
||||||
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
createTFoot()
Create a tFoot element
Test page |
Yes | Yes | Minimal | Yes | Yes | Yes |
x.createTFoot() If table x already has a tFoot this method returns the tFoot . If not, a
tFoot is created.
|
||||||
createTHead()
Create a tHead element
Test page |
Yes | Yes | Minimal | Yes | Yes | Yes |
x.createTHead() If table x already has a tHead this method returns the tHead. If not, a
tHead is created.
|
||||||
deleteCaption()
Delete the caption of a table
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.deleteCaption() Deletes the caption of table x
|
||||||
deleteCell()
Delete a table cell
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.rows[1].deleteCell(0) Delete the first cell of the second row of table x .
|
||||||
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
deleteRow()
Delete a table row
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.tBodies[0].deleteRow(1) Delete the second row of the first tBody of table x .
|
||||||
deleteTFoot()
Delete the tFoot of a table
Test page |
Yes | Yes | Crash | Yes | Yes | Yes |
x.deleteTFoot() Delete the tFoot of table x .
|
||||||
deleteTHead()
Delete the tHead of a table
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.deleteTHead() Delete the tHead of table x .
|
||||||
frame
A border around an entire table
Test page |
Yes | Yes | Incom |
Yes | No | Yes |
x.frame = 'lhs' Sets the frame attribute of table x .
Possible values: void, above, below, hsides, vsides, lhs, rhs, box, border
|
||||||
insertCell()
Insert a table cell
Test page |
Yes | Yes | No | Yes | Yes | Yes |
x.rows[1].insertCell(0) Insert a TD as the first TD into TR x with index 1.
|
||||||
insertRow()
Insert a table row
Test page |
Yes | Yes | Buggy | Yes | Yes | Yes |
x.insertRow(1) Insert a new TR into element x , which must be a table or table section. The TR
appears as the second one in x.
|
||||||
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
moveRow()
Move a row from one position to another. Microsoft proprietary.
Test page |
Yes | Yes | No | No | No | No |
moveRow(0,3) Move row with index 0 to index 3. |
||||||
rowIndex
The index number of a row in the table. Disregards table sections.
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.rowIndex The index number of element x , which must be a TR, in its table, regardless
of table section (tHead, tBody, tFoot).
|
||||||
rows[]
An array of all rows in a table or table section
Test page |
Yes | Yes | Yes | Yes | Yes | Yes |
x.tBodies[0].rows An array with all rows of the first tBody of table x .(tBodies is not necessary) |
||||||
rules
I don't know what this property is supposed to do.
Test page Does not work |
Buggy | Buggy | No | Buggy | No | Buggy |
x.rules = 'rows' Sets the rules attribute of table x .Possible values: none, groups, rows, cols, all
|
||||||
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |
sectionRowIndex
The index number of a row in the table section
Test page |
Yes | Yes | Buggy | Yes | Yes | Yes |
x.sectionRowIndex The index number of element x , which must be a TR, in its table section (tHead, tBody, tFoot).
|
||||||
tBodies[]
An array with all tBody elements
Test page |
Almost | Almost | Almost | Yes | Yes | Yes |
x.tBodies An array with all TBodies of table x .
|
||||||
tFoot
The tFoot of a table
Test page |
Almost | Almost | Almost | Yes | Yes | Yes |
x.tFoot Access the tFoot of x , which must be a table.
|
||||||
tHead
The tHead of a table
Test page |
Almost | Almost | Almost | Yes | Yes | Yes |
x.tHead Access the tHead of x , which must be a table.
|
||||||
Method or property | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.75 | Safari 1.3 | Opera 8 |