Seleccionar elementos HTML desde JavaScript

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="main.js"></script>
</head>

<body>

    <div id="elemento_con_id">
        Elemento con id
    </div>
    
    <div class="elemento_con_clase">
        Elemento con clase 1
    </div>
    
    <div class="elemento_con_clase">
        Elemento con clase 2
    </div>

    <div class="elemento_con_clase">
        Elemento con clase 3
    </div>
    
    <div name="elemento_con_name">
        Elemento con name
    </div>

    <div class="selector_qs">
        <div class="selector_qs_content">
            <p>Ejemplo querySelector</p>
            <p>Ejemplo querySelector</p>
            <p>Ejemplo querySelector</p>
            <p>Ejemplo querySelector</p>
        </div>
    </div>

</body>

</html>

JS


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:


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.


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.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *