getElementsByClassName () non funziona nei vecchi Internet Explorer come IE6, IE7, IE8

Il seguente codice:

var borderTds = document.getElementsByClassName('leftborder'); 

mi dà un messaggio di errore in Internet Explorer 6, 7 e 8:

L’object non supporta questo metodo

Come posso selezionare gli elementi in base alla loro class in questi browser?

Preferisco non usare JQuery.

Questa soluzione può aiutare. Questa è una funzione personalizzata getElementsByClassName implementata in puro javascript, che funziona in IE.

In sostanza ciò che questo script sta facendo è sondare, uno per uno, tutte le opzioni possibili e scegliere il migliore disponibile. Queste opzioni sono:

  1. Funzione nativa document.getElementsByClassName .
  2. document.evaluate function, che consente la valutazione delle query XPath.
  3. Attraversando l’albero DOM.

Naturalmente il primo è il migliore per quanto riguarda le prestazioni, tuttavia quest’ultimo dovrebbe essere disponibile ovunque, incluso IE 6.

L’esempio di utilizzo, che è anche disponibile nella pagina, è simile a questo:

 getElementsByClassName("col", "div", document.getElementById("container")); 

Quindi la funzione consente 3 parametri: class (obbligatorio), nome tag (facoltativo, ricerca di tutti i tag se non specificato), elemento radice (facoltativo, documento se non specificato).

Aggiornare. La soluzione collegata nel post del blog è ospitata sul Google Code che si sta chiudendo a gennaio 2016. Tuttavia, l’autore lo ha reso disponibile su GitHub . Complimenti a Flodin indicandolo nei commenti.

IE6, Netscape 6+, Firefox e Opera 7+ copiano il seguente script nella tua pagina:

 document.getElementsByClassName = function(cl) { var retnode = []; var elem = this.getElementsByTagName('*'); for (var i = 0; i < elem.length; i++) { if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]); } return retnode; }; 

Il metodo non esiste in IE6. Se si desidera selezionare gli elementi per class e non si desidera utilizzare una libreria, è sufficiente scorrere tutti gli elementi nella pagina e verificare la class nella relativa proprietà className .

 function getElementsByClassName(className) { var found = []; var elements = document.getElementsByTagName("*"); for (var i = 0; i < elements.length; i++) { var names = elements[i].className.split(' '); for (var j = 0; j < names.length; j++) { if (names[j] == className) found.push(elements[i]); } } return found; } 

Demo: http://jsfiddle.net/kYdex/1/

Internet Explorer 8 e getElementsByClassName() precedenti non supportano getElementsByClassName() . Se hai solo bisogno di una soluzione per IE8, supporta querySelectorAll() , puoi invece usare uno di questi. Per gli IE meno recenti devi fornire la tua implementazione, e per alcuni altri browser antichi che la supportano puoi anche utilizzare evaluate() che esegue le espressioni XPath.

Questo codice fornisce un metodo document.getElementsByClassName se non esiste ancora utilizzando i metodi che ho descritto:

 if (!document.getElementsByClassName) { document.getElementsByClassName = function(search) { var d = document, elements, pattern, i, results = []; if (d.querySelectorAll) { // IE8 return d.querySelectorAll("." + search); } if (d.evaluate) { // IE6, IE7 pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]"; elements = d.evaluate(pattern, d, null, 0, null); while ((i = elements.iterateNext())) { results.push(i); } } else { elements = d.getElementsByTagName("*"); pattern = new RegExp("(^|\\s)" + search + "(\\s|$)"); for (i = 0; i < elements.length; i++) { if ( pattern.test(elements[i].className) ) { results.push(elements[i]); } } } return results; } } 

Se non ti piace qualcosa, puoi utilizzare il tuo motore di ricerca preferito per trovarne uno diverso.

Se getElementsByClassname non supporta l’errore in alcuni vecchi browser Prova semplicemente var modal = document.getElementById (‘myModal’); modal.onclick = function () {Quindi fai sempre la funzione onclick o un’altra funzione usando getElementById modal.style.display = “none”; }