July 20, 2024

SamTech 365

PowerPlatform, Power Apps, Power Automate, PVA, SharePoint, C#, .Net, SQL, Azure News, Tips ….etc

Document Object Model

Author : DAOUDI Samir | Context : MSc Software Engineering – Internet Programming

Since the appearance of Internet, different standards and protocols have been designed (or redesigned) to fit Internet’s requirements and needs. One important standard that has raised many questions and discussions arround it is the Document Object Model (DOM).

What is DOM?
Document Object Model is an API (Application Programming Interface) for HTML and well-formed XML. It represents the logical strucutre of a document and how a document can be accessed and manipulated. Thanks to DOM, programmers can build documents, define their structures and add, modify or delete their content. Every piece of the HTML or XML document can be accessed, changed, deleted or added using the Document Object Model (With few exceptions) (Le Hégaret et.al. 2004).

Another interesting definition of DOM was provided by Liu as an abstract model which is a defined application programming interface between XHTML and application programs.
DOM is in fact a collection of interfaces, one interface for each document tree node type. It supports a variety of application programming languages (JavaScript, C++, Java, VB) and can be used in programming to create documents, navigate the structure and manipulate elements and their content.
Documents are represented in DOC as a treelike structure usually (but not always) it can be one tree in a document(Liu, 2007).

Let’s consider the following example of XHTML code

<td>Shady Grove</td>
<td>Over the River, Charlie</td>

A graphical representation of the DOM of the example table is :

Figure 1 : DOM graphical representation (Le Hégaret et.al. 2004).

How to use DOM?
DOM is not a particular application, product or proprietary ordering of web pages. Rather, it is an interface that each web browser (or vendors) must implement to comply with the W3C standards (Boswell, 2002).

When we use JavaScript to create elements in HTML document or change attributes of a button or a textbox, we use DOM in which all these structures are organised. The DOM provides a context for the Scripting language to operate in.

DOM stadard and IE
Internet Explorer was for long time the 1st browser used by the majority of internet users. Complying with DOM was a necessity. However, DOM was supported most completely by IE starting for the version 5 and it allowed an easy manipulation of document objects.
As W3C DOM standards are continually changing, IE is

DOM standard and Mozilla
W3C oversees DOM specifications as different level, each level has its own features. Currently Mozilla’s support for the different DOM levels can be summarized as:
Level 1 : Excellent
Level 2 : Good
Level 3 : Poor, being under construction

Mozilla’s developpers are making huge efforts to make it standards-compliant, but will reach the fully support only when these standards became recommendations rather than working drafts. Actually the level 3 is still a working draft(Boswell, 2002).

Mozilla VS IE DOMs
Both Mozilla and Internet Explorer supports W3C’s DOM specification. However, there are still differences between Internet Explorer’s DOM and Mozilla’s DOM. The most important difference is how they handle white-space text nodes. When XML generates, it often contains white-spaces between the nodes. Internet Explorer, when using node.childNodes[], will NOT contain these white-space nodes. In Mozilla, those nodes will be in the array.

This is just a quick example of the possible issues that can be face by developers when dealing with DOM and this issue is not related to DOM itself but to the implementation made by the vendors. Each web browser (Mozilla, IE, Chrome…etc.) tries as possible to implement DOM in the most appropriate way in order to comply mostly with this standard.

The W3C Document Object Model is the most appropriate and standard model, as W3C deals with majority of internet standard, it should be better and faire that vendors implement 100% this DOM and avoid implementing their own vision of the document which might just conduct to some compatibilies issues and programmers will be the 1st victime of this incompatibility than the web page itself.



– Philippe Le Hégaret, Lauren Wood & Jonathan Robie (2004). What is the Document Object Model?. Available online at : http://www.w3.org/TR/DOM-Level-3-Core/introduction.html

– Wendy Liu (2007). Document Object Model (DOM). Available online at :http://www.cs.toronto.edu/~wl/csc309/handouts/dom.pdf

– David Boswell, Brian King, Ian Oeschger, Pete Collins & Eric Murphy (2002) .Creating applications with Mozilla. O’Reilly Press, ISBN: 0-596-00052-9.