Como obter o elemento pelo nome da classe? [duplicado]
- Como obter elemento por classe em JavaScript? 10 respostas
usando JavaScript, podemos obter o elemento por id usando a seguinte sintaxe:
var x=document.getElementById("by_id");
tentei seguir para obter elemento por classe:
var y=document.getElementByClass("by_class");
mas resultou em erro:
getElementByClass is not function
4 answers
O nome da função DOM é realmente getElementsByClassName, não getElementByClassName, simplesmente porque mais de um elemento na página pode ter a mesma classe, portanto: Elements.
O valor de retorno disto será uma instância NodeList, ou um superconjunto do NodeList (FF, por exemplo devolve uma instância de HTMLCollection). De qualquer forma: o valor de retorno é um objeto do tipo array:
var y = document.getElementsByClassName('foo');
var aNode = y[0];
var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);
Como sugeriu o yckart querySelector('.foo') e querySelectorAll('.foo') seria preferível, no entanto, uma vez que são, de facto, mais bem suportados (93,99% vs 87,24%), de acordo com caniuse.com:
Outra opção é usar, querySelector('.foo') ou querySelectorAll('.foo') que tem um suporte de navegador mais amplo do que getElementsByClassName.
document.getElementsByClassName('class_name');
E não se esqueça que o valor devolvido é um conjunto de elementos, por isso, se quiser que o primeiro use:
document.getElementsByClassName('class_name')[0]
Pode usar
getElementsByClassName
Suponha que você tem alguns elementos e aplicou um nome de classe 'test', então, você pode obter elementos como o seguinte
var tests = document.getElementsByClassName('test');
Devolve uma instância NodeList, ou o seu super-conjunto: HTMLCollection (FF).