• 0
      1. Tu carrito está vacío.
    • artículo(s)0,00
May 11, 2020 connect

DOM, definition

The word DOM (Document Object Model) refers to the application programming interface (API) for documents HTML, XHTML and XML which defines the logical structure of the documents and the way in which they are accessed, as well as their manipulation. 

Through the DOM, developers can create new documents, navigate their structure, add, modify or delete elements and their content. 

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

DOM structure

In the DOM, documents are represented under a tree structure, through which, on a main element, depend one, none or several secondary elements. The types of nodes found in a web page are listed below:

  • DocumentThe root node: is the root node from which the others are created.
  • ElementThe following is a reference to each of the labels HTML being the only node that can contain attributes and from which other nodes can be created. 
  • AttrThe value of the node: each attribute of a label generates this node, which has its value as a property.
  • TextThe text of a label is referred to as HTML.
  • CommentThe comments are included in the HTML.

DOM structure for HTML documents

In a document HTMLthe main label is htmlknown as the root element. From this, two tags are created called head y bodyboth at the same level. 

On the label headIn this way, the document's metadata are defined, such as the page title, the meta tags that refer to it, for example its coding, and scripts are added for the operation of the document.

On the label bodyIf you are a member of the team, you define the structure or layout of the document. You can add as many labels as you need and you can also manipulate the styles through CSS and help interaction through the JavaScript language. In this tag, scripts can also be added.

 

Example of DOM

What the DOM is not according to the W3C

According to W3C specifications, the DOM is not:

  • The Document Object Model is not a binary specification. 
  • The Document Object Model is not a way to provide persistent objects for XML o HTMLDOM specifies the documents as XML y HTML are represented as objects, so that they can be used by object-oriented programs.
  • The Document Object Model is not a set of data structures, it is an object model that specifies applications.
  • The Document Object Model does not define which information in a document is relevant or which information in a document is structured.

What's the difference with the BOM?

The BOM (Browser Object Model) refers to the convention of browser elements. Unlike the DOM, the BOM does not require a specific structure or any definitionSo browser providers can develop the structure that suits them best. 

The concept was introduced by versions 3.0 of the Netscape and Internet Explorer browsers, which allows access and modification of the properties of the browser windows. Some of its elements are the following:

  • You can create, move, resize and close browser windows.
  • Information about the browser can be obtained.
  • You can manage the cookies.
  • You can obtain and modify properties of the current page and the user's screen. 
  • You can manipulate ActiveX objects in the Internet Explorer browser.

DOM's relationship with SEO

Since the rendering times of a website directly influence the positioning of that website, it is necessary to know how the structure of the DOM influences it. 

Reduce and correctly apply the elements of the DOM

The more elements the DOM has, the longer it will take to load the web since greatly increases the use of memory and makes the calculations of the styles of the sheets CSS last longerThe use of these tools will be reduced to those just necessary for the layout of the web, and this will have a positive influence on its rendering. In addition, the labels must be used correctly. For example, headings should be used following the levels, first h1, then h2, then h3 and so on until h6. 

Correct use of JavaScript

Another important factor to consider is the correct use of JavaScript and AJAX (Asynchronous JavaScript and XML) as it allows developers to perform changes in content without having to load all the HTMLThe site will load faster and the changes will be appreciated more quickly. 

Use of a CDN

A CDN (Content Delivery Network) is a network of servers that are connected and distributed around the world in various data centers, which aim at flexible content delivery. The use of CDNs, for example, libraries as jquery within the DOM scripts should be considered since they considerably reduce the web loading time since the user will bring the contents from the geographically closest CDN. This avoids having to have such a library stored inside the server where that website is hosted, so the amount of content to be processed will be less. 

Minimize HTML, CSS and JavaScript content

The technique of file mining is widely known within web development. Minimizing consists of making all the content of a file without spaces, line breaks and comments, so that the user does not appreciate any changes in design, only affects performance. From the developer's point of view, once the content has been minimized and if the developer needs to make any changes, he can use some tool to return the code to its original state. Minimizing both the HTMLThe CSS and JavaScript is a good technique. 

 

Get in Touch
newsletter

Subscribe to the newsletter on ecommerce and digital transformation

Trends, guides
and latest news in ecommerce
technologies.

Además, te regalamos el primer capítulo del libro
«Conecta tu negocio. La transformación digital de los canales de venta»

newsletter
Get in Touch
Contact
connect-logo-white-retinue

Product

Info

Support

Connect your business.

Branding

In HUB 360 you will find all the technology and services for your e-commerce strategy.

Ecommerce

Integra tu ecommerce con tu ERP sistema de gestión y todos tus canales para vender online.

Analytics

BI Studio dashboards are your next generation business intelligence tool.

922-014-341

Proyecto Cofinanciado por el Fondo Europeo de Desarrollo Regional. Beneficiario: Conecta Software Soluciones SLU. Nº expediente: EATIC2019010001. Inversión Aprobada: 173.800,00 €. Comienzo: 01/04/2019. Finalización: 30/09/2020. El presente proyecto tiene como objetivo el desarrollo de una capa de usuario multilingüe y dashboards para entornos web y windows de solución de Business Intelligence.

Project co-financed by the European Regional Development Fund. Beneficiary: Conecta Software Soluciones SLU. File number: PI2019010001. Approved Investment: 6,444.80 Start date: 17/10/2018. Completion: 16/10/2019. The present project aims at developing a connector software that automates the generation of virtual catalogues so that the company can offer in its Online Store products with a wide description and with images that make the user experience richer and more complete.

2020 ALL RIGHTS RESERVED. CONNECT SOFTWARE

Contact
English (UK)
English (UK) Español Deutsch