Skip to content

Instantly share code, notes, and snippets.

@BruceHubbard

BruceHubbard/addRemoveToggleClass.js

Last active December 12, 2015 12:49
Show Gist options
  • Save BruceHubbard/4774433 to your computer and use it in GitHub Desktop.
Save BruceHubbard/4774433 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
addRemoveToggleClass.js
//jQuery
$('#foo').addClass('bar');
$('.foo').addClass('bar').removeClass('list').toggleClass('highlight');
//DOM
//classList makes this easy!
document.querySelector("#foo").classList.add('bar');
//holy crap that is a lot of typing for a simple example!
for(var i = 0, foos = document.querySelectorAll('.foo'); i < foos.length; i++) {
foos[i].classList.add('bar');
foos[i].classList.remove('list');
foos[i].classList.toggle('highlight');
}
Raw
borrow_array.js
var lis = document.querySelectorAll('li');
//borrowing Array's methods. .call on a method is a fancy way to
//set the this property when the method runs
[].forEach.call(lis, function(li) {
console.log(li);
});
[].map.call(lis, function(li) { return li.id; })
//["foo", "foo2"]
[].reduce.call(lis, function(total, li) {
return total + li.id; }, "")
//"foofoo2"
Raw
classList.js
var elem = document.getElementById('foo');
elem.classList.add('bar'); //#foo now has .bar
elem.classList.remove('bar'); //.bar is now removed
elem.classList.toggle('bar'); //#foo now has .bar again
Raw
fancy_selector.js.md 
//JQuery
$('ul #foo');

//DOM
document.querySelector('ul #foo');

//JQuery
$('li.bar')

//DOM
document.querySelectorAll('li.bar')
Raw
findToggle.js
//jQuery
var foos = $('.foo');
...other code...
foos.find('#bar').toggleClass('highlight');
foos.find('.bar').toggleClass('highlight');
//DOM
var foos = document.querySelectorAll('.foo');
..other code...
for(var i = 0; i < foos.length; i++) {
foos[i].querySelector('#bar').classList.toggle('highlight');
}
//really starting to appreciate jQuery at this point!
for(var i = 0; i < foos.length; i++) {
for(var j = 0, foobars = foos[i].querySelectorAll('.bar'); j < foobars.length; j++) {
foobars[j].classList.toggle('highlight');
}
}
Raw
nodelist_iterator.js
var lis = document.querySelectorAll('li');
console.log(lis.length); // 2
for(var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
Raw
querySelector.js
//WOW this looks a LOT like jQuery
var foo = document.querySelector("#foo");
var bar = document.querySelector(".bar"); //returns first match
//querySelector is available on elements in addition to document
bar.querySelector('.foobar');
var bars = document.querySelectorAll("#foo .bar"); //return a NodeList of all .bar's inside #foo's
//also available on elements
bar.querySelectorAll(".foobar"); //returns all .foobar's inside bar
Raw
simple_manip.js
//JQuery
$('#foo').addClass('obama');
$('#foo').removeClass('obama');
$('#foo').toggleClass('obama');
//DOM
//Thank you to the new classList API!
// https://developer.mozilla.org/en-US/docs/DOM/element.classList
document.querySelector('#foo').classList.add('obama');
document.querySelector('#foo').classList.remove('obama');
document.querySelector('#foo').classList.toggle('obama');
Raw
vanilla_jquery.html
<html>
<body>
<ul>
<li id="foo" class="bar">Item 1</li>
<li id="foo2" class="bar2">Item 2</li>
</ul>
</body>
</html>
Raw
vanilla_jquery.js.md 
//Let's start with something simple like pulling a single node
$('ul');

//YEA! This looks just like JQuery!
//querySelector returns the first matched node
document.querySelector('ul');

//OK now let's select several things
$('li')

//There's also querySelectorAll which will return ALL matches
document.querySelectorAll('li')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment