Document Object Model

DOM Hierarchy.

Document Object Model or DOM ('Document Object Model' or 'Model in Objects for Document Rendering') is essentially a platform interface, or programming API for HTML documents, that provides a standard set of objects for rendering HTML, XHTML, XML, and SVG documents, a standard model for how they can be combined such objects, and a standard interface for accessing and manipulating them. Through the DOM, programs can access and modify the content, structure, and style of said documents, which is what it was primarily designed to do.

In this way the DOM allows dynamic access through programming to dynamically access, add and change structured content in documents with languages such as ECMAScript (JavaScript). In fact, the DOM as a cross-language platform interface (cross-language API) for accessing and modifying XML documents is language-independent, so a variety of programming languages use the DOM on a daily basis —such as C++ and Python among others— as they interact with it. XML for various tasks.

The main standardization of the DOM is carried out by the World Wide Web Consortium (W3C).

History

DOM Scheme made by WHATWG (Web Hypertext Application Technology Working Group)

The DOM was born as a set of objects that represent an HTML document, and that act as an interface between JavaScript and the document itself, its origin is Netscape Navigator from the company Netscape Communications. Designed to detect events generated by the user and modify the HTML document, its first generation is known as DOM Level 0 or legacy (DOM Level 0 or Legacy DOM).

It originally arose under the influence of at least two developments that have significantly shaped the world of computing in the recent past. Both are based on the need to be able to easily and uniformly access structured data in HTML and XML documents.

In the mid-1990s, as the popularity of the World Wide Web increased, the JavaScript scripting language was invented, and since then, Web browsers have included interpreters that execute scripts.

Microsoft's Internet Explorer followed Netscape Navigator, these two browsers included support for Dynamic HTML (DHTML), which required extensions then offered by the rudimentary DOM of the time, allowing web developers to create pages with interactivity on the side. from the client, so the document could now be manipulated via the DOM; however, the same document was not rendered in the same way by the two browsers.

JavaScript interpreters, or engines for JavaScript, were widely implemented by both browsers. Microsoft at that time decided to implement, for the then Internet Explorer, JScript and VBScript, which gave rise to the so-called "browser wars" from the late 1990s between Netscape Navigator and Internet Explorer.

So JavaScript defined rudimentary ways to access the HTML document and handle events. Later, different browser manufacturers invented different models of Dynamic HTML (DHTML) that allowed more extensive modification of the structure and appearance of the document while it was displayed in the browser. However, these differences made the job of web developers who wanted to use dynamic HTML extremely tedious, as they were often almost forced to write a separate version for each browser. The early W3C (WWW Consortium) DOM standards are thus attempts to merge, standardize, and ultimately replace the various proprietary JavaScript and DHTML techniques that emerged during the browser wars. This has been so successful that the DOM now plays a central role in JavaScript programming.

By September 2008, new browsers are gradually appearing on the scene under the Chromium project, the code base of which is widely used by both the Chrome browser and the more recent Microsoft Edge. Netscape Navigator disappears as a commercial browser leaving Mozilla Firefox as a kind of successor.

These last events and the intervention of the WWW Consortium (W3C), marked a new trend in continuous evolution, gradually disappearing the problems of incompatibility with the adoption of the DOM standardized by the W3C. The DOM (level 4) is now incorporated into the HTML 5 standard, it was released in December 2015 and its last update was in December 2020.

Today the DOM has permeated all programming languages, regardless of language, a variety of programming languages use DOM on a daily basis, such as C++ and Python among others, as they interact with XML applications for various tasks.

Setting object references

The DOM defines the way objects and elements relate to each other in the browser and in the document.

Any programming language suitable for web design can be used. In the case of JavaScript, each object has a name, which is unique and unique. When there is more than one object of the same type in a web document, they are organized in a vector.

It is possible to assign an id to an object, and then use it to reference it, for example:

html:.div id="IdiomasWiki"▪.li▪Deutsch”li▪.li▪English”li▪.li▪Français”li▪”div▪

To reference this element you can use the function getElementById

// JavaScriptdocument.getElementById("IdiomasWiki")

And perform some operation on it, in this case we add a new element:

document.getElementById("IdiomasWiki").innerHTML += "≤320"

Manipulating the properties and functions of objects

Computational objects, just like any real-life object, have properties. Some examples of real-life object properties are dimensions, color, and weight.

In most computational objects some properties can be determined as follows:

Object.property = value;//for example for the "Vaso" objectVaso.color = Red;

Object manipulation follows the same principles as in the programming language being used. One of the characteristics of these objects is the function for which they are designed, in fact, in most cases they have more than one function. In JavaScript, many functions for each of the objects, including the browser and the window that contains it, have been previously defined; Additionally, the user can define functions according to their needs, for example the code:

function comeLaLetraA(Text♪ var TextNew = "; while(letters in Text♪ //read the following letter // if this letter is not "a" add it to the new text ! return TextNew;!

Adds a new function to the document used to create a web page.

Events

An event from the computational point of view occurs when some situation in the computer changes, such as the position of the mouse, the pressing of a key, the contents of any of the memories, the condition of the screen, etc.. In the creation of web pages these events represent the interaction of the user with the computer.

When any of these events occurs, such as the pressing of a mouse button, you want the computer to respond in some way. This is the reason why there are event handlers ('responsible for handling events') which are objects that respond to events. One way to add events to the DOM using JavaScript is:

. onevent="script"▪....▪

For example:

. id="midivision" onClick="javascript:miFuncion('bar');"▪Here goes another text
Δ/div

The pseudo-protocol flag javascript: being an optional add-on, and only used by Microsoft Internet Explorer, where its alternate language VBScript could be set by default.

Another way to handle events in JavaScript, when creating web pages, is by treating them as properties of the elements that make up the page, for example:

object.event = operation;//For example:document.getElementById("midivision").onclick = Do something.;

In the DOM, an event is considered to originate from the outside of the web page and propagate in some way to the internal elements of the page. A possible example of this propagation is:

EVENTO → Window → Document → HTML → BODY → DIV → DESTINO
Answer → DIV → BODY → HTML → Document → Window →

Following this idea, three stages are established: capture, which occurs when the event is moving to its destination. Target, which occurs when it reaches the target, that is, it reaches its destination. This target is the object on which to create a reaction to this event. Finally the bubbling stage that occurs when the event "returns" to its original position.

Certain objects can be aware of certain events. To do this the object adds an "event listener" with the addEventListener function. When the event occurs, some particular function is performed. This process indicates when the function is carried out, either in the capture stage or in the bubbling stage. This moment is indicated with the word true if it should occur in the capture stage or false if it should occur in the bubbling stage. In JavaScript it is written as follows:

object.addEventListener(event, operation, moment);//for example:document.getElementById("mydivision").addEventListener("click", Do something., false);