Javascript In the DOM

(Vanilla Javascript)

WTF is ""Javascript in the dom""?

We are going to start using Javascript the way it was intended to be used.

making web applications.

DOM

Document object model. The interface for our html. represented as a group of nodes. can be displayed as the rendered html or the html source. javascript will use this to access our elements.

window object

There is a globally accessible object called window. this is where your javascript is loaded in the browser.

document object

A step down from the window object is the document object. this is a representation of what has been rendered to the dom.

linking javascript in html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- CSS LINK -->
  <link rel="stylesheet" href="./PATH_TO_CSS_FILE">
  <!-- JS LINK -->
  <script src="./PATH_TO_JS_FILE"></script>
  <title>Super Sweet Website</title>
</head>
<body>
  <!-- HTML GOES HERE -->
</body>
</html>

OR THE BETTER OPTION

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- CSS LINK -->
  <link rel="stylesheet" href="./PATH_TO_CSS_FILE">
  
  <title>Super Sweet Website</title>
</head>
<body>
  <!-- HTML GOES HERE -->
    
</body>
<!-- JS LINK -->
<script src="./PATH_TO_JS_FILE"></script>
</html>

.getelementbyId('id-name')

used to select element with a specific ID in the html

const submitBtn = document.getElementById('submit')

.innertext

used to add text inside of an element

const box = document.getElementById('box')

box.innerText = 'Hello, world'

Adding Event Listeners

<body>
  <button onclick="someFunction()">
    Click me to run Javascript!
  </button>
</body>

.getelementsbyClassName('class-name')

used to select all elements with a specified class name in the html

const container = 
      document.getElementsByClassName('container')

NOTE: Always returns an array-like list, even if there's only one item

.style

used to add styling to a specific element

const box = document.getElementById('box')

box.style.background = "#bada55" 
//^^sets the background color^^//

.getElementsByTagName('tagname')

used to select all elements of the same tag. returns an array-like list

const buttons = document.getElementsByTagName('button')

.classname

used to get or set a class name

const box = document.getElementById('box')

box.className // box
box.className = 'square'
box.className // square

.classlist

used to get all classes. It also adds or removes a class name

const box = document.getElementById('box')

box.classList // box
box.classList.add('square')
box.classList // box, square
box.classList.remove('square')
box.classList // box

.innerHTML

used to manipulate HTML inside of an element

const box = document.getElementById('box')

box.innerHTML = <p> + 'Hello, world' + </p>

.value

used to get the value of an input

const userInput = document.getElementById('input')

const userInputValue = userInput.value

userInputValue = 'yo dude'

Adding Event Listeners

const clickFn = () => {
	console.log('some stuff')
}

const box = document.getElementById('box')

box.addEventListener('click', clickFn)

Continued

Event Bubbling

<body>
  <div onclick='firstFn()'>
    <div onclick='secondFn()'>
      <div onclick='thirdFn()'>
        Click me!
      </div>
    </div>
  </div>
</body>

.stopPropagation

const thirdFn = (event) => {
  console.log('do a thing, then stop')
  event.stopPropagation()
}

To handle Event Bubbling

.QuerySelector

const box = document.querySelector('#box')

const box2 = document.querySelector('.box')

const box3 = document.querySelector('div')

A better way to select elements

.QuerySelectorAll

const allBoxes = document.querySelectorAll('.box')

const allDivs = document.querySelectorAll('div')

A better way to select elements

Creating Elements in the DoM

const mainContent = document.querySelector('#main')

const newParagraph = document.createElement('p')

newParagraph.innerText = `I'm a new paragraph`

mainContent.append(newParagraph)

DELETING Elements FROM the DoM

const mainParagraph = document.querySelector('#main>p')

mainParagraph.remove()

Working with Element Attributes

const img = document.querySelector('img')
const newUrl = 'http://your-img.jpg'

const imgUrl = img.getAttribute('src')
//^^ gets the url in the src. ^^//

img.setAttribute('src', newUrl)
//^^ changes the src atribute. ^^//