Hola a todos, hoy os voy a explicar como podemos seleccionar elementos HTML desde la parte JavaScript.
En Javascript, tenemos varias formas de seleccionar un trozo de HTML 5 y son las siguientes:
- getElementById: selecciona un elemento que contenga el id pasado por parámetro, si hubiera un caso donde ya existiera varios elementos con el mismo id, este cogería el mismo.
- getElementsByClassName: selecciona una serie de elementos que contenga la clase pasada por parámetro, devuelve un array de elementos.
- getElementsByName: selecciona una serie de elementos que contenga el name pasado por parámetro
-
getElementsByTagName: selecciona una serie de elementos con los tag que coincidan con el parámetro pasado.
Veamos un ejemplo, teniendo este HTML y un javascript.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> id="elemento_con_id"> Elemento con id class="elemento_con_clase"> Elemento con clase 1 class="elemento_con_clase"> Elemento con clase 2 class="elemento_con_clase"> Elemento con clase 3 name="elemento_con_name"> Elemento con name class="selector_qs"> class="selector_qs_content"> Ejemplo querySelector Ejemplo querySelector Ejemplo querySelector Ejemplo querySelector |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function init() { let elemento_id = document.getElementById("elemento_con_id"); let elementos_clase = document.getElementsByClassName("elemento_con_clase"); let elementos_name = document.getElementsByName("elemento_con_name"); let elementos_tag_name = document.getElementsByTagName("div"); console.log(elemento_id); console.log(elementos_clase); console.log(elementos_name); console.log(elementos_tag_name); } window.onload = init;; |
Este seria el resultado:
También tenemos otra forma de seleccionar elementos y es con querySelector, con este método podemos seleccionar de una forma personalizada, como si fuera un selector en CSS.
Actualicemos el ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function init() { let elemento_id = document.getElementById("elemento_con_id"); let elementos_clase = document.getElementsByClassName("elemento_con_clase"); let elementos_name = document.getElementsByName("elemento_con_name"); let elementos_tag_name = document.getElementsByTagName("div"); let elementos_query_selector = document.querySelector(".selector_qs .selector_qs_content p") console.log(elemento_id); console.log(elementos_clase); console.log(elementos_name); console.log(elementos_tag_name); console.log(elementos_query_selector); } window.onload = init; |
Este es el resultado:
Fíjate que en el HTML, hay varios elementos, querySelector, solo recoge el primero, con querySelectorAll devolverá todos los elementos como un array.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function init() { let elemento_id = document.getElementById("elemento_con_id"); let elementos_clase = document.getElementsByClassName("elemento_con_clase"); let elementos_name = document.getElementsByName("elemento_con_name"); let elementos_tag_name = document.getElementsByTagName("div"); let elementos_query_selector = document.querySelector(".selector_qs .selector_qs_content p") let elementos_query_selector_all = document.querySelectorAll(".selector_qs .selector_qs_content p") console.log(elemento_id); console.log(elementos_clase); console.log(elementos_name); console.log(elementos_tag_name); console.log(elementos_query_selector); console.log(elementos_query_selector_all); } window.onload = init; |
Ese es el resultado:
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta