Zugriff auf .classList eines bestehenden div

Question

Ich bin ein wenig verwirrt durch, wie ich kann nicht den classlist eines HTMLDivElement zugreifen zu sein scheint. Hier ist der relevante js Code ...

var thisDropTarget = document.getElementById(dropTargetId); 
    console.log("document.getElementById(draggedId) = "+document.getElementById(draggedId)); 
    console.log("document.getElementById(draggedId).classList = "+document.getElementById(draggedId).classList); 
    document.getElementById(draggedId).classList.remove("dragged"); 

Die erste console.log sagt document.getElementById (draggedId) ist ein [Objekt HTMLDivElement]. Das zweite console.log gibt an, dass die Klassenliste des Objekts nicht definiert ist. Die nächste Zeile gibt den Fehler aus und sagt, dass es nicht möglich ist, die Eigenschaft "remove" von "undefined oder null reference" zu erhalten.

An anderer Stelle in einem mousemove- Handler, überprüfe ich, dass das gezogene Element in der Tat hat eine Klasse (es hat die ‚gezogen‘ Klasse).

Irgendwelche Ideen, warum das passiert sein könnte?

Answer 1

Wie der Verfasser der Frage bemerkte, war das Problem, weil IE keine classList Unterstützung bis IE10 hatte, und selbst dann wurde es bis zum Edge Rebranding (caniuse) nicht vollständig implementiert.

Allerdings sollten Sie müssen in classlist GTE IE 8, gibt es ein recht ordentliches polyfill (github), die auch in the MDN page for classList eingebettet ist.

Alternativ können Sie sich einige Hilfsfunktionen schreiben und die Teile classList Sie manuell wollen implementieren, mit einem erkennen, dass ein „nach vorne zu tatsächlichen classList Aufruf“ Version lädt stattdessen sollte verfügbar sein. Das ist der Weg, den ich persönlich ging, da ich mit dem US-Bildungssystem bei der Arbeit beschäftigen und Schulbezirke sind berüchtigt dafür, dass alte Hardware. Es ist ein wenig weniger belastend auf den Computer des Benutzers sollte die volle Leistung des classList nicht wirklich benötigt werden (dh, sie werden es nur mit Klassen von className hinzufügen/entfernen). Eine Probe davon ist unten angegeben; Beachten Sie, dass Sie wahrscheinlich die Regex eine Smidge verbessern könnten.

$.setCls = function(ele, cls) { 
    if (!$.hasCls(ele, cls)) ele.className += " " + cls; 
}; 

$.rmCls = function(ele, cls) { 
    ele.className = ele.className.replace(new RegExp("(^|\\s)" + cls + "(\\s|$)", "g"), "$2"); 
}; 

$.hasCls = function(ele, cls) { 
    return ele.className.match("(^|)" + cls + "(|$)"); 
}; 

$.togCls = function(ele, cls) { 
    if ($.hasCls(ele, cls)) { 
     $.rmCls(ele, cls); 
    } else { 
     $.addCls(ele, cls); 
    } 
};