Document Object Model (DOM) in JavaScript

Abstract

Wilton(2000) explained that Document Object Model (DOM) represents everything on the web page that can be accessible through common set of properties, methods in JavaScript and other object-based programming languages. Some of the common element that can be accessed via DOM is forms, graphics, and text belongs to the page. We shouldn’t be confused between Browser Object Model (BOM) and Document Object Model (DOM). While DOM provides scripting access to the objects available to the web page, the BOM offers scripting access to all areas of the browsers such as form buttons, and title bar. Another important point about BOM is that it is unique set of objects that are related to particular browsers i.e. there is no standard that can be common among different browsers that can be followed. For the above reason, different set of properties, methods and event objects will be different from one browser to another.

With the standard exists around the HTML web pages where certain standard features can be supported by the language such as tables, forms, and images, such standard created a common method of accessing these features such as DOM. DOM requires a uniform representation of the HTML document to be able to work. This is achieved by representing the entire HTML document/web page as a tree structure. There are several types of script languages available such as JavaScript and VBScript. Each requires different approaches to deal with DOM. The W3C has provided generic sets of objects, properties and methods that should be available in all scripting languages, in the form of the DOM standard. However, almost no browser has 100% compliance to such standard with the DOM; therefore, there is no guarantee that all of the objects, properties, and methods of the DOM standard will be available in a given version of a browser (Wilton, 2000).

Why do we need a browser’s object model?

Marini (2002) explained that the browser object model represents an interface between the browser software routines and the Dynamic HTML source code in the page. While the browser object model represents the physical part of the software that forms the browser, the Dynamic HTML is a universal browser-independent document definition language. Each browser must provide the same object model, where the browser object model work as an interface that will use the browser software routines to create the window, and fill it with the elements designed by the dynamic HTML source code defined for the page. One important point about the above process is that, dynamic HTML source code implemented in the page defines what result should be in rendering the page not how the process should be implemented. With the above has been said, the browser’s object model represents away of connecting any page to the browser. Such object model contains methods, events, and properties which can be used to communicate with the browser, and the viewer to update the page that will be displayed.

Why do we need DOM Standards?

Deitel and Deitel (2008) explained that the creation of DOM gives the accessibility to all elements on the web page. Within any browser, the web page elements such as forms, tables, and paragraphs and other elements are represented in an object hierarchy. With a creation of a scripting language such as JavaScript, and VBScript elements within the web page can be created, modified or removed. Many browsers for different vendors provide similarity in the DOM model; however, while they provided many of the same capabilities, they are incompatible with many of the DOM structure. In an effort to maintain cross-browser websites, the W3C created the standard DOM, and most the browsers implement the major features of the W3C DOM.

Wilton(2000) explained that with a relatively stable version of the HTML, attention was turned to other areas of the web. A new set of standard was introduced to govern the methods of web page presentation such as Style Sheets (CSS), and the representation of the HTML document in script such as Document Object Model (DOM). The DOM provides a common set of objects, properties, and methods that can be accessible through a scripting language such as JavaScript. With such scripting language like JavaScript navigating the tree structure of the DOM will be achievable. For the above reason, providing a standard for such structure is important among different browsers. Some of the reasons that make such standard impossible are:

 

  • The competitions among different software vendors make it impossible to reach such standard.
  • The slow process required to maintain such standard in W3C let these vendors to implement different new innovation in such technology, and then submitting such changes to the standards body for approval.

Providing generic standard that can be common among different browsers will guarantee the standard accessibility to such structure. However some other important features that can be accessible by different scripting languages can be different from browser to another.

Krock (2000) explained that with the requirements of implementing dynamic HTML in the websites to give the dynamic looks and being interactive with end-users, web designers are facing new challenges in exploit the power of the DHTML without being influenced by certain browser. Building cross-browser DHTML pages is easy to certain extent where the consistence of the standard DOM is implemented among browsers. One important point has to be considered in building DHTML pages is that each browser has its own definition of DHTML, and for that reason W3C created a standard levels that can represent the DOM in any browser. With such levels being created, some browsers can implement the DOM standard to a certain level where can be common implementation a cross-browsers. For web designers to maintain cross-browsers the following implementations have to be considered:

 

  • Create the DHTML pages that can support the cross-browsers cascading style sheets.
  • Create the DHTML pages that can support the cross-browsers JavaScript.
  • Create the DHTML pages that can support Document Object Model (DOM) functionality that can support by the cross-browsers.
  • Create the DHTML pages that can support the event model functionality and full screen mode.

Itoh (2001) explained that the Document Object Model (DOM) is an essential way of addressing the objects of the page, and in order to manipulate such objects on the page, addressing such object has to be done correctly. However, the big obstacle with such technology is that, it’s different from one browser to another. One of the solutions to write a cross-browser DHTML code, browsers detection, and branching script has to be implemented to serve up different version of JavaScript that can deal with DOM.

Conclusion

Dougherty (1997) explained that the Document Object Model (DOM) provides two basic features to any web page:

 

  • The ability to extend across object hierarchy with the page objects.
  • The ability to access of objects by name.

The important part of the DOM is to act as an API that can handle different reference to the objects on the page. However, since the standard element across-browsers are lacking the common implementation, it is part of web developer to find the common use of DOM for a given language such as JavaScript or VBScript to maintain the cross-browser compatibility (Dougherty, 1997).

Document Object Model (DOM) is the technique that is used to access the elements, and the text within the web pages, however, the standard of such technique is a big issue since the web developers have to worry about the separation among browsers in how such browsers handle different aspects of such technique (Chase, 2002).

References

Chase, N. (2002) JavaScript and the Document Object Model [Online]. Available from: http://www.ibm.com/developerworks/web/library/wa-jsdom/ (Accessed: 27 February 2010).

Deitel, P. & Deitel H. (2008) Internet & World Wide Web: How to Program. 4th ed.New Jersey: Pearson Prentice Hall.

Dougherty, D. (1997) The Document Object Model Explained [Online]. Available from:http://projects.ischool.washington.edu/tabrooks/344/BackGroundArticles/DOC%20Explained/WebReview_com%20The%20Document%20Object%20Model%20Explained.htm (Accessed: 27 February 2010).

Itoh, M. (2001) Preparing for standard-complaint browsers, Part 2 [Online]. Available from: http://www.digital-web.com/articles/preparing_for_standard_compliant_browsers_part2/ (Accessed: 27 February 2010).

Krock, E. (2000) Introduction to Cross-Browser, Cross-Platform, Backwardly compatible JavaScript and Dynamic HTML [Online]. Available from: http://www.mozilla.org/docs/web-developer/xbdhtml/xbdhtml.html (Accessed: 27 February 2010).

Marini, J. (2002) Document Object Model [Online]. Available from: http://site.ebrary.com.ezproxy.liv.ac.uk/lib/liverpool/docDetail.action?docID=10043882 (Accessed: 27 February 2010).

Wilton, P. (2000) Beginning JavaScript. 2nd ed.Birmingham: Wrox Press.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: