{"id":29027,"date":"2021-08-14T13:25:35","date_gmt":"2021-08-14T13:25:35","guid":{"rendered":"https:\/\/www.conectasoftware.com\/glossary\/el-dom-y-su-relacion-con-el-seo\/"},"modified":"2023-12-10T21:58:28","modified_gmt":"2023-12-10T21:58:28","slug":"dom","status":"publish","type":"glossary","link":"https:\/\/www.conectasoftware.com\/magazine\/glosario\/dom\/","title":{"rendered":"DOM<\/span>"},"content":{"rendered":"

DOM, definici\u00f3n<\/b><\/h2>\n

La palabra DOM (Document Object Model) o Modelo de Objetos de Documento hace referencia a la interfaz de programaci\u00f3n de aplicaciones (API<\/a>) para documentos HTML, XHTML y XML que define la estructura l\u00f3gica de los documentos y la manera en la que se accede a ellos, as\u00ed como su manipulaci\u00f3n.\u00a0<\/span><\/p>\n

A trav\u00e9s del DOM, los desarrolladores pueden crear nuevos documentos, navegar por su estructura, a\u00f1adir, modificar o eliminar elementos y su contenido.\u00a0<\/span><\/p>\n

El responsable del DOM es el <\/span>W3C (World Wide Web Consortium)<\/span><\/a>.<\/span><\/p>\n

Estructura del DOM<\/b><\/h2>\n

En el DOM, los documentos se representan bajo una estructura del tipo \u00e1rbol, a trav\u00e9s del cual, de un elemento principal, dependen uno, ninguno o varios elementos secundarios. Los tipos de nodos que se encuentran en una p\u00e1gina web se enumeran a continuaci\u00f3n:<\/span><\/p>\n

    \t<\/p>\n
  • Document<\/b>: es el nodo ra\u00edz a partir de cual se crean los dem\u00e1s.<\/span><\/li>\n

    \t<\/p>\n

  • Element<\/b>: hace referencia a cada una de las etiquetas HTML siendo el \u00fanico nodo que puede contener atributos y del que se pueden crear otros nodos.\u00a0<\/span><\/li>\n

    \t<\/p>\n

  • Attr<\/b>: cada atributo de una etiqueta genera este nodo, el cual, tiene su valor como una propiedad.<\/span><\/li>\n

    \t<\/p>\n

  • Text<\/b>: hace referencia al texto de una etiqueta HTML.<\/span><\/li>\n

    \t<\/p>\n

  • Comment<\/b>: son los comentarios que se incluyen en el HTML.<\/span><\/li>\n

    <\/ul>\n

    <\/p>\n

    Estructura DOM para los documentos HTML<\/b><\/h2>\n

    En un documento HTML, la etiqueta principal es <\/span>html<\/b>, conocida como el elemento root. A partir de \u00e9sta, se crean dos etiquetas llamadas <\/span>head <\/b>y <\/span>body<\/b>, ambas al mismo nivel.\u00a0<\/span><\/p>\n

    En la etiqueta <\/span>head<\/b>, se definen los metadatos del documento, como el t\u00edtulo de la p\u00e1gina, las etiquetas meta que hacen referencia, por ejemplo a su codificaci\u00f3n y se a\u00f1aden scripts para el funcionamiento del documento.<\/span><\/p>\n

    En la etiqueta <\/span>body<\/b>, se define la estructura o maquetado del documento. Se pueden a\u00f1adir tantas etiquetas como sean necesarias adem\u00e1s, se pueden manipular los estilos a trav\u00e9s de CSS y ayudar a la interacci\u00f3n a trav\u00e9s del lenguaje JavaScript. En esta etiqueta, tambi\u00e9n pueden ser a\u00f1adidos scripts.<\/span><\/p>\n

     <\/p>\n

    \"EJemplo<\/p>\n

    Lo que el DOM no es seg\u00fan el W3C<\/b><\/h2>\n

    Seg\u00fan las especificaciones del W3C, el DOM no es<\/strong>:<\/span><\/p>\n

      \t<\/p>\n
    • El Modelo de Objetos del Documento no es una especificaci\u00f3n binaria.\u00a0<\/span><\/li>\n

      \t<\/p>\n

    • El Modelo de Objetos del Documento no es una manera de ofrecer objetos persistentes para XML o HTML, DOM especifica los documentos como XML y HTML son representados como objetos, de modo que pueden ser utilizados por programas orientados a objetos.<\/span><\/li>\n

      \t<\/p>\n

    • El Modelo de Objetos del Documento no es un conjunto de estructuras de datos, es un modelo de objeto que especifica aplicaciones.<\/span><\/li>\n

      \t<\/p>\n

    • El Modelo de Objetos del Documento no define qu\u00e9 informaci\u00f3n en un documento es relevante o que informaci\u00f3n en un documento es estructurado.<\/span><\/li>\n

      <\/ul>\n

      <\/p>\n

      \u00bfCu\u00e1l es la diferencia con el BOM?<\/b><\/h2>\n

      El BOM (Browser Object Model) o Modelo de Objetos de Navegador hace referencia a la convenci\u00f3n de los elementos del navegador<\/strong>. A diferencia con el DOM, el BOM no requiere una estructura espec\u00edfica ni ninguna definici\u00f3n<\/strong>, por lo que los proveedores de navegadores pueden desarrollar la estructura que m\u00e1s les convenga.\u00a0<\/span><\/p>\n

      El concepto fue introducido por las versiones 3.0 de los navegadores Netscape e Internet Explorer el cual, permite acceder y modificar las propiedades de las ventanas de los navegadores. Algunas de los elementos que lo conforman son los siguientes:<\/span><\/p>\n

        \t<\/p>\n
      • Se pueden crear, mover, redimensionar y cerrar ventanas de los navegadores.<\/span><\/li>\n

        \t<\/p>\n

      • Se puede obtener informaci\u00f3n sobre el navegador.<\/span><\/li>\n

        \t<\/p>\n

      • Se pueden gestionar las cookies.<\/span><\/li>\n

        \t<\/p>\n

      • Se pueden obtener y modificar propiedades de la p\u00e1gina actual y de la pantalla del usuario.\u00a0<\/span><\/li>\n

        \t<\/p>\n

      • Se pueden manipular objetos ActiveX en el navegador Internet Explorer.<\/span><\/li>\n

        <\/ul>\n

        <\/p>\n

        Relaci\u00f3n del DOM con el SEO<\/b><\/h2>\n

        Dado que los tiempos de renderizaci\u00f3n de un sitio web influyen directamente en el posicionamiento de dicho sitio web, es necesario conocer c\u00f3mo influye la estructura del DOM en el mismo.\u00a0<\/span><\/p>\n

        Reducir y aplicar correctamente los elementos del DOM<\/b><\/h3>\n

        Cuantos m\u00e1s elementos tenga el DOM, m\u00e1s tardar\u00e1 en cargar la web ya que aumenta mucho el uso de memoria y hacen que los c\u00e1lculos de los estilos de las hojas CSS duren m\u00e1s<\/strong>, por lo que reducir el uso de los mismos a los justamente necesarios para el maquetado de la web, influir\u00e1 de manera positiva en su renderizaci\u00f3n. Adem\u00e1s, se deben utilizar las etiquetas de forma correcta. Por ejemplo, se deben utilizar los encabezados siguiendo los niveles, primero h1, luego h2, despu\u00e9s h3 y as\u00ed sucesivamente hasta h6.\u00a0<\/span><\/p>\n

        Correcto uso de JavaScript<\/b><\/h3>\n

        Otro factor importante a tener en cuenta es el correcto uso de JavaScript y AJAX (Asynchronous JavaScript and XML) ya que permite a los desarrolladores realizar cambios en el contenido sin tener que cargar todo el HTML<\/strong>, por lo que la web cargar\u00e1 m\u00e1s r\u00e1pido y los cambios se apreciar\u00e1n m\u00e1s r\u00e1pido.\u00a0<\/span><\/p>\n

        Uso de un CDN<\/b><\/h3>\n

        Un CDN (Content Delivery Network) es una red de servidores que se encuentran conectados y distribuidos por todo el mundo en varios centros de datos, que tienen por objetivo la entrega flexible de contenido. Se debe considerar el uso de CDN, por ejemplo, de librer\u00edas como jquery dentro de los scripts del DOM ya que reducen considerablemente el tiempo de carga de la web ya que, el usuario se traer\u00e1 los contenidos desde el CDN m\u00e1s cercano geogr\u00e1ficamente hablando. Esto evita el tener que tener dicha librer\u00eda almacenada dentro del servidor<\/strong> d\u00f3nde se encuentra alojado dicho sitio web, por lo que la cantidad de contenido a procesar ser\u00e1 menor.\u00a0<\/span><\/p>\n

        Minificar el contenido del HTML, CSS y JavaScript<\/b><\/h3>\n

        La t\u00e9cnica de minificar los ficheros es ampliamente conocida dentro del desarrollo web. Minificar consiste en hacer que todo el contenido de un fichero se quede sin espacios, saltos de l\u00ednea y comentarios, de forma que el usuario no aprecia ning\u00fan cambio en el dise\u00f1o, solamente afecta al rendimiento<\/strong>. Desde el punto de vista del desarrollador, una vez minificado el contenido y si el desarrollador necesita realizar alg\u00fan cambio, \u00e9ste puede utilizar alguna herramienta para que el c\u00f3digo vuelva a su estado original. Minificar tanto los HTML, los CSS y los JavaScript es una buena t\u00e9cnica.\u00a0<\/span><\/p>\n

         <\/p>\n","protected":false},"excerpt":{"rendered":"

        DOM, definici\u00f3n La palabra DOM (Document Object Model) o Modelo de Objetos de Documento hace referencia a la interfaz de programaci\u00f3n de aplicaciones (API) para documentos HTML, XHTML y XML que define la estructura l\u00f3gica de los documentos y la manera en la que se accede a ellos, as\u00ed como su manipulaci\u00f3n.\u00a0 A trav\u00e9s del […]<\/p>\n","protected":false},"author":1,"featured_media":17584,"menu_order":0,"template":"","meta":{"content-type":"","footnotes":""},"glossary-categories":[94],"glossary-tags":[],"glossary-languages":[],"class_list":{"0":"post-29027","1":"glossary","2":"type-glossary","3":"status-publish","4":"has-post-thumbnail","6":"glossary-categories-seo"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/glossary"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29027\/revisions"}],"predecessor-version":[{"id":39267,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29027\/revisions\/39267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/17584"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=29027"}],"wp:term":[{"taxonomy":"glossary-categories","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-categories?post=29027"},{"taxonomy":"glossary-tags","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-tags?post=29027"},{"taxonomy":"glossary-languages","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-languages?post=29027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}