[Resolvido] Adicionando class css via JS

[Willian Gomes de Oliveira 0]

Boa noite a todos =D

 

Bom, é minha primeira postagem no fórum, porém já visito ele a um tempo.

 

O problema é o seguinte, eu não consigo adicionar class css para qualquer elemento que quero, só consigo através de JQuery.

Depois de muito tentar consegui da seguinte forma :

 

document.getElementById("ID").className = "CLASS";

Pesquisando encontrei uma função que fazia exatamente o que precisava, ela verifica se o elemento não tem a class, e então a adiciona.

 

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
	ele.className=ele.className.replace(reg,' ');
}
}

Fonte: http://www.openjs.com/scripts/dom/class_manipulation.php

Vamos então ao problema.

Eu só consigo adicionar class css em elementos que pego com base no ID (document.getElementById("ID").className), eu quero poder adicionar pela TAG (document.getElementsByTagName) do atributo também, em JQuery funcionaria assim:

 

$("p").addClass("class")

O motivo de evitar o JQuery, é me aprofundar no JS sem ter que depender muito de um framework.

Se a solução for muito obvia, peço desculpas, mais ainda estou engatinhando no javascript rsrs, desde já agradeço.

[William Bruno 1501]

eu quero poder adicionar pela TAG (document.getElementsByTagName) do atributo também

você "não conseguiu", por um simples motivo:

getElementsByTagName, te retorna um array de objetos. Você precisa fazer um loop por esses objetos, e atribuir a classe um a um.

 

Algo como:

var div = document.getElementsByTagName('div');
for( var i=0; i<div.length; i++ )
{
    div[ i ].className = 'tal';
}

 

 

, em JQuery funcionaria assim:

$("p").addClass("class")

jQuery faz os loops por baixo dos panos, por isso é tudo tão simples.

 

 

 

O motivo de evitar o JQuery, é me aprofundar no JS sem ter que depender muito de um framework.

Parabéns, ótima escolha.

[Willian Gomes de Oliveira 0]

William funcionou perfeitamente, brigadão.

 

Agora outra pergunta, e quando quero ser mais especifico, como:

 

JQuery:

 

$("div p").addClass();

HTML

 

<div>
    <p>Teste</p>
</div>
    <p>Teste</p>

Ou:

 

JQuery:

 

$("#teste p").addClass();

HTML

 

<div id="teste">
    <p>Teste</p>
</div>
    <p>Teste</p>

[William Bruno 1501]

$("div p").addClass();

equivale a:

window.onload = function(){
var divs = document.getElementsByTagName('div');

for( var i=0; i<divs.length; i++ )
{
	var ps = divs[ i ].getElementsByTagName('p');

	for( var j=0; j<ps.length; j++ )
	{
		ps[ j ].className = 'tal';
	}
}
}

Note que preciso do loop encaixado, pois novamente o getElementsByTagName('div'), me retorna um array de objetos.

E para pegar os ps dentro desse array, tenho que pegar os ps dentro de cada objeto, um a um, e pegar cada p, um a um.

 

 

 

$("#teste p").addClass();

equivale a:

document.getElementById('teste').getElementsByTagName('p');

A primeira função só devolve um único elemento, por isso consigo usar o getElementsByTagName encaixado, diretamente.

 

 

 

@Bruno, acho que você não leu completamente a dúvida do amigo.

[JCMais 75]

[...]

 

Bruno você leu a dúvida dele? :ermm:

 

Edit: :ninja:

 

--

 

Só por curiosidade, o jQuery usa a engine para seletores CSS chamada Sizzle, isso quando o navegador não dá suporte aos metódos document.querySelector e document.querySelectorAll.

[Bruno Augusto 417]

William, você disse que a jQuery faz esses loops "por baixo dos panos". Dá pra considerar que quanto mais complexo for um seletor, pior é o desempenho?

[William Bruno 1501]

Dá pra considerar que quanto mais complexo for um seletor, pior é o desempenho?

Sim, com absoluta certeza.

 

isso aqui:

$('#teste #a')

é mais lento que:

$('#a')

 

apesar de parecer ilógico, por exemplo.

assim como:

$('body #header ul li')

é algo extremamente penoso para a performance do script.

Apesar de parecer 'tão simples', do ponto de vista da sintaxe.

[Willian Gomes de Oliveira 0]

William funcionou perfeitamente !

Dúvida respondida!

 

Já tenho em mente uma função que resolveria esse problema. Muito obrigado!

 

Creio que pode encerrar o post.

[JCMais 75]

$('body #header ul li')

é algo extremamente penoso para a performance do script.

Apesar de parecer 'tão simples', do ponto de vista da sintaxe.

 

Quando se tem seletores complexos, o ideal é separá-los, e utilizar o metódo find(), logo, esse seletor que o William postou ficaria mais rápido da seguinte forma:

$( '#header' ).find( 'li' );