W3C DOM Compatibility - HTML

Page last changed 3 months ago

Join the Mobile Web mailing list!

Compatibility QuirksBlog Mobile About

sitemap contact

W3C DOM Compatibility - HTML

show page contents

Top All elements Miscellaneous Select boxes Tables

show site navigation

Loading site navigation; please wait...

Last major update on 18 July 2010 .

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

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.

This compatibility table details 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.

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.

Contents of this table className dir id innerHTML innerText outerHTML outerText textContent title See also the key to my compatibility tables.

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.

Contents of this table body compatMode createHTMLDocument() defaultView parentWindow See also the key to my compatibility tables.

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.

Contents of this table add(opt,opt) add(opt,ind) remove() See also the key to my compatibility tables.

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.

Contents of this table caption cellIndex cellPadding cells[] cellSpacing createCaption() createTFoot() createTHead() deleteCaption() deleteCell() deleteRow() deleteTFoot() deleteTHead() frame insertCell() insertRow() moveRow() rowIndex rows[] sectionRowIndex tBodies[] tFoot tHead See also the key to my compatibility tables.

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

Home Sitemap Contact Copyright
Buy my book