getElementByClass è sicuro da utilizzare su browser come getElementById?

Question

getElementByClass è sicuro da utilizzare su browser come getElementById?

Aggiornamento Attualmente utilizzando:

window.opener.document.getElementById 

Ma voglio fare riferimento all'oggetto da nome di classe (ci sarà solo 1 elemento con quel nome di classe).

Answer 1

IIRC, getElementsByClassName è stato introdotto in Firefox 3, Safari 3.1 ed è stato in Chrome dall'inizio. Non so se/quando è stato aggiunto a Opera, ma non è affatto presente in Internet Explorer. (Sebbene possa essere aggiunto a IE8 estendendo i prototipi DOM, vedere Grant's answer.)

In altre parole, se si desidera un cross-browser getElementsByClassName, è necessario eseguire il rollover o utilizzare un framework.

Answer 2

Come già menzionato da altri, getElementsByClassName non è disponibile in Internet Explorer.

Vedere la sezione Customizing the DOM di Document Object Model Prototypes, Part 1: Introduction per informazioni su come implementare la funzionalità in IE.

Answer 3

Se si desidera utilizzarlo, è possibile eseguire un test per verificare se l'oggetto supporta getElementsByClassname prima di utilizzarlo e ricorrere a un'implementazione JS della funzione se il browser non lo supporta.

Answer 4

Io suggerirei di usare una libreria wrapper come prototype.js o jQuery, che sia supportano un modello selettore CSS, e gestire i problemi di compatibilità del browser (IE6-7 essere i problemi più grandi di solito)

Answer 5

getElementsByClassName purtroppo non è attendibile cross-browser. Attualmente è supportato dalle versioni più recenti di Firefox, Opera, Safari e Chrome, ma non in Internet Explorer o Konqueror, secondo lo Quirksmode.

Se si desidera utilizzarlo cross-browser, dovrete essere necessario fornire la propria implementazione per quei browser che non lo supportano, like in PPK's blog:

function getElementsByClassName(node,classname) { 
    if (node.getElementsByClassName) 
     return node.getElementsByClassName(classname); 
    else { 
     // your custom function 
    } 
}