The DOM

We will start over here in the lessons section with regards to discussing all things development. As we change tack towards discussing how social media works and how developing database driven social media sites are created, we will start to discuss some more in depth topics.

First up. THE DOM. What is it.

Document Object Model. The web browser is designed to display a web page, as a developer we call this a document space, it is part of the document modelling. Each browser caters for the DOM with the “document” being the central space for all attached elements.

If we were to look at a HTML5 page in the browsers Developer Console, we will notice that the whole web page is defined by the “document” as the parent object of the DOM space. The Body of the HTML page becomes a child to this parent “document” and can be called as an object of that parent as in “document.body”.

All elements are then attached, or appended to this central document model. All elements are then treated as a parent/child relationship with the “document” as the root parent to all those children.

But it doesnt work.

There is a minor problem with the Document Object Model, although it has been ratified into a white paper defining the model across all platforms, each instance of a Browser creation deals with the DOM differently. This means that some calls that are available in the DOM in Firefox might not work in another browser such as Google Chrome. This is why we test the DOM space on multiple browsers while we develop.

To give you an example. While coding the WORD MAP portal in Javascript, the DOM was used to find the parent to the child object to be able to use the parent ID. In Firefox you are given the following DOM actions.

    el = e.rangeParent.offsetParent;

This simple call available in Firefox gets the parent element so that we can then query that parent element for its ID.

This call however is not available in Chrome, and therefore crashes the script to do nothing but display an error in the console defining that rangeParent is undefined, and offsetParent is undefined. This means that the DOM in the Google Chrome Browser does not support what is supported by Firefox and therefore breaks the code.

In this example, Google Chrome doesnt provide a parent in the DOM Element that is the child. It therefore breaks the script and will no longer process. This means that the entire site at this point will not work in Google Chrome properly and also displays Google Chromes failings where Firefox has provided a means to define the parent of the child.

Our takeaway lesson from this is that all browsers are to be treated differently. And although they might adhere to the white papers relative to the DOM and its implementation in their browsers, each browser may treat the DOM differently, or in this case, may just not provide the same details available in other browsers. The DOM is different in every browser and because of this, you need to test, check and run through the code you write in multiple browsers to ensure that the DOM manipulation you coded is being enacted properly.

Is it a confusion. Not really. Its you learning to use the DOM, and to become aware that not all DOM is the same DOM.

Since HTML5 most of the browsers now conform to standards set down, even Microsoft Egde the replacement for the sadly lacking Internet Explorer is more inline with the DOM white papers. That being said, even though most browsers today are more alike than different. You still need to treat them as far apart as they used to be, and test your code in multiple browsers before you release it.

»

Leave a comment

Your email address will not be published. Required fields are marked *