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).
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
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.
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.
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.