選擇和修改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元素

回答

相關問題