Working with the DOM

Document Object

  • everything in the document can be manipulated via the DOM
dom1.jpg

Inspecting the DOM

devtools.png

Finding Elements

  • “Vanilla” JavaScript (described in MDN)
    • document.querySelector("str")
  • jQuery (convenience library)
    • $("str")
    • library must be loaded with <script src="http://code.jquery.com/jquery-3.3.1.min.js"</script>
  • we use jQuery in examples, but it’s your choice.
    • slightly different syntax & different return values, so be careful.

Change CSS of an Element

Get and Change Text Content

Get and Change Full inner HTML

Append elements

What does jQuery return?

  • an “array-like object”
  • it’s not exactly an array, but you can use “of” to iterate over HTMl objects
  • each element can use native DOM methods for HTML elements (cf MDN)
  • to use jQuery methods on it, wrap it again in the $() function

Looping: over HTML elements

Looping – advanced

Trickier! Uses a “callback function” – see this excellent, but still difficult, explanation

Takeaways for us

  • it’s a wild world out there
  • many complex concepts, but if you go slowly, it’s not impossible to figure out
  • key is to understand that the DOM is a strutureo f HTML elements, which can be *created, destroyed,