{"id":803,"date":"2024-07-31T07:23:09","date_gmt":"2024-07-31T05:23:09","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=803"},"modified":"2024-07-31T07:23:09","modified_gmt":"2024-07-31T05:23:09","slug":"001-dom-web-apis","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/001-dom-web-apis\/","title":{"rendered":"001. DOM: WEB APIs"},"content":{"rendered":"\n<p>Los siguientes cap\u00edtulos van a estar dedicados a las <strong>WEB APIs<\/strong>, y en especial a la <strong>API del DOM<\/strong>, que es la que trabaja con los elementos <strong>HTML<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>API<\/strong> significa <strong>Aplication Programming Interface<\/strong>, o <strong>Interfaz de Programaci\u00f3n de Aplicaci\u00f3n<\/strong>. En un lenguaje de programaci\u00f3n, una <strong>API<\/strong> es aquella serie de <strong>objetos<\/strong> y <strong>mecanismos<\/strong> que tiene el lenguaje implementado en ciertas \u00e1reas para poder interactuar con todo lo que tiene que ver con el navegador, como es el <strong>\u00e1rbol de la estructura del documento HTML<\/strong>, lo que viene a ser el <strong>Document Object Model<\/strong> (<strong>DOM<\/strong>), como todo el control de la <strong>ventana del navegador<\/strong>, es decir, la <strong>barra<\/strong> <strong>de direcciones<\/strong>, el <strong>tama\u00f1o<\/strong>, el <strong>posicionamiento<\/strong>, el <strong>sistema operativo<\/strong> en el que est\u00e1 el usuario, la <strong>ubicaci\u00f3n geogr\u00e1fica<\/strong>&#8230; que forman el <strong>BOM<\/strong>, el <strong>CSS Object Model<\/strong> o <strong>CSSOM<\/strong>&#8230;<\/p>\n\n\n\n<p>A partir de aqu\u00ed tenemos una cantidad infinita de <strong>WEB APIs<\/strong> que nos sirven casi para cualquier cosa, entre las que destacan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Eventos<\/li>\n\n\n\n<li>Foms<\/li>\n\n\n\n<li>AJAX &#8211; Fetch<\/li>\n\n\n\n<li>History<\/li>\n\n\n\n<li>Web Storage<\/li>\n\n\n\n<li>Geolocation<\/li>\n\n\n\n<li>Drag &amp; Drop<\/li>\n\n\n\n<li>Indexed DB<\/li>\n\n\n\n<li>Canvas<\/li>\n\n\n\n<li>MatchMedia<\/li>\n<\/ul>\n\n\n\n<p>Principalmente nos interesa el manejo de <strong>eventos<\/strong>, <strong>formularios<\/strong>, <strong>consumo de datos as\u00edncronos<\/strong> con <strong>AJAX<\/strong> y <strong>Fetch<\/strong>, el <strong>historial<\/strong>, <strong>almacenamiento en la web<\/strong>, la <strong>ubicaci\u00f3n<\/strong>, <strong>Indexed DB<\/strong> es una peque\u00f1a base de datos que se guarda en la web, <strong>Canva<\/strong>&nbsp;nos sirve para dibujar, <strong>MatchMedia<\/strong> controla las <strong>media queries <\/strong>de<strong> CSS<\/strong> pero en <strong>Javascript<\/strong>&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DOM (Document Object Model)<\/h2>\n\n\n\n<p>El <strong>DOM<\/strong> es como los navegadores representan el c\u00f3digo <strong>HTML<\/strong> y <strong>XML<\/strong> para trabajarlo con <strong>Javascript<\/strong>. Esto es lo que vamos a ir viendo en los siguientes cap\u00edtulos. Es importante saber que el <strong>DOM<\/strong> es una interfaz estandarizada. El <strong>DOM<\/strong> se queda \u00fanicamente en el control de los nodos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSSOM (CSS Object Model)<\/h2>\n\n\n\n<p>En el <strong>CSSOM<\/strong> entra todo lo que tiene que ver con el CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">BOM (Browser Object Model)<\/h2>\n\n\n\n<p>No se considera una <strong>API<\/strong> est\u00e1ndar, ya que cada navegador, internamente tiene diferentes formas de manejar ciertas cosas, sin embargo, desde los \u00faltimos a\u00f1os los navegadores van sacando cada vez las mismas caracter\u00edsticas mas o menos al mismo tiempo, y soport\u00e1ndolas m\u00e1s o menos de la misma manera. La <strong>API del Browser<\/strong> son todas las acciones que podemos hacer para, por ejm, detectar la <strong>ubicaci\u00f3n del usuario<\/strong>, detectar en que posici\u00f3n de nuestra pantalla est\u00e1 la ventana, cual es el ancho y el alto, el manejo del <strong>historial<\/strong>, de la <strong>barra de direcciones<\/strong>&#8230;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: El <strong>DOM<\/strong> es la manipulaci\u00f3n del <strong>HTML<\/strong> mediante <strong>Javascript<\/strong>, mientras que el <strong>CSSOM<\/strong> es la manipulaci\u00f3n del <strong>CSS<\/strong> mediante <strong>Javascript<\/strong>. El <strong>BOM<\/strong> es la manipulaci\u00f3n del <strong>browser<\/strong> mediante <strong>Javascript<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p>Aunque vamos a seguir manejando algunas cosas en la <strong>consola<\/strong>, cada vez m\u00e1s comenzaremos a usar el <strong>HTML<\/strong>.<\/p>\n\n\n\n<p>Del objeto global <em><strong>window<\/strong><\/em> cuelga <em><strong>navigator<\/strong><\/em>, si mandamos <em><strong>navigator<\/strong><\/em> a la <strong>consola<\/strong> podemos ver muchos detalles, podemos detectar el <strong>idioma<\/strong> en el cual est\u00e1 el documento <strong>HTML<\/strong>, la <strong>plataforma<\/strong>, es decir, el <strong>sistema operativo<\/strong>, el <strong>User Agent<\/strong>, es decir, las caracter\u00edsticas del <strong>navegador<\/strong>, la <strong>geolocalizaci\u00f3n<\/strong>, el <strong>historial<\/strong>, el <strong>puerto<\/strong>, el <strong>protocolo<\/strong>, el <strong>pathname<\/strong>, el <strong>localStorage<\/strong> (<strong>almacenamiento local<\/strong>), todo cuelga de nuestro objeto <em><strong>window<\/strong><\/em>. Incluso del objeto <em><strong>window<\/strong><\/em> cuelga <strong><em>document<\/em><\/strong>, que es el \u00e1rbol del <strong>DOM.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los siguientes cap\u00edtulos van a estar dedicados a las WEB APIs, y en especial a la API del DOM, que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-803","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Los siguientes cap\u00edtulos van a estar dedicados a las WEB APIs, y en especial a la API del DOM, que [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=803"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/803\/revisions"}],"predecessor-version":[{"id":805,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/803\/revisions\/805"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/800"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}