With DOM, the content, structure, and layout of a web document can be changed by a computer program by selecting individual nodes in the tree structure of an HTML document. In principle, DHTML works the same. However, this standard did not yet exist at the turn of the millennium in its present form, which is why dynamic elements depended on the browser and whether or not scripts were supported. In this context, four levels are available to characterize DHTML and DOM scripting.
DHTML: scripting capabilities of web browsers
If scripts are enabled in the user’s browser, the browser changes the elements that are addressed by the script. Most of these changes depend on events, which are generated by the user. If you hover your mouse over a menu produced with DHTML, the menu opens up. If the browser does not support scripting languages, it will be displayed with errors and possibly the document won’t be usable at all. Since DHTML poses relatively high demands on scripting support, there were large differences in representation by the browser around the turn of the millennium. In this context, different DHTML models are referred to in order to distinguish the scripting capabilities of Internet Explorer 4 and Netscape Navigator 4 from each other.
Against the background of the browser wars between 1995 and 1998, both Microsoft and Netscape used scripting skills to gain a competitive advantage. The consequences were a neglect of web standards and the development of proprietary scripting languages. Only the DOM model broke from this paradigm and superseded dynamic HTML through a standardized integration of scripts. DOM scripting is considered a browser-independent HTML method to dynamically change elements of a website on the client side.
DHTML allows a variety of animations, effects, and functions. In principle, various types of content can be dynamically selected and changed using script-based methods. It mostly concerns texts, images, graphic elements, or windows. Following are some examples.
- Menus: Unfolding a menu or navigation by mouse-over effects.
- Images: Through drag and drop, size and position of graphic elements can be changed.
- Pop-ups: New windows can be opened when you click on certain items.
- Animations: Text and graphic elements can move across the screen.
- Layer: Overlap effects of content such as text, images, or menus.
- CSS: Different style elements of an HTML document can be changed dynamically.
- Form data: Already entered form data can be displayed on subpages so as not to have to enter it again.
Relevance to search engine optimization
Add to this is the fact that not all browsers interpret the source code of DHTML websites. Once certain elements are incorrectly displayed or not at all, the usability of such sites is questionable. The latter may have an indirect impact on search engine optimization. Poor usability can result in low length of stay times, high bounce rates, and less traffic in the long run. As a general rule, it is advisable to use scripts sparingly and to mark them in the source code with metadata so crawlers register that this is a script and what its function is.
- Document Object Model (DOM) Technical Reports w3.org. Accessed on 03/26/2015