DOM

Document Object Model or DOM is essentially a platform interface that provides a standard set of objects to represent HTML, XHTML and XML documents, a standard model for how such objects can be combined, and a standard interface for accessing and manipulating them.

Through the DOM, programs can access and modify the content, structure, and style of HTML and XML documents, which is what it was primarily designed for.

The head of the DOM is the World Wide Web Consortium (W3C).

The DOM enables dynamic access through programming to dynamically access, add, and change structured content in documents with languages such as ECMAScript (JavaScript).

Referencing objects

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

Any suitable programming language for web design can be used. In the case of JavaScript, each object has a name, which is unique and exclusinve. 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 refer to it, for example:

div id = "John"> .... </div

To refer to elements of the same type, which, as mentioned, are organized in a vector, the dot notation can be used as follows.

document.div [0]
document.div ["Juan"]
document.div.Juan

Where the element “Juan” is the first of the vector of elements of type <div>.

You can also use the getElementById function.

document.getElementById ("John") 

Manipulate an object

Computational objects, like any object in real life, 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 object «Glass»

Glass.color = red;

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 randomTextFunction (Text) {
  var NewText = "";
  while (letters in Text) {
    // read the next letter
    // if this letter is not "a" add it to the new text
  }
  return NewText;
}

It adds a new function to the document used to create a web page.

Events

An event from the computational point of view occurs when a situation changes on the computer, such as, for example, 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, it is desired that the computer respond in some way.

This is the reason why there are event handlers which are objects that respond to events. One way to add events to the DOM using javascript is:

element onevent = "script"> .... </element

For example:

div id = "midivision" onClick = "javascript: randomTextFunction ('bar');">
Here is another text
</div

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

object.event = function;
//how can it be:
document.midivision.onclick = doSomething;
// as well:
document.getElementById ("midivision"). onclick = doSomething;

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

EVENT → Window → Document → HTML → BODY → DIV → DESTINATION

ANSWER → DIV → BODY → HTML → Document → Window → EVENT

Following this idea, three stages are established: capture, which occurs when the event is moving to its destination. Target, what happens 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 pending of certain events. To do this the object adds an “event listener” with the addEventListener function. When the event occurs, some certain function is carried out. In this process, it is indicated when the function is carried out, either in the capture stage or in the bubbling stage. This time is indicated by 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, function, moment);

for example:

document.getElementById ("mydivision"). addEventListener ("click", doSomething, false); 
object.addEventListener (event, function, moment);