Due Monday Mar 16

Watch the DOM

Read Chapter 14 in Eloquent JavaScript

Review the following DOM API

Selectors

getElementById returns a node.

let el = document.getElementById('some-id');

querySelectorAll returns an array-like list of nodes.

let els = document.querySelectorAll('.any-class');
for(let i=0; i<els.length; i++){
    let el = els[i];
}

the rest of the examples.

CSS

Add class

el.classList.add('class-name');

Remove class

el.classList.remove('class-name');

Set properties

el.style.fontSize = '12px';
el.style.display = 'none';

CSS property names follow a hyphen-case to camelCase convention in JS.

Get value

window.getComputedStyle(el)['prop-name'];

innerHTML gets or sets HTML.

Get

let content = el.innerHTML;

Set

el.innerHTML = '<p>Hi</p>';

Tags are parsed

Delete content

el.innerHTML = '';

Append

el.innerHTML += 'hi';

Remove element

el.parentNode.removeChild(el);

Get value of a field

let val = el.value;

Set value of a field

el.value = 'new value';

Event callback

el.addEventListener('click', e => {
    console.log(e);
});