¿Cómo obtener solo un elemento por nombre de clase con JavaScript?

4 minutos de lectura

Avatar de usuario de Ismatjon
Ismatjon

¿Cómo obtengo solo un elemento DOM por nombre de clase? Supongo que la sintaxis de obtener elementos por nombre de clase es getElementsByClassNamepero no estoy seguro de cuántos elementos devolverá.

  • Devuelve una matriz de elementos DOM. Puede seleccionar los requeridos dando el índice. Como document.getElementsByClassName (‘className’) [0] para obtener el primer elemento.

    – Arunkumar Srisailapathi

    29 de enero de 2014 a las 16:17

  • @ArunKumar Técnicamente es una colección HTML, que es similar a una matriz, no una matriz real.

    –Anthony Grist

    29 de enero de 2014 a las 16:19

  • @AnthonyGrist: ¡Sí, de acuerdo! Todavía puedes acceder a ellos de la manera que dije, ¿no?

    – Arunkumar Srisailapathi

    29 de enero de 2014 a las 16:20

  • @ArunKumar (solo me estoy repitiendo ahora) pero devuelve una lista de nodos, no una matriz. Es importante tener esto en cuenta porque las funciones de Array no están disponibles para nodeLists.

    – rimon

    29 de enero de 2014 a las 16:39

  • @rlemon Iluminado 🙂

    – Arunkumar Srisailapathi

    29 de enero de 2014 a las 16:54

Avatar de usuario de Rahat Khanna
Rahat Khanna

document.getElementsByClassName('className') siempre devolvería varios elementos porque, conceptualmente, las clases están destinadas a aplicarse a varios elementos. Si desea solo el primer elemento en el DOM con esa clase, puede seleccionar el primer elemento del tipo matriz HTMLCollection devuelto

var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];

De lo contrario, si realmente desea seleccionar solo un elemento. Luego, debe usar ‘id’, ya que conceptualmente se usa como un identificador para elementos únicos en una página web.

// HTML
<div id="myElement"></div>

// JS
var requiredElement = document.getElementById('myElement');

  • getElementsByClassName devuelve una lista de nodos, no una matriz – FYI

    – rimon

    29 de enero de 2014 a las 16:34

  • @Ismatjon Creo que solo estaba sugiriendo el enfoque de identificación porque es más limpio en general. sin embargo, la sugerencia inicial aquí es cierta.

    – rimon

    29 de enero de 2014 a las 18:01


  • la respuesta inicial para usar nodelist[index in the node list] sigue siendo correcto sin embargo. La segunda parte fue una sugerencia (todo lo que decía)

    – rimon

    29 de enero de 2014 a las 18:05

  • “De lo contrario, si realmente desea seleccionar solo un elemento. Entonces necesita usar ‘id’…” De nada. Está perfectamente bien tener un solo elemento con una clase. Lo encuentra, como muestran algunas otras respuestas aquí, usando document.querySelector(".the-class-name").

    –TJ Crowder

    20 de marzo a las 18:45

avatar de usuario de sebilasse
sebilasse

Aclaraciones:

  1. getElementsByClassName devuelve una lista de nodos y no una matriz

  2. No necesitas jQuery

  3. Lo que estabas buscando era probablemente document.querySelector :

¿Cómo obtengo solo un elemento DOM por nombre de clase?

var firstElementWithClass = document.querySelector('.myclass');

Ver también: https://developer.mozilla.org/en/docs/Web/API/Document/querySelector

  • ¿Puede proporcionar información adicional sobre por qué prefiere usar esto para getElementsByClassName?

    – George Butter

    15 de diciembre de 2017 a las 4:04

  • @Pero porque querySelector (¡no querySelectorAll!) se detiene después de la primera coincidencia. Sin embargo, querySelectorAll es mucho más lento que getElementsByClassName.

    – Máx.

    16 de septiembre de 2018 a las 8:54

  • document.getElementsByClassName devuelve un (en vivo) HTMLCollectionno un (estático) NodeList.

    – conexión

    17 de septiembre a las 7:28

Avatar de usuario de Lucas Reis
lucas reyes

Puedes usar jQuery:

$('.className').eq(index)

O puede usar el método integrado de javascript:

var elements = document.getElementsByClassName('className');

Esto devuelve una lista de nodos de elementos que puede iterar y hacer lo que quiera.

Si solo desea uno, puede acceder a los elementos en la versión de javascript de esta manera:

elements[index]

  • He hecho la edición, pero tenga en cuenta que devolverá un lista de nodos no una matriz. Son similares, pero no iguales.

    – rimon

    29 de enero de 2014 a las 16:34

  • También en su ejemplo de jQuery todavía está recopilando todos los elementos. api.jquery.com/eq es probablemente lo que quieres allí.

    – rimon

    29 de enero de 2014 a las 16:35

  • Sé cómo usar jQuery. esto no es lo que estoy preguntando. Quiero un enfoque de javascript puro.

    – Ismajon

    29 de enero de 2014 a las 17:46

  • @Ismatjon como mencioné en los otros comentarios de respuesta, el índice de notación de corchetes resolverá esto por usted. Le advierto contra el uso de getElementsByClassName si necesita compatibilidad con IE8 (no compatible). En su lugar, lea sobre document.querySelector y document.querySelectorAll

    – rimon

    29 de enero de 2014 a las 18:02


  • @lsmatjon pero puede acceder al primer elemento con este enfoque anterior

    – Lucas Rey

    30 de enero de 2014 a las 15:21

Avatar de usuario de StefanJM
StefanJM

Para cualquiera que busque una sola línea

var first = document.getElementsByClassName('test')[0];

Usar NodeList.item().

Por ejemplo:

var first = getElementsByClassName('test').item(0);

Avatar de usuario de Ahmet Emre Kilinc
Ahmet Emre Kilinc

Puedes probar con esto:

document.getElementsByClassName("className")[index]

¿Ha sido útil esta solución?