vanilla JS

Question 1

Select DOM elements by CSS selector

Answer 1

var matches = 
// elements with  a div class="foo"
document.querySelectorAll('div.foo');

for (i=0; i

Question 2

Select elements by class name

Answer 2

var list = document.getElementsByClassName(‘foo’);

	// get the number of selected elements
	console.log(list.length);

	// iterate over elements and output their HTML content
for (var i=0; i

Question 3

Select elements by tag name

Answer 3

var list = 
// METHOD 1
document.getElementsByTagName('a');

	// get the number of selected elements
	console.log(list.length);

	// iterate over elements and output href attribute values
	for (var i=0; i

Question 4

Select an element by ID

Answer 4

var el = document.getElementById('foo');
	el.innerHTML = 'Hello World!';

Question 5

Get parent element node

Answer 5

var el = document.querySelector('div');
	var parent = el.parentNode;

Question 6

Get siblings of an element

Answer 6

// METHOD 1
function getSiblings(el, filter) {
	    var siblings = [];
	    el = el.parentNode.firstChild;
	    do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
	    return siblings;
	}

	// example filter function
	function exampleFilter(el) {
	    return elem.nodeName.toLowerCase() == 'a';
	}

	// usage
	el = document.querySelector('div');
	// get all siblings of el
	var sibs = getSiblings(el);
	// get only anchor element siblings of el
	var sibs_a = getSiblings(el, exampleFilter);

// METHOD 2
var previous = el.previousSibling;

var next = el.nextSibling;

Question 7

Getting the children of a DOM element.

Answer 7

var el = document.querySelector(‘div’);

	var children = el.childNodes,
	    number_of_children = children.length;

for (var i=0; i

Question 8

Create a DOM element

Answer 8

var el = document.createElement(‘div’);

el.innerHTML = ‘<p>Hello World!</p>’;

// alternatively,
var textnode = document.createTextNode('Hello World!');
	el.appendChild(textnode);

Question 9

Replace a DOM element

Answer 9

var el = document.querySelector(‘div’);

	// <a href="/javascript/manipulation/creating-a-dom-element-51/">create a new element</a> that will take the place of "el"
	var newEl = document.createElement('p');
	newEl.innerHTML = '<b>Hello World!</b>';

	// replace el with newEL
	el.parentNode.replaceChild(newEl, el);

Question 10

Unwrap a DOM element

Remove the parents of an element from the DOM, leaving the element’s content in place.

Answer 10

// select element to unwrap
	var el = document.querySelector('div');

	// get the element's parent node
	var parent = el.parentNode;

	// move all children out of the element
	while (el.firstChild) parent.insertBefore(el.firstChild, el);

	// remove the empty element
	parent.removeChild(el);

Question 11

Empty an element’s content

Remove all child nodes of an element from the DOM.

Answer 11

var el = document.querySelector('div');
	el.innerHTML = '';

Question 12

Removing an element

Answer 12

var el = document.querySelector('div'); // select the first returned <div> element 
	el.parentNode.removeChild(el);</div>

Question 13

Insert an element after or before another

Answer 13

function insertAfter(el, referenceNode) {
	    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
	}

	// example
	var newEl = document.createElement('div');
	newEl.innerHTML = '<p>Hello World!</p>';

var ref = document.querySelector('div.before');

insertAfter(newEl, ref);

// insert before
function insertBefore(el, referenceNode) {
	    referenceNode.parentNode.insertBefore(el, referenceNode);
	}

	// example
	var newEl = document.createElement('div');
	newEl.innerHTML = '<p>Hello World!</p>';

var ref = document.querySelector('div.before');

insertBefore(newEl, ref);

Question 14

Get the text content of an element

Get the combined text contents of an element, including its descendants, or set the text content of the element.

Answer 14

var el = document.querySelector('div');
	text = el.textContent || el.innerText;
	console.log(text);

Question 15

Get and set the HTML content of an element

Read or write the HTML content of an element.

Answer 15

var el = document.querySelector(‘div’);

	// get HTML content
	console.log(el.innerHTML);

	// set HTML content
	el.innerHTML = '<p>Hello World!</p>'

Question 16

Append or prepend to an element

Insert a new element or an HTML structure to the end or the beginning of another element’s content.

Answer 16

var el = document.querySelector(‘div’);

	// get element content as string
	console.log(el.innerHTML)

	// append to the element's content
	el.innerHTML += '<p>Hello World!</p>';

	// prepend to the element's content
	el.innerHTML = '<p>Hello World!</p>' + el.innerHTML;

Question 17

Clone an element

Answer 17

var el = document.querySelector(‘div’);

var foo = el.cloneNode(true);

Question 18

Iterating over a list of selected elements

Answer 18

var divs = document.querySelectorAll(‘div’), len = divs.length;

for (var i=0; i

Question 19

Set, get, and remove properties of DOM elements

Answer 19

var el = document.querySelector('a');
	console.log(el.href);
	if (el.title != 'foo') el.title = 'foo';

var inp = document.querySelector('input[type="text"]');

console. log(inp.value);
inp. value = 'Hello World!';

var el = document.querySelector('div');

el. foo = { bar: true };
console. log(el.foo);