javascript - 访问现有 div 的 .classList

Question

我对如何访问 HTMLDivElement 的类列表感到有点困惑。这是相关的js代码......

    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");

第一个 console.log 说 document.getElementById(draggedId) 是一个 [object HTMLDivElement]。第二个 console.log 表示对象的 classList 未定义。下一行抛出错误，说它是“无法获取未定义或空引用的属性'remove'”。

在其他地方，在 mousemove 处理程序中，我检查拖动的元素是否确实有一个类(它有“拖动”类)。

知道为什么会这样吗？

Answer 1

根据问题的作者，问题是因为 IE 在 IE10 之前没有 classList 支持，即使那样，它也没有完全实现，直到 Edge 品牌 reshape (caniuse) .

但是，如果您需要 GTE IE 8 中的 classList，则有一个相当不错的 polyfill ( github ) 甚至嵌入在 the MDN page for classList 中。

或者，您可以自己编写一些辅助函数并手动实现您想要的 classList 部分，并使用加载“转发到实际 classList 调用”版本的检测相反，它应该可用。这是我个人走的路线，因为我在工作中处理美国教育系统，而学区因硬件陈旧而臭名昭著。如果真的不需要 classList 的全部功能(即，您只是用它来添加/从 className 中删除类)，那么它对用户机器的负担会小一些.下面提供了其中的示例；请注意，您可能会稍微改进正则表达式。

$.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);
    }
};