{"id":824,"date":"2024-07-31T07:35:08","date_gmt":"2024-07-31T05:35:08","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=824"},"modified":"2024-07-31T07:35:09","modified_gmt":"2024-07-31T05:35:09","slug":"008-dom-traversing-recorriendo-el-dom","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/008-dom-traversing-recorriendo-el-dom\/","title":{"rendered":"008. DOM Traversing: Recorriendo el DOM"},"content":{"rendered":"\n

El DOM Traversing<\/strong> son una serie de propiedades<\/strong> que nos da el API del DOM<\/strong> para, tomando como referencia un nodo<\/strong>, poder recorrer diferentes elementos<\/strong>.<\/p>\n\n\n\n\n\n\n\n

\n

Nota<\/strong>: todos los m\u00e9todos<\/strong> que vamos a ver son para los elementos<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n

Como vimos en cap\u00edtulos anteriores, hay diferentes tipos de nodos<\/strong>, podemos verlos pinchando aqu\u00ed<\/strong><\/a>. Recordamos que hay 12 tipos de nodos<\/strong> diferentes, uno de ellos son los elementos<\/strong>, que es lo que hemos estado viendo hasta ahora, que son las etiquetas HTML<\/strong>, tenemos nodos de texto<\/strong>, nodos de comentarios<\/strong>, nodos de fragmentos<\/strong>…<\/p>\n\n\n\n

El DOM Traversing<\/strong> que vamos a ver es el enfocado a los elementos<\/strong>, es decir, a las etiquetas HTML<\/strong> como tal.<\/p>\n\n\n\n

Ejm<\/h2>\n\n\n\n

Vamos a trabajar sobre un ejm para entender el funcionamiento.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>DOM Traversing<\/title>\n    <style>\n      :root {\n        --yellow-color: #f7df1e;\n        --dark-color: #222;\n      }\n      .cards {\n        border: thin solid var(--dark-color);\n        padding: 1rem;\n      }\n      .card {\n        display: inline-block;\n        background-color: var(--dark-color);\n        color: var(--yellow-color);\n      }\n      .card figcaption {\n        padding: 1rem;\n      }\n      .rotate-45 {\n        transform: rotate(45deg);\n      }\n    <\/style>\n  <\/head>\n\n  <body>\n    <h1>DOM Traversing<\/h1>\n\n    <section class=\"cards\">\n      <figure class=\"card\">\n        <img src=\"tech.jpg\" alt=\"Tech\" \/>\n        <figcaption>Tech<\/figcaption>\n      <\/figure>\n      <figure class=\"card\">\n        <img src=\"animals.avif\" alt=\"Animals\" \/>\n        <figcaption>Animals<\/figcaption>\n      <\/figure>\n      <figure class=\"card\">\n        <img src=\"people.avif\" alt=\"People\" \/>\n        <figcaption>People<\/figcaption>\n      <\/figure>\n      <figure class=\"card\">\n        <img src=\"arch.webp\" alt=\"Arch\" \/>\n        <figcaption>Arch<\/figcaption>\n      <\/figure>\n      <figure class=\"card\">\n        <img src=\"nature.jpg\" alt=\"Nature\" \/>\n        <figcaption>Nature<\/figcaption>\n      <\/figure>\n    <\/section>\n\n    <script>\n      const $cards = document.querySelector(\".cards\");\n       \/\/ Hijos de la clase .cards\n       \/\/ Devuelve un tipo de dato HTMLCollection console.log($cards.children);\n       \/\/ Acceder a un hijo en particular (el tercero) console.log($cards.children[2]);\n       \/\/ Padre de la clase .cards console.log($cards.parentElement);\n       \/\/ Primer elemento hijo console.log($cards.firstElementChild);\n       \/\/ \u00daltimo elemento hijo console.log($cards.lastElementChild);\n       \/\/ Hermano que est\u00e1 antes console.log($cards.previousElementSiblint)\n       \/\/ Hermano que est\u00e1 despu\u00e9s console.log($cards.nextElementSibling)\n       \/\/ Padre m\u00e1s cercano del tipo de selector que pasemos\n       \/\/ Mostrar\u00e1 el div m\u00e1s cercano console.log($cards.closest(\"div\"));\n       console.log($cards);\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n\n\n\n
Resumen<\/h2>\n\n\n\n
    \n
  • children<\/em><\/strong>: para ver los elementos hijos.<\/li>\n\n\n\n
  • parentElement<\/em><\/strong>: para ver el elemento padre.<\/li>\n\n\n\n
  • firstElementChild<\/em><\/strong>: hace referencia al primer elemento hijo<\/li>\n\n\n\n
  • lastElementChild<\/em><\/strong>: hace referencia al \u00faltimo elemento hijo<\/li>\n\n\n\n
  • previousElementSibling<\/em><\/strong>: hace referencia al hermano que est\u00e1 antes<\/li>\n\n\n\n
  • nextElementSibling<\/em><\/strong>: hace referencia al heramno que est\u00e1 despu\u00e9s<\/li>\n\n\n\n
  • closest(\u00abselector\u00bb)<\/em><\/strong>: mostrar\u00e1 el elemento m\u00e1s cercano al tipo de selector que estemos pasando<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    El DOM Traversing son una serie de propiedades que nos da el API del DOM para, tomando como referencia un nodo, poder…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-824","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":"El DOM Traversing son una serie de propiedades que nos da el API del DOM para, tomando como referencia un nodo, poder...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/824","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=824"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/824\/revisions"}],"predecessor-version":[{"id":826,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/824\/revisions\/826"}],"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=824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}