JavaScript and XHTML

Writing JavaScript to work with your XHTML page is a very different situation to how you can write if to work with HTML. None of the methods that JavaScript provides to interact with HTML will work with XHTML. The main reason for this is that with an XHTML page you can have multiple namespaces and everything in the page belongs to a namespace and when you access the parts of the page from JavaScript you need to specify the namespace.

The default namespace for your XHTML is specified in the xmlns attribute on the HTML tag. All of the content of the XHTML will be within that namespace unless a different namespace is specified. When you access the XHTML from JavaScript there is no default namespace assumed and so the namespace needs to be specified for each call where the JavaScript needs to know the namespace.

Looking at this from the JavaScript viewpoint and assuming that you haven't added anything into your XHTML that uses a different namespace from the default let's consider what impact this has on how you would code your JavaScript.

First let's look at some of the ways that JavaScript can interact with HTML that do not work with XHTML.

The oldest way of interacting with HTML from JavaScript was to use document.write() statements to write content into the web page from JavaScript while the page is loading. Thi command is very limited in how it can be used with HTML where it can only really substitute for server side processing where you don't have access to use a server side language. It does not work at all with XHTML.

Collections were the first way that browsers provided for allowing JavaScript to interact with selected parts of an HTML web page before the Document Object Model standard was developed. These collections such as document.forms and document.images still work with HTML but have been superceded by better more flexible ways of accessing the page using the DOM. Collections do not work with XHTML.

Microsoft developed innerHTML as a simple way of replacing all the content of an element with new content that might include HTML. The other browsers copied this and so this is a simple way of replacing the content of an HTML element with new content that may include other HTML elements. This is specific to HTML and does not work with XHTML.

The recommended way for JavaScript to interact with HTML is via the standard DOM commands such as getElementById() and createElement(). None of these commands specify a namespace since HTML doesn't use namespaces. With XHTML those DOM commands that do not require a namespace to be specified (because the namespace is already clearly defined by the element that the command refers to) the same commands will work in XHTML. For those where the namespace needs to be passed to the command the HTML versions of the DOM commands can't be used. These DOM commands have a second version available for use with XHTML where the namespace can be specified for example createElementNS().

If you are converting your HTML to XHTML then you also need to convert the JavaScript. The JavaScript will be easiest to convert if it already uses just the standard DOM commands to reference the HTML. If that is the case then you only need to change a few function calls and add the extra parameter specifying the namespace in order to convert your JavaScript. IIf your JavaScript uses one of the other methods of interacting with the HTML then the simplest solution is to first update the way it interacts with the HTML to use the DOM commands and make sure that works properly with the HTML before converting it to XHTML.

One final thing to watch for here is that whether the page is HTML or XHTML is not determined by anything in the actual page itself. The determining factor is the media type specified in the header. This header is set either in the way that your hosting is configured or is added by server side scripting, there is nothing you can put in the page itself to set it. HTML pages are those which have the media type set to text/html while XHTML pages have the media type set to application/xml+xhtml. Perhaps the easiest way of telling which of these media types is the one set for a specific web page is to attempt to view the page in Internet Explorer. None of the versions of Internet Explorer so far released (including version 8) can recognise an XHTML page and will therefore offer it for download instead of displaying it in the browser. All other browsers can recognise both HTML and XHTML and will display the page in the browser.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow