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á.
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
sebilasse
Aclaraciones:
-
getElementsByClassName devuelve una lista de nodos y no una matriz
-
No necesitas jQuery
-
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.getElementsByClassNamedevuelve un (en vivo)HTMLCollectionno un (estático)NodeList.– conexión
17 de septiembre a las 7:28
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
StefanJM
Para cualquiera que busque una sola línea
var first = document.getElementsByClassName('test')[0];
-
Tu código está usando
HTMLCollection.item()noNodeList.item().– conexión
17 de septiembre a las 7:31
Ahmet Emre Kilinc
Puedes probar con esto:
document.getElementsByClassName("className")[index]
-
Tu código está usando
HTMLCollection.item()noNodeList.item().– conexión
17 de septiembre a las 7:31
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