¿Cómo obtenerElementByClass en lugar de GetElementById con JavaScript?
Estoy intentando 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 que getElementByClassno es compatible con JavaScript. Y desafortunadamente tengo que usar class y no id para nombrar los DIV porque mi hoja de estilo XSLT genera dinámicamente los nombres de los DIV usando ciertos nombres de categorías.
Sé que ciertos navegadores ahora son compatibles getElementByClass, pero como Internet Explorer no, no quiero seguir ese camino.
Encontré scripts que usan funciones para obtener elementos por clase (como el número 8 en esta página: http://www.dustindiaz.com/top-ten-javascript/ ), pero no puedo entender cómo integrarlos. con mi script de alternancia.
Aquí está el código HTML. Faltan los DIV ya que se generan al cargar la página con XML/XSLT.
Pregunta principal: ¿Cómo puedo obtener 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>
El getElementsByClassNamemétodo ahora es compatible de forma nativa con las versiones más recientes de Firefox, Safari, Chrome, IE y Opera; puede crear una función para verificar si hay una implementación nativa disponible; de lo contrario, use el método de 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';
}
}
}
Los navegadores modernos son compatibles con document.getElementsByClassName. Puede ver el desglose completo de qué proveedores ofrecen esta funcionalidad en caniuse . Si está buscando ampliar el soporte a navegadores más antiguos, puede considerar un motor de selección como el que se encuentra en jQuery o un polyfill.
Respuesta anterior
Querrás registrarte en jQuery , que permitirá lo siguiente:
$(".classname").hide(); // hides everything with class 'classname'
Google ofrece un archivo fuente jQuery alojado, para que pueda consultarlo y estar listo y funcionando en unos momentos. Incluye lo siguiente en tu 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>
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';
Actualmente, al utilizar 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 la identificación del 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]
