What is the DOM

What is the DOM, the structure of objects that the browser generates in memory for each of the elements of the page. How the DOM has evolved over time and how to work with the DOM in Javascript.

DOM is an abbreviation for Document Object Model. In Spanish we could translate it as Document Object Model, although in .com we have usually referred to the DOM with the name of the browser’s object hierarchy, because it really is a hierarchical structure where there are several objects and some depend on others.

The DOM objects model both the browser window and the history, the document or web page, and all the elements that may be inside the page itself, such as paragraphs, divisions, tables, forms and their fields, etc. Through the DOM you can access, through Javascript, any of these elements, that is, their corresponding objects to alter their properties or invoke their methods. However, through the DOM, any element on the page is available to Javascript programmers to modify, delete, create new elements and place on the page, etc.

The truth is that anyone who has done a little work with Javascript, even if it has been very basic, has ever touched the DOM. Here at .com web development we have seen a multitude of examples in which the DOM was touched. When, for example, we make a sentence in which the value of a form field is accessed, with a code like this: document.forms.elemento_formulario.value, we are accessing the DOM object structure.

The DOM is defined and managed by the W3C, so different browsers simply apply the World Wide Web Consortium specifications to support the DOM in their applications. The DOM not only allows you to modify HTML web pages, but also XML documents.

Throughout the history of browsers, the characteristics of the DOM have been applied to a greater or lesser extent. As the versions of the browsers followed one another, there was also greater support for the DOM specifications, in what have been called the DOM levels. The first to make page components available through objects was Netscape 2.0, which incorporated what is called DOM level 0. Currently, the latest published specification is DOM level 4.

It is important to note now that because the levels of the DOM change from browser version to version and the specifications have been understood differently by different browser organizations, a framework has been produced for working with the objects of the browser. page differs from browser to browser.

Currently, the different browsers have given more consistent support to the DOM and there are very few differences, so these problems have been mitigated, as we will see in the next point.

DOM and Browser Compatibility

As those of us who have minimal experience in creating websites know, one of the most important problems we encounter is that different browsers interpret the same code differently. This is true for any language interpreted on the client side, such as HTML, CSS, and Javascript. The problem regarding Javascript is even worse, since the differences between browsers are very large and also between versions of the same browser.

With all this, when we develop web pages with the DOM, we find ourselves with serious difficulties for the same code to work in the same way, at least among the most common browsers.

To solve it, in .com we have seen a series of techniques that allow us to detect the user’s browser and, depending on whether it is, execute one sentence or another. Unfortunately, all of these techniques only make coding and developing web applications more complicated with client-side programming. To solve it, there are Javascript libraries or frameworks, which we have discussed in web.com development and published manuals, which allow programming without having to worry about the different characteristics of browsers, while providing a series of advanced functions for development. of interfaces in a simple and fast way.

To begin with, we published the , which can be considered a relic since it was the first utility that managed to free us from the difficulties of working with different types of browsers. This library did not become fully established and over time jQuery emerged as the clear dominance of the DOM manipulation libraries, which you can learn about in the . In addition, in .com we have published other articles commenting that they exist in the market.

Thus, our recommendation from Desarrollo Web .com is that we learn to use a framework or library that allows us to work with the DOM without having to worry about the different browsers that can access our site. We will save work time and headaches.

DOM standardization

Luckily, for some time now there has been a strong movement in web standards and the DOM has been one of the elements that have been standardized, so that all browsers today have the same address, which has resulted in the benefit of users, but especially developers.

That is why it is now very feasible to create native Javascript code, which works well in all browsers without the need to constantly ask which browser the code is running on. This has made it much easier to use Javascript when working with the client and it is perfectly viable to work only with the language, without the need for third-party libraries, and recommendable at least for simple uses. In , we are going to publish some examples of working with the DOM without using frameworks.

Conclusion on the DOM

The DOM is an essential utility of browsers for working with the web page. Thanks to its standardization, working with the DOM has become easier in recent years, since all browsers currently respond to a very consistent API of functionality on page elements.

Working with the DOM directly is perfectly possible with the Javascript language, although many developers also prefer to use libraries that simplify the task, such as . Even more advanced libraries are in style lately, such as or that allow us to manipulate the page by means of encapsulated components, which save us from the need to work directly with the DOM and yes, with template systems and data links.

If we want to get other introductory texts to the Javascript DOM concept, I recommend reading Wikipedia about the .