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
Como posso obter um elemento por a aula?
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];
Se, por alguma razão, você precisar de {[16] } o objeto de retorno como uma matriz, você pode fazer isso facilmente, por causa de sua magia propriedade do comprimento:
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).