javascript - from - getelementsbyclassname index

document.getElementByClassName-Corrección cruzada del navegador

Question

He consultado las solicitudes anteriores de ayuda en una corrección de navegador cruzado para document.getElementByClassName y encontré este enlace que proporcionaba una solución aparentemente perfecta.

Sin embargo, he intentado implementarlo en un sitio que he construido, pero no puedo conseguir que funcione la corrección (ni ninguna otra) en IE8 (el navegador con el que estoy trabajando para obtener compatibilidad). Todavía estoy obteniendo el error "Objeto o propiedad no compatible", lo que significa que la solución, obviamente, no está funcionando.

En resumen por alguna razón por la cual esto puede no estar funcionando correctamente y no se puede encontrar a nadie con problemas para que funcione, le pregunto si podría ayudarme a que funcione esta solución.

El sitio en el que intento solucionar el problema es http://lifeswitch.org.nz.s125738.gridserver.com/

Answer 1

¿Qué hay de la modificación de su código para utilizar getElementsByTagName () en su lugar, que es compatible con todos los principales navegadores

elements = document.getElementById(id).getElementsByTagName(''a'');

for (var i = 0; i < elements.length; i++) {
    if (elements[i].className == t) {
        elements[i].className += '' animate'';
    }
}

Answer 2

Creo que deberías comenzar a utilizar JQuery, ya que hará que sea más fácil seleccionar un elemento con su nombre de clase, será como $ (". ClassName")

Answer 3

En IE 8+ y en la mayoría de los navegadores nuevos.

Utilice document.querySelector y document.querySelectorAll . Estos métodos le permiten acceder a cualquier elemento por selector como en un css :)

 var e = document.querySelectorAll(".myClass"); // 

La diferencia entre ellos es que primero se obtiene el primer elemento del elemento coincidente, el segundo método se obtiene la colección de elementos coincidentes.

En demostración: http://jsfiddle.net/f9cHr/ haga clic en el documento para cambiar el color de los elementos.

Y ahora:

getElementsByClassName = function( className , ctx  ) {
  var context = ctx ? ( typeof ctx =="string" ? document.querySelector( ctx ) : ctx ): document;
  return context.querySelectorAll && context.querySelectorAll( "." + className ) 
};

Puede usar esta función cuando las funciones de querySelector están presentes

 if( document.querySelector && document.querySelectorAll ) { 
     //getElementsByClassName = function from above here
 } else {
    //getElementsByClassName = function you are using here
 } 

Utilizar:

   var myClassInnerMyId = 
          getElementsByClassName( "myClass" , document.getElementById( "myId") );
       // = document.querySelectorAll( "#myId .myClass");

además

  someClassesInnerOtherId = getElementsByClassName( "myClass1,myClass2" , "#otherId");

  // = document.querySelectorAll( "#otherId myClass1, #otherId myClass2");

Answer 4

Esto funciona (probado):

function getElementsByClassName(cn, rootNode) {
  if (!rootNode) {
    rootNode = document;
  } 
  for (var r=[], e=rootNode.getElementsByTagName(''*''), i=e.length; i--;) {
    if (('' ''+e[i].className+'' '').indexOf('' ''+cn+'' '')>-1) {
      r.push(e[i]); 
    }
  }
  return r;  
}

Probablemente pueda salirse con la suya añadiéndola a Node.prototype , así:

Node.prototype.getElementsByClassName = function(cn) {
  for (var r=[], e=this.getElementsByTagName(''*''), i=e.length; i--;) {
    if (('' ''+e[i].className+'' '').indexOf('' ''+cn+'' '')>-1) {
      r.push(e[i]); 
    }
  }
  return r;  
}

Eso debería agregarlo a los navegadores que no lo tienen, pero debería estar oculto por los navegadores que sí lo tienen, ya que lo proporcionan más abajo en la cadena del prototipo (no probado).

Answer 5

Ha creado una función global llamada getElementsByClassName , no un método en el objeto del document . window.getElementsByClassName llamar a getElementsByClassName o window.getElementsByClassName , no document.getElementsByClassName .

Answer 6

La regla es "Keep It Simple"

if( !typeof document.getElementsByClassName == ''function''){
    Object.prototype.getElementsByClassName = function(cn) {
        if (!this) return null;
        for (var r=[], e=this.getElementsByTagName(''*''), i=e.length; i--;)
        if ( e[i].className.indexOf(cn)>-1) r.push(e[i]); 
        return r;  
    }
}

Si el método existe, entonces la función no está hecha.

Además, asegúrese de mantener sus ejemplos fáciles de usar y legibles.

Adición, otra forma de usar un bucle ...

if( !typeof document.getElementsByClassName == ''function''){
    Object.prototype.getElementsByClassName = function(cn) {
      if (!this) return null;
      var r=[],e=this.getElementsByTagName(''*'');
      for (i in e)
        if ( e[i].className.indexOf(cn)>-1) r.push(e[i]); 
      return r;  
    }
}