Javascript 删除jQuery但是.className+=不工作？

我有一个非常简单的非画布菜单，在jQuery中运行良好。我正试图用普通javascript重写它

在下面的代码中，作为jQuery的addClass正在工作，但是.className+=不工作

var burger = document.getElementsByClassName('l-burger');
var html = document.querySelectorAll('html');

$(burger).click(function(){
  $(html).className += ' menu-opening'; // not working 

  setTimeout(function(){
    $(html).addClass('menu-open');
    $(html).removeClass('menu-opening');
  }, 300);
});

---

这是因为$html提供了一个jQuery对象，而不是本机domeElement

您可以在jQuery对象的键0处访问本机元素：

$(html)     // returns a jQuery object
$(html)[0]  // returns a native DOMElement

因此，要添加类名，您应该使用如下内容：

$(html).className += ' menu-opening';

用法：document.querySelector'html'。className=document.querySelector'html'。className+'myClassName'

或如评论中所建议的：

var htmlNode = document.querySelector('html');
htmlNode.className = htmlNode.className + ' myClassName'

---

甚至更干净：document.querySelector'html'.classList.add'myClassname'

我正试图用JavaScript1重写它。您的意思是直接使用DOM jQuery是普通的JavaScript。2.那你为什么还在用jQuery呢$html正在调用jQuery并返回jQuery对象。1。您提到要替换jQuery，但您使用的是$html。2.每个文档应该只有一个元素，不需要使用querySelectorAll，而是使用document.documentElement。3.一旦获得对本机元素的引用，最好使用classList。添加“someClassName”…尽管如果不想使用classList，className+=菜单打开也会起作用。但是现在classList的支持非常好，将对元素的引用保存在变量中比两次查询DOM要有效得多。