W3C DOM Compatibility - HTML

Last major update on 18 July 2010.

This page has been translated into Romanian.

You can also view the previous version, which was created in September 2005 and still features IE Mac.

This compatibility table details support for the W3C DOM HTML Level 1 and 2 modules in all modern browsers.

Want these Tables updated? Join the donation drive.

There are four tables on this page. You must know the first two tables by heart, the other two are far less important.

  1. One with properties for all elements
  2. One with some miscellaneous items
  3. One with two select box methods
  4. One with all table methods and properties

All elements

First some properties of all HTML elements. All of them are read/write, and the average DOM script uses at least two or three of them.

You must know these properties by heart.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
className
The class attribute.

Test page
Yes Yes Yes Yes Yes To be tested
x.className
x.className = 'blue'

Get or set the value of the class attribute of node x, if any.

dir
The dir attribute.

Test page
Almost Yes Yes Almost Almost Yes To be tested
x.dir
x.dir = 'rtl'

Get or set the text direction (ltr or rtl, left to right or right to left) of element x. For the moment dir serves as a glorified align.

  • If the last character on a line is an interpunction character, IE, Safari, Chrome and Konqueror move it to the start of the line. I don’t think this should happen, so I count it as Almost.
id
The id attribute.

Test page
Yes Yes Yes Yes Yes To be tested
x.id
x.id = 'otherID'

Get or set the id of node x, which must be a tag. If no ID is specified in the HTML, it is empty.

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
see also the table test page
Almost Yes Yes Yes Yes To be tested
x.innerHTML
x.innerHTML = "Let's <u>change</u> it!"

Get or set the HTML contained by node x.

In general innerHTML is faster than normal DOM methods because the HTML parser is always faster than the DOM engine. If you want to do complicated changes, use innerHTML. (For simple changes it does not really matter which method you use, although innerHTML remains theoretically faster.) See also the W3C DOM vs. innerHTML test page for more information.

  • In IE and Konqueror innerHTML does not work correctly when you update tables. Solve this by using pure DOM methods instead. See this explanation of the behaviour by innerHTML’s inventor.
  • If you remove elements through innerHTML in IE, their content is wiped and only the element itself (i.e. opening and closing tags) remain. If you want to remove nodes that you may want to reinsert at a later time, use DOM methods such as removeChild().
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
innerText
The text contained by a tag.

Test page
Yes No Yes Yes Yes To be tested
x.innerText
x.innerText = "Let's change it!"

Get or set the text contained by node x. Any HTML tags in the node are ignored, though their text content is added to the innerText. If you set innerText all inner HTML elements are removed.

Cross browser:

var text = x.innerText || x.textContent
outerHTML
The HTML of a tag, including the tag itself.

Test page
Almost No Yes Yes Yes To be tested
x.outerHTML
x.outerHTML = "Let's <u>change</u> it!"

Get or set the HTML of the entire node x, including the outermost tag (element x itself).

Once you’ve changed the outerHTML, element x is removed entirely and replaced by the HTML you’ve specified. However, variable x still refers to the removed element that now floats in “DOM hyperspace.” In IE its content is removed, though, because of the bug mentioned under innerHTML.

outerText
The text of a tag, including the tag itself.

Test page
Almost No Yes Yes Yes To be tested
x.outerText
x.outerText = "Let's change it!"

Get or set the text contained by node x. Exactly the same as innerText except that node x is also overwritten and removed when you set outerText.

See outerHTML note about element x.

textContent
The text contained by a tag.

Test page
No Yes Yes Yes Yes Yes To be tested
x.textContent
x.textContent = "Let's change it!"

Get or set the text contained by node x. Any HTML tags in the node are ignored, though their text content is added to the textContent.

Cross browser:

var text = x.innerText || x.textContent
title
The title attribute.

Test page
Yes Yes Yes Yes Yes To be tested
x.title
x.title = 'Changed'

Get or set the title attribute of node x.

  • Safari 3.0 does’t show the title of an element in any way, so its compatibility is mostly untestable. However, the title property gets its value from the title attribute, so it works to some extent.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Miscellaneous

Some miscellaneous items, the first two of which are sometimes important.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
body
The body tag

Test page
Yes Yes Yes Yes Yes To be tested
document.body

Represents the BODY tag.

compatMode
Strict mode or Quirks mode

Test page Strict
Test page Quirks
No Yes Yes Yes Yes Yes To be tested
document.compatMode

Returns the compatibility mode of the document: BackCompat (Quirks Mode) or CSS1Compat (Strict Mode). See the Quirks and Strict Mode page for an explanation.

  • IE 5.5 doesn't support this property, but it doesn't need to. It's permanently locked in Quirks Mode.
createHTMLDocument()
Create an HTML document

Test page
No Yes No Yes Yes Yes To be tested
document.implementation.createHTMLDocument('Title')

Create an HTML document consisting of <html>, <head>, <title> and <body> tags. The argument becomes the <title> tag's value. Unfortunately I don't know what to do with the created HTML document.

defaultView
The window the document is displayed in

Test page
No Yes Yes Yes Yes Yes To be tested
document.defaultView

Refers to the window. I have no idea why we need yet another reference to the window.

parentWindow
The window the document is displayed in

Test page
Yes No No No Yes To be tested
document.parentWindow

Refers to the window. I have no idea why we need yet another reference to the window.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Select boxes

Two new methods for select boxes.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
add(opt,opt)
Add an option to a select box. The second argument is the option after which you want to insert the new option.

Test page
No Yes Yes Yes Yes Yes To be tested
x.add(y,x.options[x.options.length])

Adds an option to a select box, where x is the select box and y is the new option.

The W3C approved way (that is much too complicated) requires you to refer to the option object after which the new option is inserted.

add(opt,ind)
Add an option to a select box. The second argument is an index number.

Test page
Yes No Yes Yes Yes To be tested
x.add(y,2)

Adds an option to a select box, where x is the select box and y is the new option.

The Microsoft way: give the index number of the option after which you want to insert the new option.

I side with Microsoft here; W3C's implementation is far too complicated.

remove()
Remove an option from a select box

Test page
Yes Yes Yes Yes Yes To be tested
x.remove(1)

Remove the second option from select x.

Tables

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.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
caption
The caption of a table

Test page
Yes Yes Yes Yes Yes To be tested
x.caption

Access the caption of table x.

cellIndex
The index number of a cell in its row

Test page
Yes Yes Yes Yes Yes To be tested
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
Yes Yes Yes Yes Yes To be tested
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.

  • Safari 3.0 and Konqueror don't react to the setting of cellPadding, but there's a subtle difference between doing the cellPadding test and then the cellSpacing one, and doing the cellSpacing one immediately. The results might be interpreted as the cellPadding only taking effect after the cellSpacing has been set, but I'm not sure if this interpretation is correct.
cells[]
An array with all cells in a row

Test page
Yes Yes Yes Yes Yes To be tested
x.rows[1].cells

A nodeList with all cells of the second row of table x. Contains both <td>s and <th>s.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
cellSpacing
The ancient attribute

Test page
Yes Yes Yes Yes Yes To be tested
x.cellSpacing = 10

Set the cell spacing of table x to 10.

createCaption()
Create a caption for a table

Test page
Yes Yes Yes Yes Yes To be tested
x.createCaption()

If table x already has a caption this method returns the caption. If not, a new caption is created.

createTFoot()
Create a tFoot element

Test page
Yes Yes Yes Yes Yes To be tested
x.createTFoot()

If table x has a <tfoot>, get it. If not, create a <tfoot> and append it to the table.

createTHead()
Create a tHead element

Test page
Yes Yes Yes Yes Yes To be tested
x.createTHead()

If table x has a <thead>, get it. If not, create a <thead> and append it to the table.

deleteCaption()
Delete the caption of a table

Test page
Yes Yes Yes Yes Yes To be tested
x.deleteCaption()

Delete the caption of table x, if present.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
deleteCell()
Delete a table cell

Test page
Yes Yes Yes Yes Yes To be tested
x.rows[1].deleteCell(0)

Delete the first cell of the second row of table x.

deleteRow()
Delete a table row

Test page
Yes Yes Yes Yes Yes To be tested
x.deleteRow(1)

Delete the second row of table x.

x.tBodies[1].deleteRow(1)

Delete the second row of the second <tbody> of table x.

deleteTFoot()
Delete the tFoot of a table

Test page
Yes Yes Yes Yes Yes To be tested
x.deleteTFoot()

Delete the tFoot of table x.

deleteTHead()
Delete the tHead of a table

Test page
Yes Yes Yes Yes Yes To be tested
x.deleteTHead()

Delete the tHead of table x.

frame
A border around an entire table

Test page
Yes Yes Yes Yes Yes To be tested
x.frame = 'lhs'

Set the frame attribute of table x.

Possible values: void, above, below, hsides, vsides, lhs, rhs, box, border

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
insertCell()
Insert a table cell

Test page
Yes Yes Yes Yes Yes To be tested
x.rows[0].insertCell(1)

Insert a <td> the first <tr> of table x, as the second <td>.

insertRow()
Insert a table row

Test page
Yes Yes Yes Yes Yes To be tested
x.insertRow(1)

Insert a <tr> into table x as the second <tr>.

moveRow()
Move a row from one position to another. Microsoft proprietary.

Test page
Yes No No No No To be tested
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 Incorrect To be tested
x.rowIndex

The index number of element x, which must be a <tr>, in its table, regardless of table section (tHead, tBody, tFoot).

Note that browsers should move any <thead> to the top of the table, and any <tfoot> to the bottom. Therefore rows should be counted in the order <thead>-rows, <tbody>-rows, <tfoot>-rows: the order in which they're visible in the rendered page.

  • Opera keeps to the source code order (where the <tfoot> precedes the <tbody>.)
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
rows[]
An array of all rows in a table or table section

Test page
Yes Yes Yes Yes Incorrect To be tested
x.rows

A nodeList with all rows of table x.

  • Safari 3.0 and Opera keep to the source order (where the <tfoot> precedes the <tbody>)
sectionRowIndex
The index number of a row in the table section

Test page
Yes Yes Yes Yes Yes To be tested
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
Yes Yes Yes Yes Yes To be tested
x.tBodies
An array with all TBodies of table x.
tFoot
The tFoot of a table

Test page
Yes Yes Yes Yes Yes To be tested
x.tFoot
Access the tFoot of x, which must be a table.
tHead
The tHead of a table

Test page
Yes Yes Yes Yes Yes To be tested
x.tHead
Access the tHead of x, which must be a table.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x