Basic DOM

Or how to interact with web pages

HTML Hooks

A hook can be everything you put in the HTML in order to get a specific element(s)

id
```
<div id="logo"></div>
```
class(es)
```
<div class="close-button"></div>
```
other attributes
```
<div data-translate="HomeButton"></div>
```
the element itself
```
<li></li>
```

Looking up an element

document.querySelectorAll(selector)

document.querySelector(selector)

Id Selector

document.querySelector('#logo')

Class Selector

document.querySelector('.close-button')

document.querySelectorAll('.close-button')

Tag Selector

document.querySelectorAll('li')

Attribute Selector

document.querySelectorAll('[data-translate]')

document.querySelectorAll('[data-translate=HomeButton]')

Combining selectors

document.querySelectorAll(
							    'div.close-button[data-translate=HomeButton]'
							)

Cascading

document.querySelectorAll('.header .close-button')

Using the DOM reference

Changing styles


var logoElement = document.querySelector('#logo');
logoElement.style.display = 'none';


document.querySelector('#logo').style.display = 'none';

Changing classes


var logoElement = document.querySelector('#logo');
logoElement.className = 'active';

Calling methods / Changing Attributes


var logoElement = document.querySelector('#logo');
logoElement.click();


var myImage = document.querySelector('img#myImage');
myImage.src = 'http://www.milestonesys.com/img/logo.png';

Changing content (string)


var titleElement = document.querySelector('#title');
titleElement.innerHTML = 'Basic DOM';

Changing content (Adding new elements)


var titleElement = document.querySelector('#title');
titleElement.appendChild(anotherDOMElement);

Interacting with more than one element


// querySelectorAll returns an Array-like object
var buttonElements = document.querySelectorAll('.close-button');

// so we can iterate through the elements with a for
for (var i = 0; i < buttonElements.length; i++) {
    buttonElements[i].style.display = 'none';
}

Creating New Elements

document.createElement(tagName)

Using the reference


var playerElement = document.createElement('div');
playerElement.className = 'player';
playerElement.innerHTML = 'veso';


document.querySelector('#players').appendChild(playerElement);