既存のdivの.classListへのアクセス

Question

HTMLDivElementのclassListにアクセスできないように思えて、ちょっと謎です。ここでは、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）は、[オブジェクトHTMLDivElement]であると言います。 2番目のconsole.logは、オブジェクトのclassListが定義されていないことを示します。次の行は、 "未定義またはnull参照のプロパティ 'remove'を取得できませんというエラーをスローします。

mousemoveハンドラで、ドラッグされた要素が実際にクラスを持っていることを確認します（ドラッグされたクラスがあります）。

なぜ起こっているのでしょうか？質問気付かのライターを1として

Answer 1

IEはIE10までclassListサポートしていませんでした、そしてその後も、それは完全にエッジ商標変更（caniuse）まで実装されていなかったため、問題となりました。

しかし、classListがGTE IE 8に必要な場合は、にも埋め込まれたかなりまともなポリフィル（github）があります。

また、classListの部分を手動で作成し、その代わりに「実際のclassList呼び出しに転送する」バージョンを使用する検出機能を実装することもできます。私が個人的に行ったのは、職場の米国の教育システムを扱っているからです。学校区は古代のハードウェアを持っていることで有名です。 のフルパワーが本当に必要でない場合（つまり、それを使用してclassNameからクラスを追加/削除する場合のみ）、ユーザのマシンには少し課金がかかります。これらのサンプルは以下の通りです。あなたはおそらくregexを改善することができることに注意してください。

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