Seleccionar elementos HTML desde JavaScript

08/02/20210 comentarios

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>


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: