Hay dos formas populares y de uso común de obtener elementos por nombre de clase en JavaScript. Voy a compartir los ejemplos contigo.
Caso:
Digamos que tiene diez enlaces principales en todo su documento HTML con el nombre de clase link-primary y desea cambiar el comportamiento de todos los enlaces principales. Entonces, cuando alguien hace clic en esos enlaces específicos, debería redirigir al usuario a una URL específica.
Puede seleccionar todos los enlaces principales utilizando getElementsByClassName o querySelectorAll.
getElementsByClassName
A continuación se muestran algunas notas rápidas para getElementsByClassName:
- Devuelve la colección HTML en vivo de elementos del documento.
- Puede acceder a los elementos utilizando un índice y verificar la cantidad de elementos que contiene con el método de longitud.
- No puede utilizar directamente ningún método de matriz hasta que lo convierta en una matriz real.
consultaSelectorTodos
A continuación se muestran algunas notas rápidas para querySelectorAll:
- Devuelve la NodeList de los nodos del documento.
- Puede usar algunos métodos de matriz, pero aún necesita convertirlos en una matriz real para poder acceder a todos los métodos.
- Para seleccionar la clase, debe utilizar un punto o punto antes del nombre de la clase.
Convierta HTMLCollection o NodeList en una matriz
El método de matriz más útil para convertir DOM HTMLCollection o NodeList en una matriz es Array.from()
Simplemente pase la colección similar a una matriz o la lista de nodos a través de este método y devolverá una nueva matriz con la capacidad de usar métodos de matriz.
¡Eso es todo! Entonces, en pocas palabras, aprendiste sobre:
- Dos métodos para obtener elementos DOM por nombres de clases
- Conversión de HTMLCollection y NodeList en una matriz
- Diferencia entre querySelectorAll y getElementsByClassName
Puede obtener más información sobre selectores de CSS utilizando esta hoja de referencia de selectores de CSS .
