JavaScript DOM Document Object Model - Events and operators

JavaScript considers each of the elements of the tree as objects. The objects within the document are called the DOM Document Object Model.

JavaScript DOM Document Object Model - Events and operators | Learn JavaScript | JavaScript considers each of the elements of the tree as objects. The objects within the document are called the DOM Document Object Model

DOM, events, values, arithmetic and comparison operators

In a Web page, the objects that make up the page (or document) are represented by a tree structure.

You will have seen this kind of thing before creating HTML pages, the top level of the page is inside the and tags, along with other tags inside each of them, and so on.

Some browsers can show a representation of this tree structure.

DOM web JavaScript

With the DOM inspector, which is part of Google Chrome, you can see the tree structure of the document; Firefox, Safari, and Internet Explorer incorporate similar functions.

JavaScript considers each of the elements of the document tree as objects, and can use JavaScript to manipulate those objects.

The representation of the objects within the document is called Document Object Model (DOM)

Each of the objects in the tree is also called the node of the tree. We can use JavaScript to modify any aspect of the tree, in addition to being able to add, access, modify and remove the nodes from the tree.

Each object of the tree is a node. If the node contains an HTML tag, it receives the name node element; otherwise, it is called a text node. Of course, the element nodes can contain text nodes.

Event Handling

Events are actions that the user performs while visiting a page. Submitting a form and moving the mouse over an image are two examples of events.

JavaScript uses commands called event handlers to work with events.

A user action on the page triggers an event handler in his script.

In the following table you will find the list of the twelve most common event handlers.

Events handlers

Events What it handles


The user aborted the page load


The user left the object


The user changed the object


The script encountered an error


The user activated an object


The object finished downloading


The cursor moved on an object


The cursor was removed from an object


The user selected the content of an object


The user sent a form


The user left the page

Let's say, for example, that our cat manipulates the event onmimo performing the actions purr and stretch.

In JavaScript, if the user clicks a button, the onclick event handler will record the action and perform the assigned tasks.

When writing a script, it is not necessary to anticipate any possible action that the user can take, enough with those in which you want something special to happen.

For example, your page will load well without the need for an onLoad event handler. But you should use the onLoad command if you want to launch a script as soon as the page loads.

Values and variables

In JavaScript, a piece of information is a value. There are different kinds of values; the ones that will be most familiar to you are the numbers.

A string value is a word or words enclosed in quotation marks.

The following table shows a list of JavaScript values.

Types of values

Type Description Example


Any numeric value



Characters in quotes

"¡Hello World!"


True or false



Empty and meaningless



Any value associated with the object



Value returned by a function


The variables contain values. For example, the variable "MyName" can be assigned the string "Aurora".

Another way to write this is my name = "Aurora". The equality sign can be read as "is set to", or as "is equal to".

In other words, the variable myName now contains the value Aurora.


  • JavaScript is case-sensitive. This means that my name is not the same as myName, or MyName
  • Variable names cannot contain spaces or other punctuation characters, not starting with a digit. Neither can any of the JavaScript reserved words be used

Operators in JavaScript

Operators are the symbols used to work with variables.

He is already familiar with them thanks to elementary arithmetic: the plus and minus signs are operators.

The following table shows the complete list of operators.


Number Any numerical value

x+y (numerical)

X and Y sum

x+y (string)

Concatenate xy


Subtract y from x


Multiply x y


Divide x between y

X % y

Module xy (for example, the rest when x is divided by y)

X++, ++x

Add one ax (same as x = x + 1)


Subtract one from x (same as x = x-1)


Reverse the sign of x

Although both x ++ and ++ x add one to the variable x, they are not identical; the first increases x after the assignment has been completed, and the second, before. For example, if x is 5, y = x ++ results in y being set to 5, y = x ++ results in y being set to 5 yxa 6, while y = ++ x results in both x and y and assigned the value 6. The operator - (minus sign) works in a similar way.

Assignments and comparisons

When you place a value in a variable, that value is assigned to the variable, and for this you must use an assignment operator.

For example, use the equality operator to make an assignment, as in the case of yourName = "Antonio".

The full list of assignment operators is shown in the following table.


Assignment Action


Set x to the value of y (assign the value of yax)


Equal to x = x + y


Equal to x = x and


Equal to x = x * y


Same as x = x / y


Same as x = x

Assignment operators other than the equality sign serve as shortcuts to modify the value of the variables. For example, a shorter way to say x = x + 5 is x + = 5


You will often have to compare the value of one variable with another, or the value of a variable with a literal value (that is, the value directly written in the expression).

For example, you could compare the value of the day of the week with "Tuesday", for which you will have to check if todayDate == "Tuesday".

The complete list of comparisons is shown in the following table.


Comparison Action


Returns true if xy are equal


Returns true if xy are not equal


Returns true if x is greater than y


Returns true if x is greater than or equal to y


Returns true if x is less than y


Returns true if x is less than or equal to y


Returns true if xy are true


Returns true if x or y is


Returns true if x is false

If you are comparing strings, keep in mind that "a" is greater than "A", and that "abracadabra" is better than "be".


ChatGPT Free
Ask questions on any topic


For homework, research, thesis, books, magazines, blogs or academic articles

APA Format Reference:

Delgado, Hugo. (2019).
JavaScript DOM Document Object Model - Events and operators.
Retrieved Jan 12, 2024, from


Share it with your friends in Social Networks!

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.



Not finding what you need?

Use our internal search to discover more information
Related content:

Would you like to learn more about Web Design?

Meet all the courses and tutorials that we have for you completely free
Learn Web Design

Leave your Comment


Your business can also appear here. More information

Your browser has blocked advertising.
Please 🙏 allow to visualize the announcements to be able to access, thank you.