www.codestyle.org

Document Object Model FAQ

This FAQ is part of the Code Style Help and FAQ section. Use the help request form below if your question is not answered here, but make sure you are asking the right question first.

Subscribe to this FAQ:

DOM compatibility

Q: My script doesn't work in Netscape 6!

A: Netscape 6 is based on the Gecko rendering engine, which is part of the Mozilla project and uses the W3C recommended Document Object Model. This object reference scheme is not backwards compatible with Netscape 4; details are available from the Mozilla project.

Q: What are the advantages of the W3C DOM?

A: The main advantages of a DOM that follows the W3C recommendations for client-side scripting is the standardisation of the programming environment.

More details available to subscribers:
What are the advantages of the W3C DOM?

Q: How do I access a CSS file using Javascript?

A: Client side Javascript implementations in Web browsers should specifically prohibit file access. This is because it would be relatively easy to write a script that could attempt to read other more sensitive file information on the users' computer. However, it is possible to read the properties of a stylesheet indirectly using the Document Object Model, e.g.

More details available to subscribers:
How do I access a CSS file using Javascript?

Control document elements

Q: How can I hide image links while images are loading?

A: This delay is a normal consequence of loading images over the network and is accepted by most users. By the time the HTML for a given image is loaded, that part of the document is likely to be displayed. If you want to ensure the space occupied by the images is filled as early as possible, you could use Javascript to specify a single pixel image then switch the master images back in place when they have loaded, as below.

More details available to subscribers:
How can I hide image links while images are loading?

Q: How should I refer to a form input that is not visible?

A: An element's style.visibility property does not affect its accessibility through the document object model; if that were the case it would only be possible to hide objects, they could never be set visible again. However, you must ensure check the existence of the element reference and relevant properties before you attempt to set them, as below.

More details available to subscribers:
How should I refer to a form input that is not visible?

Q: Can I create an iframe browser and filter the URLs?

A: It is feasible to create an iframe-based browser with a basic URL input, as below. Once you have obtained the target URL, it would be possible to control the sites that are displayed using standard Javascript string methods, such as toLowerCase(), indexOf(substring), lastIndexOf(substring) and substring(from, to).

More details available to subscribers:
Can I create an iframe browser and filter the URLs?

Q: How can I create a scrolling text marquee with DOM scripting?

A: The script below has a number of global variables to set the basic configuration for the div element below with an id attribute marquee. This provides an identifier for the DOM getElementById() method to obtain a reference to the marquee container element. The scrollMarquee() function then uses the element node's firstChild property to get a reference to the text content of the div and its nodeValue sub-property, which is the text itself. The function then nibbles the first character off the start of the marquee text and shifts it to the end to loop through the text.

Successive calls to the scrollMarquee() function would normally be started by an onload event handler on the body element, but you can also click the marquee to start it. The scrollMarquee() function is then called recursively via the setTimeout() method. Separate stopMarquee() and switchMarquee() functions use the global TIMEOUT_ID variable to check and control the movement of the marquee.

More details available to subscribers:
How can I create a scrolling text marquee with DOM scripting?

Q: How do I show or hide a <layer> in Netscape 7.1?

A: Netscape 6 and 7 use a W3C standard Document Object Model (DOM) that is not compatible with the reference scheme used in earlier versions, and the proprietary <layer> element is no longer supported.

More details available to subscribers:
How do I show or hide a <layer> in Netscape 7.1?

Element styling

Q: How can I make a link whose colour changes every 5 seconds?

A: First, it is not a good idea to change link colours on a page. Users tend to identify links with a standard, fixed colour and may ignore text with a different, varying colour. People with visual impairment may also find it difficult to read the text, especially if it is the same as the custom background colour they have chosen. It is therefore important to ensure the background colour is set with the foreground colour.

The example code below creates an array of 4 named colours, a delay of 5000 milliseconds and uses the setTimeout() method to trigger the colour change. A reference to the link is obtained by assigning an id attribute to the anchor and using the DOM1 getElementById() method. The existence of the getElementById() method is checked before setting the style.color and style.background properties of the element.

More details available to subscribers:
How can I make a link whose colour changes every 5 seconds?

Q: How can I change the default link colour?

A: One way to change the colour of all links in a document is to use the DOM1 getElementsByTagName(tagName) method, which returns an array of all elements by the given name. The script below selects all anchor tags, then iterates through them to set their CSS color and background properties. It is important to change both properties together, to ensure there is a good contrast between the two colours.

More details available to subscribers:
How can I change the default link colour?

Help request

Use the form below to submit a help request or general enquiry about the Code Style Web site. Read our guidelines on asking the right questions first.

Name:
Email*:
Example URL:
Comments:
Do NOT put any URLs here
Join mailing list:	Yes, join the mailing list No
* Required fields

Your email address will not be mis-used. If you include your address you may be sent a personal reply, you will not be added to any mailing list unless you request it. Read the site privacy statement for details.

Navigation

• Home page
• CSS style guide
  • Font sampler
  • Media monitor
• Java & servlets
• Javascript & DOM
• HTML & XHTML
• Help and FAQs
• Site log

Site search

Home · CSS · Java · Javascript · HTML · Help · Log

Copyright © 2000-2008 Philip Shaw, all rights reserved, terms and conditions apply.
Valid XHTML and correct CSS. Last updated 14 June 2008 at 17:32:52 PM BST.
URI: http://www.codestyle.org.uk/javascript/dom/FAQ.shtml Metadata: RDF RSS 1.0