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

91

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>
javascript class toggle getelementbyid getelementsbyclassname Alan
fuente
3
¿Por qué no he estado usando jQuery todo el tiempo? Tomé la sugerencia de @Jonathan Sampson de usar jQuery, ¡y funciona! (La respuesta de CMS fue la que pensé que estaba buscando, pero no pude hacer que funcionara) Le di a cada enlace una identificación, y con jQuery puedo definir qué clases se muestran y qué clases están ocultas cuando haces clic en un enlace particular. ¡EXCELENTE! Esta solución parece demasiado buena para ser verdad. jQuery parece demasiado bueno para ser verdad. ¿Cuáles son las desventajas de usar jQuery? Como novato, ¿por qué debería usar Javascript en lugar de jQuery?
Alan

Respuestas:

77

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>
Sampson
fuente
1
Aunque es bueno, el jQuery alojado en Google es útil solo para las cosas más simples, debido a la seguridad de secuencias de comandos entre sitios implementada por la mayoría de los navegadores modernos.
Paulo Santos
2
También puede descargar el archivo fuente de jQuery.com y hacer referencia a él localmente.
Sampson
21
@Paulo: Las secuencias de comandos entre sitios no se aplican a las <script>etiquetas. JQuery alojado en Google está diseñado específicamente para sitios web de producción (como CDN). Si su sitio es https, asegúrese de utilizar la versión https para evitar advertencias de contenido mixto.
Chetan S
3
De hecho, la <script>inyección de etiquetas es la base de las solicitudes JSONP entre sitios.
Chetan S
2
Paulo, ¿te das cuenta de que una vez que incluyes jQuery con la etiqueta <script>, no hay restricciones entre sitios?
Dark Falcon
88

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';
     }
  }
}
Christian C. Salvadó
fuente
2
¿Por qué usa esa función interna en lugar de solo código simple?
Tomáš Zato - Reincorpora a Monica
-1 por ejemplo, uso asumiendo que todos los elementos en la pantalla tienen visualización en bloque. En toggle_visibility, si e es un <span>, entonces debería ser 'inline' no 'block'. Una solución mucho más robusta es definir una clase CSS: .invisible {display: none! Important} y usar JavaScript (o jQuery) para asignar y desasignar esa clase de elementos
John Meyer
6 
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]

Vishwa
fuente
3

Úselo para acceder a la clase en Javascript.

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

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';
       }
     }
  }
}
Cregox
fuente
1

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í.

thylorion
fuente
1
Los saltos de línea ( <br>) son inútiles / inválidos dentro de una etiqueta de estilo
Chris Forrence
-1

Anexar ID en la declaración de clase

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