{"id":809,"date":"2024-07-31T07:27:34","date_gmt":"2024-07-31T05:27:34","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=809"},"modified":"2024-07-31T07:27:34","modified_gmt":"2024-07-31T05:27:34","slug":"003-dom-nodos-elementos-y-selectores","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/003-dom-nodos-elementos-y-selectores\/","title":{"rendered":"003. DOM: Nodos, Elementos y Selectores"},"content":{"rendered":"\n

En este cap\u00edtulo comenzamos a ver como manejar e interactuar con los nodos<\/strong>, y particularmente los elementos<\/strong>, que son las etiquetas HTML<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Nodo no es elemento<\/h2>\n\n\n\n

No hay que confundir un nodo<\/strong> con una etiqueta HTML<\/strong> (elemento<\/strong>). hay diferentes tipos de nodos<\/strong>, por ejm los comentarios HTML<\/strong> son un tipo de nodo<\/strong>, las etiquetas HTML<\/strong> son otro tipo de nodo<\/strong>, los textos<\/strong> para las etiquetas textuales<\/strong> como p\u00e1rrafos<\/strong>, encabezados<\/strong>… son otro tipo de nodo.<\/p>\n\n\n\n

Para interactuar con el HTML<\/strong> como desarrollador web, no nos van a interesar todos los tipos de nodos<\/strong>. Si vamos a MDN<\/strong><\/a> y buscamos Node.nodeType<\/strong><\/a>, existe una tabla que indica los diferentes tipos de nodos<\/strong>, una breve descripci\u00f3n y el valor de los mismos. Encontraremos 12 tipos de nodos<\/strong> distintos, algunos son nodos<\/strong> que se encuentran en documentos XML<\/strong><\/a>.<\/p>\n\n\n\n

\n

Nota<\/strong>: Cada nodo<\/strong> tiene una raz\u00f3n de ser.<\/p>\n<\/blockquote>\n\n\n\n

B\u00e1sicamente, para la interacci\u00f3n de HTML<\/strong>, los que nos va a interesar son los nodos de tipo elemento<\/strong> y los nodos de tipo texto<\/strong>.<\/p>\n\n\n\n

Node.ELEMENT_NODE\nNode.TEXT_NODE<\/pre>\n\n\n\n
Esto es algo muy importante a considerar, sobre todo cuando lleguemos a la parte del DOM traversing<\/strong> (como recorrer el DOM<\/strong>). Un nodo de texto<\/strong> es el texto que se encuentra dentro de las etiquetas de tipo texto, y un nodo de tipo elemento<\/strong> es una etiqueta HTML<\/strong> en particular.<\/p>\n\n\n\n
Ejemplo<\/h2>\n\n\n\n
Vamos a dejar un c\u00f3digo HTML<\/strong> sobre el que estaremos trabajando. El c\u00f3digo es el siguiente.<\/p>\n\n\n\n
Ejm archivo dom.html<\/strong><\/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>Manejo de DOM<\/title>\n  <script src=\"dom.js\"><\/script>\n<\/head>\n<body>\n  <h2>Manejo de DOM<\/h2>\n  <p id=\"que-es\">\n   Lorem ipsum dolor sit, amet consectetur adipisicing elit. \n   Vitae facilis, adipisci necessitatibus veritatis maiores, \n   magni amet nisi dolor excepturi obcaecati laudantium animi \n   eos accusamus. Eaque at voluptate quidem ipsa mollitia!\n  <\/p>\n\n<nav id=\"menu\">\n  <ul>\n   <li><a href=\"\">Secci\u00f3n S<\/a><\/li>\n   <li><a href=\"\">Secci\u00f3n S<\/a><\/li>\n   <li><a href=\"\">Secci\u00f3n S<\/a><\/li>\n   <li><a href=\"\">Secci\u00f3n S<\/a><\/li>\n   <li><a href=\"\">Secci\u00f3n S<\/a><\/li>\n  <\/ul>\n<\/nav>\n\n<input type=\"text\" name=\"nombre\" placeholder=\"Nombre\">\n\n<a class=\"link-dom\" href=\"dom.html\">DOM<\/a>\n\n<section class=\"cards\">\n  <figure class=\"card\">\n   <img src=\"https:\/\/placeimg.com\/200\/200\/tech\" alt=\"Tech\">\n   <figcaption>Tech<\/figcaption>\n  <\/figure>\n  <figure class=\"card\">\n   <img src=\"https:\/\/placeimg.com\/200\/200\/animals\" alt=\"Animals\">\n   <figcaption>Animals<\/figcaption>\n  <\/figure>\n  <figure class=\"card\">\n   <img src=\"https:\/\/placeimg.com\/200\/200\/people\" alt=\"People\">\n   <figcaption>People<\/figcaption>\n  <\/figure>\n  <figure class=\"card\">\n   <img src=\"https:\/\/placeimg.com\/200\/200\/arch\" alt=\"Arch\">\n   <figcaption>Arch<\/figcaption>\n  <\/figure>\n  <figure class=\"card\">\n   <img src=\"https:\/\/placeimg.com\/200\/200\/nature\" alt=\"Nature\">\n   <figcaption>Nature<\/figcaption>\n  <\/figure>\n<\/section>\n<\/body>\n<\/html><\/pre>\n\n\n\n
M\u00e9todos del DOM<\/h2>\n\n\n\n
Vamos a comenzar a ver cuales son los m\u00e9todos<\/strong> que tiene el DOM<\/strong> para poder capturar elementos del documento HTML<\/strong> en variables Javascript<\/strong>.<\/p>\n\n\n\n
M\u00e9todos en desuso<\/h3>\n\n\n\n
Existen algunos m\u00e9todos en desuso, que han sido reemplazados por otros, y son:<\/p>\n\n\n\n
    \n
  • getElementsByTagName()<\/em><\/strong>: imprime todos los elementos de cierta etiqueta.<\/li>\n\n\n\n
  • getElementsByClassName()<\/em><\/strong>: imprime los elementos con cierta clase.<\/li>\n\n\n\n
  • getElementsByName()<\/em><\/strong>: accede a trav\u00e9s del atributo name<\/em><\/strong>. Se utiliza sobretodo en los elementos de formulario, donde es importante poner el atributo name<\/em><\/strong> porque cuando procesamos un formulario<\/strong> y enviamos esa informaci\u00f3n, gracias a dicho atributo name<\/em><\/strong>, el lenguaje de lado de servidor lo detecta como una variable<\/strong> de tipo POST<\/em><\/strong> o de tipo GET<\/em><\/strong>.<\/li>\n\n\n\n
  • getElementById()<\/em><\/strong>: accede a los elementos con el id pasado como par\u00e1metro.<\/li>\n<\/ul>\n\n\n\n
    Ejm con getElementsByTagName()<\/em><\/strong><\/p>\n\n\n\n
    console.log(document.getElementsByTagName(\"li\"));\n\/\/ Imprime en la consola todas las etiquetas.<\/pre>\n\n\n\n
    \n
    Nota<\/strong>: recordar que lo que imprime la consola no es un array<\/strong>, es una colecci\u00f3n HTML<\/strong> (HTMLCollection<\/strong>), parecido a los arrays<\/strong>, pero no igual, no soporta las mismas caracter\u00edsticas que ellos, aunque s\u00ed comparte algunas.<\/p>\n<\/blockquote>\n\n\n\n
    Ejm con getElementsByClassName()<\/strong><\/p>\n\n\n\n
    console.log(document.getElementsByClassName(\"card\"));\n\/\/ Imprime en consola todos los elementos con la clase card<\/pre>\n\n\n\n
    Ejm con getElementsByName()<\/strong><\/p>\n\n\n\n
    console.log(document.getElementsByName(\"nombre\"));\n\/\/ Imprime en consola los elementos con el atributo name = \"nombre\"<\/pre>\n\n\n\n
    En el caso del m\u00e9todo getElementsByName()<\/em><\/strong> nos va a devolver un NodeList()<\/em><\/strong> que es otro tipo de objeto parecido a un array<\/strong>, pero que tiene que ver con el DOM<\/strong>.<\/p>\n\n\n\n
    \n
    Nota<\/strong>: todas las propiedades<\/strong> que empiezan por on-<\/strong> son los eventos<\/strong> que tenemos.<\/p>\n<\/blockquote>\n\n\n\n
    Ejm con getElementById()<\/em><\/strong><\/p>\n\n\n\n
    console.log(getElementById(\"menu\"));\n\/\/ Imprime todos los elementos con el id = \"menu\"<\/pre>\n\n\n\n
    Los 3 primeros m\u00e9todos: getElementsByTagName()<\/em><\/strong>, getElementsByClassName()<\/em><\/strong> y getElementsByName()<\/em><\/strong> han sido reemplazados por dos nuevos m\u00e9todos:<\/p>\n\n\n\n
      \n
    • querySelector()<\/em><\/strong>: si lo traducimos, significa \u00abconsulta de selector\u00bb, el cual recibe como par\u00e1metro un selector<\/strong> v\u00e1lido de CSS<\/strong> (un id<\/strong>, un class<\/strong>, una etiqueta HTML<\/strong> que est\u00e9 dentro de cierta clase, cualquier selector v\u00e1lido que no sea pseudo-clase<\/strong> o pseudo-elemento<\/strong>). Para este m\u00e9todo<\/strong>, S\u00cd que hay que especificar el punto<\/strong> (.) en el caso de las clases<\/strong>, y la almohadilla<\/strong> (#) si se trata de un id<\/strong>. querySelector()<\/em><\/strong> hace referencia a que va a recibir un selector v\u00e1lido de CSS<\/strong>. Muy importante, s\u00f3lo imprime el primer selector del tipo que hayamos especificado que haya encontrado en el documento HTML<\/strong>.<\/li>\n\n\n\n
    • querySelectorAll()<\/em><\/strong>: el uso es el mismo que querySelector()<\/em><\/strong>, pero trae todos los selectores, no s\u00f3lo uno.<\/li>\n<\/ul>\n\n\n\n
      Ejm con querySelector()<\/em><\/strong><\/p>\n\n\n\n
      console.log(document.querySelector(\"#menu\"));\n\/\/ Imprime en consola el primer elemento con id = \"menu\"\n\/\/ Si hay mas elementos no los imprime<\/pre>\n\n\n\n
      \n
      Nota<\/strong>: aunque se pueden utilizar tanto querySelector()<\/em><\/strong> como getElementById()<\/em><\/strong> para mostrar elementos con un id espec\u00edfico, a nivel de rendimiento, getElementById()<\/em><\/strong> funciona mejor que querySelector()<\/strong>, ya que \u00e9ste \u00faltimo tiene que hacer el filtro para detectar que se le pasa como par\u00e1metro (si es un class<\/strong>, un id<\/strong>…).<\/p>\n<\/blockquote>\n\n\n\n
      Ejm con querySelectorAll()<\/strong><\/p>\n\n\n\n
      console.log(document.querySelectorAll(\"a\"));\n\/\/ Imprime una nodeList con todos los elementos\nconsole.log(document.querySelectorAll(\"a\")[1]);\n\/\/ Imprime (como los arrays) el segundo elemento\n\/\/ de la nodeList\nconsole.log(document.querySelectorAll(\"#menu li\"));\n\/\/ Imprime las listas que se encuentran dentro\n\/\/ del id = \"menu\"<\/pre>\n\n\n\n
      Resumen<\/h2>\n\n\n\n
      En la actualidad, los m\u00e9todos que se est\u00e1n utilizando son:<\/p>\n\n\n\n
        \n
      • getElementById()<\/em><\/strong><\/li>\n\n\n\n
      • querySelector()<\/em><\/strong><\/li>\n\n\n\n
      • querySelectorAll()<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n
        Tanto el m\u00e9todo querySelector()<\/em><\/strong> como querySelectorAll()<\/em><\/strong> devolver\u00e1n una nodeList()<\/em><\/strong>, que no es lo mismo que un array<\/strong>, aunque se parezcan.<\/p>\n\n\n\n
        Junto con los arrays<\/strong>, comparten la propiedad<\/strong> length<\/em><\/strong>, tambi\u00e9n comparten, no todo los m\u00e9todos<\/strong>, pero s\u00ed algunos de ellos, como es por ejm el bucle forEach<\/em><\/strong>.<\/p>\n\n\n\n
        document.querySelectorAll(\"a\").forEach(el => console.log(el));<\/pre>\n\n\n\n
        A partir de este cap\u00edtulo vamos a estar utilizando querySelector()<\/em><\/strong>, querySelectorAll()<\/em><\/strong> y getElementById()<\/em><\/strong>.<\/p>\n\n\n\n
        getElementsByTagName()<\/em><\/strong>, getElementsByClassName()<\/em><\/strong> y getElementsByName()<\/em><\/strong> los vamos a dejar a un lado porque se considera mala pr\u00e1ctica utilizarlos a d\u00eda de hoy. Para ids vamos a utilizar getElementById()<\/em><\/strong>, para traernos el primer selector v\u00e1lido vamos a utilizar querySelector()<\/em><\/strong>, y para traernos todos, vamos a utilizar querySelectorAll()<\/em><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
        En este cap\u00edtulo comenzamos a ver como manejar e interactuar con los nodos, y particularmente los elementos, que son las […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":2,"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-809","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":"En este cap\u00edtulo comenzamos a ver como manejar e interactuar con los nodos, y particularmente los elementos, que son las […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/809","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=809"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/809\/revisions"}],"predecessor-version":[{"id":811,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/809\/revisions\/811"}],"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=809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}