Interacting with the DOM

How do you find any element anywhere in the DOM?

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  
  <div id="content">
    At first I say this.
    <p id="got-it" class="custom-text">
        Testing
    </p>
  </div>
  
  <p>More testing</p>
  
  <button class="clicker">Say Somethin</button>
</body>
</html>

document
    .body
    .childNodes[1]     // div#content
    .lastChild         // a text node
    .previousSibling   // p

document.getElementById('got-it');

document.getElementsByTagName('p')[0];

document.getElementsByClassName('custom-text')[0];

document.querySelector('.custom-text');

It's like getting Directions

But, Now we have a personal drivers

Get an element by its ID

Get elements by tag names

Get elements by class name

Get an element by a css selector

document.getElementById('element-id');

document.getElementsByTagName('div');

document.getElementsByTagClassName('elementClass');

document.querySelector('#someId .someClass');

Here are OUR personal DRIVERS

Query Selectors

#someElement {
    /* some style */
}

#anotherElement p {
    /* some more style */
}

.content > p div {
    /* make it look pretty */
}

document.querySelector('#someElement');

document.querySelector('p');

document.querySelector('.content > p div');

Using query selectors in Javascript

document.querySelector('#id');

document.querySelectorAll('#someElement');

document.querySelectorAll('p');

document.querySelectorAll('.content > p div');

.querySelectorAll()

But, just like the real world, everything comes at a cost

for (var i = 0; i < document.getElementsByTagName('p').length; i++) {
    console.log(document.getElementsByTagName('p')[i]);
}

var paragraphs = document.getElementsByTagName('p');


for (var i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i]);
}

Print all "p" tags to the console

Cache the DOM query

Which is faster?

document.getElementById('someId');

// or

document.querySelector('#someId');

// or

document.querySelectorAll('#someId')[0];

http://jsperf.com/queryselectorall-vs-getelementbyid/35

How do you add or remove elements anywhere in the DOM?

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  
  <div id="content">
    At first I say this.
    <p id="got-it" class="custom-text">
        Testing
    </p>
  </div>
  
  <p>More testing</p>
  
  <button class="clicker">Say Somethin</button>
</body>
</html>

document.createElement();

document.appendChild();

document.insertBefore();

document.replaceChild();

document.removeChild();

With these 5 methods, we can do anything we want to the DOM

We can start adding streets, buildings, and sidewalks to our map!

createElement()

var div = document.createElement('div');

appendChild()

var myDiv = document.createElement('div');

myDiv.innerHTML = 'My Content';

document.body.appendChild(myDiv);

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  
  <p>I am in a paragraph element!</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  
  <p>I am in a paragraph element!</p>
  <div>My Content</div>
</body>
</html>

Syntax

var insertedElement = element.appendChild(newElement);

insertBefore()

var newDiv = document.createElement('div');
var paragraphElement = document.querySelector('p');

newDiv.innerHTML = 'My Content';

document.body.insertBefore(newDiv, paragraphElement);

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  
  <p>I am in a paragraph element!</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  
  <p>I am in a paragraph element!</p>
  <div>My Content</div>
</body>
</html>

Syntax

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

How would I insert an element after another element?

var newDiv = document.createElement('div');
var paragraphElement = document.querySelector('p');

newDiv.innerHTML = 'My Content';

document.body.insertBefore(newDiv, paragraphElement.nextSibling);

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  
  <p>I am in a paragraph element!</p>
  <h2>I'm an h2!</h2>

</body>
</html>

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  
  <p>I am in a paragraph element!</p>
  <div>My Content</div>
  <h2>I'm an h2!</h2>

</body>
</html>

Hint: there is no insertAfter() method

replaceChild()

removeChild()