我如何在vanilla js中编写这个JQuery addClass方法

那我怎么写呢

$('div').addClass('border1'); 

在Vanilla javascript中，就像我的add class方法一样。 到目前为止我所拥有的是，

 function addClass(x,y) { x.className += " " + y; } 

但我知道这是错误的，因为参数已关闭。 我真的输了。

Answer 1

让我们仔细看看jQuery在这里做了些什么。

$('div')是什么意思？

在jQuery术语中，它意味着“在文档中选择所有’div’元素” 。
$('div')是一个jQuery对象，它表示文档中的所有div元素。 但是在这段代码中你没有自己专门针对单个DOM元素。

让我们编写自己的简化选择对象“MySelect”：

 /** * `MySelect` object constructor. */ function MySelect(selector){ this.elementList = document.querySelectorAll(selector); } 

现在让我们使用它：

 var divs = new MySelect('div'); divs.elementList; // all `div` elements in the document. 

（注意， querySelectorAll是一个原生的javascript DOM方法）

现在我们有了一个元素选择对象，让我们为它添加一个addClass方法：

 /** * Add the specified class to all elements selected by this object. */ MySelect.prototype.addClass = function(cls){ var i, e; for (i = 0; i < this.elementList.length ; i++){ e = this.elementList[i]; e.className += " " + cls; // can also use e.classList.add } } 

瞧：

 divs.addClass('xyz'); 

这是一个非常简单的方式，就是jQuery的工作原理。

对于$语法，您可以执行以下操作：

 function $(selector){ return new MySelect(selector); } 

像往常一样使用它：

 $('div').addClass('xyz'); 

Answer 2

element.classList是vanillaJS的做法

 var x = document.getElementById('x'); var y = document.getElementById('y'); var z = document.getElementById('z'); y.addEventListener('click',function(){ x.classList.add('blue'); }); z.addEventListener('click',function(){ x.classList.toggle('blue'); }); 

 #x { width: 50px; height: 50px; border: 1px dotted gray; } .blue { background-color: blue; } 

 
 add the class toggle the class 

Answer 3

如果你的目标是IE10 +，你可以使用

  var el = document.getElementById("someId"); el.classList.add(className); 

对于所有浏览器：

 if (el.classList) el.classList.add(className); else el.className += ' ' + className; 

资料来源：http： //youmightnotneedjquery.com/#add_class

Answer 4

 function addClass(selector, class) { els = document.querySelectorAll(selector); for (var i = 0; i < els.length; i++) { els[i].className += class; } } 

然后你可以这样做：

 addClass('div', 'border1'); addClass('#someID', 'someclass'); addClass('.someClass', 'someotherclass'); 

Answer 5

我写这不是推荐，而是因为你似乎想要创建一个方法，而不是一个函数; 可能是因为人们可能会更好。 然而，它们大致相同，除了扩展原型以添加方法可能会带来麻烦。 但是，如果你必须：

 NodeList.prototype.addClass = function (cName) { // creates an Array from the NodeList, and iterates through: return [].forEach.call(this, function (elem) { // adds the passed-in class-name: elem.classList.add(cName); }); }; 

以上可以通过以下方式调用：

 document.querySelectorAll('div').addClass('newClassName'); 

要么：

 document.getElementsByTagName('div').addClass('newClassName'); 

请注意，这使用相对现代浏览器中的function，但如果需要，可以使用for循环（ forEach ）和带有className属性（ classList.add() ）的字符串连接替换它们。