jQuery-no en JavaScript puro

Question

¿Cómo se puede escribir el siguiente jQuery-no ...

$(".hover").not(".selected"); 

... en JavaScript puro?

Answer 1

allItems = document.getElementsByTagName('*'); 
goodItems = []; 
for(i=0;i<allItems.length;i++){ 
    if(
     allItems[i].className && 
     (' '+allItems[i].className.replace(/\s+/g, ' ')+' ').indexOf(' '+'hover'+' ') != -1 && 
     (' '+allItems[i].className.replace(/\s+/g, ' ')+' ').indexOf(' '+'selected'+' ') == -1 
    ) 
     goodItems.push(allItems[i]); 
} 

Si necesita este tipo de selecciones Categoría frecuencia con la que debe considerar el ahorro como funciones o incluso replicar algunos de los comportamientos de jQuery para ser capaz de hacer cosas como $(".hover").not(".selected");

Answer 2

También puede utilizar la función siguiente para obtener elementos por nombre de clase.

excludeClass es un parámetro opcional aquí, esta función seguirá funcionando si solo define el parámetro includeClass.

function getElementsByClassName(includeClass, excludeClass) { 
    var elements = []; var el = document.getElementsByTagName('*'); 
    var regexp1 = new RegExp("\\b" + includeClass + "\\b"); 
    var regexp2 = new RegExp("\\b" + (excludeClass ? excludeClass : "") + "\\b"); 
    for (var i = 0; i < el.length; i++) { 
     if (regexp1.test(el[i].className) && !regexp2.test(el[i].className)) { elements.push(el[i]); } 
    } 
    return elements; 
} 

Answer 3

Lo siguiente funcionará. Se podría optimizar utilizando una implementación de navegador nativo de getElementsByClassName() donde esté presente para filtrar la lista a solo elementos con la clase "hover".

function hasClass(el, cssClass) { 
    return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className); 
} 

var matchingElements = []; 
var allElements = document.getElementsByTagName("*"); 
for (var i = 0, len = allElements.length, el; i < len; ++i) { 
    el = allElements[i]; 
    if (hasClass(el, "hover") && !hasClass(el, "selected")) { 
     matchingElements.push(el); 
    } 
}