Estou lançando uma série que pretendo manter aqui no blog: Diferença entre browsers ao interpretar JavaScript. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero manter isso só pra mim, decidir compartilhar e disponibilizar por aqui 
Vamos ao primeiro exemplo de hoje, o qual me motivou a iniciar esta série. Observe o seguinte código:
// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
// Selecionamos o atributo rel do link em questão
var objLinkAttRel = objLink.getAttribute('rel');
// Descobrimos o tipo da varíavel que armazenou o atributo rel do link
alert('Tipo: ' + typeof(objLinkAttRel));
}
Bom, o código está auto-explicativo (se não o compreendeu, comente). Observe o resultado obtido:
Como você percebeu, somente o Internet Explorer interpreta o tipo da variável como Object String. Então, se você faz um código assim:
...
var objLinkAttRel = objLink.getAttribute('rel');
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
// Faz alguma coisa
}
Com o intuito de verificar o conteúdo do atributo rel dos links selecionados, e testa somente no Internet Explorer, você verá seu script funcionando perfeitamente. Mas ao testar em outros navegadores – como o Firefox e o Opera – você terá uma mensagem de erro – objLinkAttRel has no properties. Isto por que você está utilizando um método – substring – para trabalhar com Objects Strings. E como eles não interpretam tal variável como Object String, certamente não funcionará.
Então, o que fazer para que tenhamos esse código de forma crossbrowser? Simples, ao selecionar o conteúdo do atributo rel dos links, iremos transformá-lo em um Object String. Para que todos os browsers o interpretam dessa maneira (como Object String). Observe:
// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
// Selecionamos o atributo rel do link em questão
var objLinkAttRel = new String(objLink.getAttribute('rel')); // Observe: new String()
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
// Faz alguma coisa
}
}
}
Somente. Gosto sempre de trabalhar com vários navegadores abertos e testando tudo ao mesmo tempo, assim já identifico de imediato algumas divergências entre os navegadores e procuro uma alternativa para deixar meus códigos sempre de forma crossbrowser
