¿Cómo getElementByClass en lugar de GetElementById con JavaScript?

Question 1

Estoy tratando de alternar la visibilidad de ciertos elementos DIV en un sitio web según la clase de cada DIV. Estoy usando un fragmento de JavaScript básico para alternarlos. El problema es que el script solo usa getElementById, ya getElementByClassque no es compatible con JavaScript. Y, desafortunadamente, tengo que usar class y no id para nombrar los DIV porque los nombres de DIV son generados dinámicamente por mi hoja de estilo XSLT usando ciertos nombres de categoría.

Sé que ciertos navegadores ahora son compatibles getElementByClass, pero como Internet Explorer no lo hace, no quiero seguir ese camino.

Encontré scripts que usan funciones para obtener elementos por clase (como el n. ° 8 en esta página: http://www.dustindiaz.com/top-ten-javascript/ ), pero no puedo averiguar cómo integrarlos. con mi script de alternancia.

Aquí está el código HTML. Los DIV en sí mismos faltan ya que se generan al cargar la página con XML / XSLT.

Pregunta principal: ¿Cómo obtengo el siguiente script de alternancia para obtener Elemento por clase en lugar de obtener Elemento por ID?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>

Question 2

Los navegadores modernos tienen soporte para document.getElementsByClassName. Puede ver el desglose completo de los proveedores que brindan esta funcionalidad en caniuse . Si está buscando extender el soporte a navegadores más antiguos, es posible que desee considerar un motor de selección como el que se encuentra en jQuery o un polyfill.

Respuesta anterior

Querrá registrarse en jQuery , que permitirá lo siguiente:

$(".classname").hide(); // hides everything with class 'classname'

Google ofrece un archivo de origen jQuery alojado, para que pueda hacer referencia a él y estar listo y funcionando en momentos. Incluya lo siguiente en su página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Question 3

El getElementsByClassNamemétodo ahora es compatible de forma nativa con las versiones más recientes de Firefox, Safari, Chrome, IE y Opera, puede hacer una función para verificar si una implementación nativa está disponible; de lo contrario, use el método Dustin Diaz:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Uso:

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

Question 4

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Anualmente, al usar getElementsByClassName, devuelve una matriz de varias clases. Porque el mismo nombre de clase podría usarse en más de una instancia dentro de la misma página HTML. Usamos el ID de elemento de matriz para apuntar a la clase que necesitamos, en mi caso, es la primera instancia del nombre de clase dado. Así que usé [0]

Question 5

Úselo para acceder a la clase en Javascript.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

Question 6

agregando a la respuesta de CMS , este es un enfoque más genérico del toggle_visibilityque acabo de usar:

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Question 7

Mi solución:

Primero cree etiquetas "<style>" con una ID.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Luego, creo una función en JavaScript como esta:

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Funcionó como un encanto para mí.

Question 8

Anexar ID en la declaración de clase

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";