Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Given a large legacy project utilizing ASP.NET, javascript, css, etc, technologies, I was wondering if changing the DOCTYPE of the web pages, say, from HTML 4.0 Transitional to XHTML 1.0 Transitional (or the other way around) in any way could break the javascript functions of the web pages.

There are plenty of articles and discussions about how different DOCTYPES affect the (css) rendering of pages, but I cannot seem to find anything similar on the subject of breaking any code.

I am looking for links to articles about things to watch out for in general so as to better spot potential problems in existing code and avoid creating problems when writing new code.

like image 897
Joergen Bech Avatar asked Sep 10 '09 07:09

Joergen Bech


2 Answers

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).

like image 80
kangax Avatar answered Oct 17 '22 01:10

kangax


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">

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.

like image 23
meder omuraliev Avatar answered Oct 17 '22 01:10

meder omuraliev