ansaurus

Question

Does the choice of DOCTYPE affect the DOM as seen by javascript code?

Answer 1

+1 A:

If you're using the DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

then your site is in quirks mode in IE and almost-standards mode in modern browsers, and because the xhtml 1.0 transitional dtd forces the page to be in standards mode there will be layout issues and potential issues in the Javascript ( especially in IE ) as there are some significant differences between how the DOM is rendered in quirks vs standards.

However if the HTML 4.01 DTD contains the system identifier:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"&gt;

It should already be in standards mode. You can verify by querying 'document.compatMode' in your site, it will say 'CSS1Compat' if it's in standards otherwise 'BackCompat' if in quirks mode.

I'm assuming you're going to be serving a Content-Type of text/html with XHTML 1.0 Transitional.

meder 2009-09-10 08:00:21

I verified the partial/full doctype issue. I did a similar test for a partial/full xhtml 1.0 doctype and it appears that both of<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">and<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">cause the browsers to render the page in Standards Compliance mode, i.e. the partial xhtml doctype does not force the page into quirks mode as is the case with the HTML 4.01 one. Strange.

Joergen Bech 2009-09-10 09:09:28

Answer 2

+2 A:

Whether changing DOCTYPE will break any javascript functions really depends on how defensively those functions are designed :)

For example, when document is rendered in quirks mode, document.body (BODY) becomes a so called "root element"; when rendered in standard mode, that root element is usually a document.documentElement (HTML). This is a rather substantial distinction. If a script that determines browser screen size always queries clientWidth/clientHeight properties off of document.documentElement, it will obviously report incorrect results in quirks mode (since, IIRC, document.documentElement.clientWidth/clientHeight would represent dimensions of HTML element, rather than screen ones).

Most of the JS libraries usually explicitly state whether quirksmode is supported (we - Prototype.js - for example, don't support quirks mode).

Speaking of HTML vs XHTML, in order for browser to render document as XHTML, you must first of all serve it with proper "Content-type" header (i.e. application/xhtml+xml). If you only change doctype to XHTML one, but still serve document as "text/html", most browsers I know will still parse (and render) it as HTML document.

Note that to date, IE doesn't understand "real" XHTML content, which is why serving documents as text/html (with HTML4.01 doctype) is a recommended way to go (unless IE is not among supported browsers, of course).

As far as DOM peculiarities in "real" XHTML documents, I've heard that some things like document.write "don't work" and that accessing node attributes should always be performed via getAttribute/setAttribute (rather than via simpler property accessors). IIRC, there are also some issues with innerHTML.

The lack of information about DOM in "real" XHTML documents is probably due to its impracticality in documents/applications for general web (i.e. IE's lack of support for it).

kangax 2009-09-11 04:54:32

ansaurus

tags:

views:

answers:

Does the choice of DOCTYPE affect the DOM as seen by javascript code?

related questions