Caso não lembrem, já tivemos uma pequena introdução, parte 1 e parte 2 dessa série.
Se você não souber o que é JavaScript não obstrutivo, recomendo a leitura desse artigo antes de qualquer coisa. Caso contrário, vamos ao que interessa…
Deixe o percurso via DOM para os especialistas (CSS, o caminho mais rápido)
É interessante observar que percorrer o DOM com seus métodos e propriedades (como getElementByTagName, nextSibling, previousSibling, parentNode e seus derivados) parece confuso para muitas pessoas. E é mais interessante ainda observar como nós já fazemos isso com uma tecnologia diferente: CSS.
- Muito prazer, eu sou o CSS e estou aqui pra ajudar.
CSS é uma tecnologia que atribui um seletor, movimenta o DOM para acessar o elemento desejado e altera seus atributos visuais. Um código JavaScript pouco complexo pode ser substituído por um único seletor CSS:
var n = document.getElementById('nav');
if(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
for(var i=0;as[i];i++){
as[i].style.color = ‘#369′;
as[i].style.textDecoration = ‘none’;
}
}
}
O código acima é a mesma coisa que
#nav a{
color:#369;
text-decoration:none;
}
Esta é uma maneira muito eficiente. Você ainda pode atribuir classes dinamicamente para elementos superiores na hierarquia HTML ou alterar Ids. Se você simplesmente adicionar uma classe para a tag body da sua página usando o DOM, você pode facilmente oferecer uma oportunidade para um designer definir versões estáticas e dinâmicas para um único documento:
JavaScript:
var dynamicClass = 'js';
var b = document.body;
b.className = b.className ? b.className + ' js' : 'js';
CSS:
/* versão estática */
#nav {
....
}
/* versão dinâmica */
body.js #nav {
....
}
Repare que ao invés de efetuar todas as mudanças através do JavaScript, nós o utilizamos apenas para adicionar uma classe. Sempre que possível, deixe as alterações visuais por conta do CSS.
Continua… (mas não me perguntem quando, assinem o feed)