¿Cómo obtener un elemento por nombre de clase? [duplicar]
Usando JavaScript, podemos obtener elementos por identificación usando la siguiente sintaxis:
var x=document.getElementById("by_id");
Intenté lo siguiente para obtener elemento por clase:
var y=document.getElementByClass("by_class");
Pero resultó en un error:
getElementByClass is not function
¿Cómo puedo obtener un elemento por su clase?
El nombre de la función DOM en realidad es getElementsByClassName, no getElementByClassName, simplemente porque más de un elemento en la página puede tener la misma clase, por lo tanto: Elements.
El valor de retorno de esto será una instancia de NodeList o un superconjunto de NodeList(FF, por ejemplo, devuelve una instancia de HTMLCollection). En cualquier caso: el valor de retorno es un objeto similar a una matriz:
var y = document.getElementsByClassName('foo');
var aNode = y[0];
Si, por alguna razón, necesita el objeto devuelto como una matriz, puede hacerlo fácilmente, debido a su propiedad mágica de longitud:
var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);
Como sugirió yckartquerySelector('.foo') y querySelectorAll('.foo')sería preferible, ya que, de hecho, cuentan con un mejor soporte (93,99% frente a 87,24%), según caniuse.com:
- selector de consulta(todos)
- getElementsByClassName
- No uses w3schools para aprender algo.
- Consulte MDN para obtener información precisa.
Otra opción es utilizar querySelector('.foo')o querySelectorAll('.foo')que tengan un soporte de navegador más amplio que getElementsByClassName.
http://caniuse.com/#feat=queryselector
http://caniuse.com/#feat=getelementsbyclassname
Necesitas usar eldocument.getElementsByClassName('class_name');
y no olvides que el valor devuelto es una matriz de elementos, así que si quieres el primero usa:
document.getElementsByClassName('class_name')[0]
ACTUALIZAR
Ahora puedes usar:
document.querySelector(".class_name")para obtener el primer elemento con la class_nameclase CSS ( nullse devolverá si ninguno de los elementos de la página tiene este nombre de clase)
o document.querySelectorAll(".class_name")para obtener una NodeList de elementos con la class_nameclase css (se devolverá una NodeList vacía si ninguno de los elementos de la página tiene este nombre de clase).
puedes usar
getElementsByClassName
Supongamos que tiene algunos elementos y aplicó un nombre de clase 'prueba', por lo que puede obtener elementos como los siguientes
var tests = document.getElementsByClassName('test');
devuelve una instancia NodeListo su superconjunto: HTMLCollection(FF).
Leer más
