The DOM

The Document Object Model is the interface where JS meets HTML and CSS.

• Every HMTL tag turns into a JS object that we can manipulate
• Stored inside de document (check your console) Object
• SELECT an element and then MANIPULATE

    
      // Select an element
      var header = document.querySelector("h1");

      // Manipulate the selection
      header.style.color = "rebeccapurple";
    
  

    
      // Select an element
      var body = document.querySelector("body");
      var isPurple = false;

      // Manipulate the selection
      setInterval(function(){
        if(isPurple) {
          body.style.background = "coral";
        } else {
          body.style.background = "rebeccapurple";
        }
        isPurple = !isPurple;
      }, 2000);
    
  

1. DOM Selection

Everything revolves around the document.

Direct Selection

• document.URL
• document.body
• document.head
• document.links

Methods

• document.getElementById("id");
• document.getElementsByClassName("class");
• document.getElementsByTagName("tag");
• document.querySelector("css-style-selector");
• document.querySelectorAll("css-style-selector");



2. DOM Manipulation

• Changing styles
• Adding/Removing classes
• Changing the content of a tag
• Changing attributes of a tag



• Manipulating Style

        
          // Pure JS
          var tag = document.getElementById("highlight");
  
          tag.style.color = "black";
          tag.style.background = "yellow";
          tag.style.fontSize = "3em";
          tag.style.marginTop = "1em";

          // ******************************************
          // Alternative with CSS classes
          // CSS
          .some-class {
            color: black;
            background: yellow;
            font-size: 3em;
            margin-top: 1em;
          }
          // JS
          var tag = document.getElementById("highlight");
          // Add class
          tag.classList.add("some-class");
          // Remove class
          tag.classList.remove("some-class");
          // Check if has class and toggle
          tag.classList.toggle("some-class"); 
        
      




• Manipulating Text and Content

• textContent
• innerHTML - ⚠️
• innerText

        
          var tag = document.querySelector("p");

          // Retrieve content
          tag.textContent; // "This is a paragraph."
          // Change content
          tag.textContent = "This is the new text, ha!";
        
      




• Manipulating Attributes

• getAttribute()
• setAttribute()

        
          var link = document.querySelector("a");
          link.getAttribute("href");
          // a href="www.blabla.com"
          link.setAttribute("href", "http://www.dogs.com");
          // a href="http://www.dogs.com"

          var img = document.querySelector("img");
          img.setAttribute("src", "cats.png");
          // img src="cats.png"
        
      




3. DOM Events

Making things interactive.

• Clicking on a button
• Hovering over a link
• Dragging and Dropping
• Pressing the ENTER key

We first SELECT and element and then add an EVENT LISTENER to it.

• el.addEventListener('type', cb);

EX. "Listening for a click on a specific button"

      
        element.addEventListener(type, functionToCall);

        var btn = document.querySelector("button");
        btn.addEventListener("click", function() {
          console.log("Hey! stop clicking on me!");
        });
      
    

Bi-polar Click

:( No one has clicked on me...




Events

• click
• change
• mouseenter
• mouseleave
• focus
• scroll
• blur

There are hundreds and hundreds of events, you can see them all HERE.