选择和修改DOM元素

如何在JS中选择DOM元素？什么是jQuery的$选择语法的等效物？选择和修改DOM元素

比如我有一个<div>元素：

<div id="idDiv">Div Element</div>

现在我想在DIV申请addClass（ “类名”）jQuery函数。我可以用下面的方式使用jQuery做：

$("#idDiv").addClass("ClassName") or jQuery("#idDiv").addClass("ClassName")

我怎样才能做到这一点香草JS？

来源

2014-01-25 user3201732

使用'文件。 getElementById（“idDiv”）。className =“ClassName”;' – tilda

我想获取jQuery对象。我将不仅应用addClass函数。 – user3201732

要获取DOM元素，请执行此操作'var element = document.getElementById（“idDiv”）;' – tilda

您可以使用classList API：

// Adding classes 
document.getElementById('idDiv').classList.add('foo'); 
// Toggling classes 
document.getElementById('idDiv').classList.toggle('foo'); 
// Removing classes 
document.getElementById('idDiv').classList.remove('bar');

请注意，IE9和下面不支持API，支持这些浏览器可以使用垫片，MDN有one。

的实验方案：

function jFoo(selector) { 
    return { 
     elems: [].slice.call(document.querySelectorAll(selector)), 
     _handleClass: function (cls, m) { 
      var len = this.elems.length, 
       cls = cls.trim().split(/\s/), 
       clen = cls.length; 
      for (var i = 0; i < len; i++) { 
       for (var j = 0; j < clen; j++) 
       this.elems[i].classList[m](cls[j]); 
      } 
      return this; 
     }, 
     addClass: function (cls) { 
      return this._handleClass(cls, 'add'); 
     }, 
     toggleClass: function (cls) { 
      return this._handleClass(cls, 'toggle'); 
     }, 
     removeClass: function (cls) { 
      return this._handleClass(cls, 'remove'); 
     }, 
    } 
} 

jFoo('selector').toggleClass('foo bar') 
       .addClass('barz fool') 
       .removeClass('foo');

来源

2014-01-25 13:25:06 undefined

需要警告IE浏览器 –

您无法切换多个类。根据规范：“如果没有给予力量，”切换“令牌，如果它存在则将其移除，如果不存在则将其添加。如果强制为真，则添加标记（与add（）相同）。如果强制为false，则删除标记（与remove（）相同）。[DOMTokenList]（http://dom.spec.whatwg.org/#domtokenlist） – Givi

@Givi是的，更正了它，谢谢你提到这个。 – undefined

添加类使用JavaScript的另一种方式：

document.getElementById("idDiv").className += " ClassName";

来源

2014-01-25 13:26:10 gauravmuk

您可以通过JavaScript的以下列方式获得元素：

var getelem = document.getElementById("idDiv"); 

    getelem.setAttribute("class", "active");

来源

2014-01-25 13:26:16 Shashank

选择和修改DOM元素

回答

相关问题