Выбор и изменение элементов DOM

Question

Как выбрать элементы DOM в JS? Что эквивалентно синтаксису выбора jQuery's $?

Например, у меня есть <div> элемента:

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

Теперь я хочу, чтобы применить addClass ("ClassName") функцию JQuery на делах. я могу сделать это с JQuery с следующим образом:

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

Как я могу это сделать с ванильным JS?

Answer 1

Вы можете использовать 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'); 

Answer 2

Другой способ добавления класса с помощью JavaScript:

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

Answer 3

Вы можете получить элемент с помощью JavaScript следующим способом:

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

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