chris bailey

An Introduction to the Almighty DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

- MDN

The DOM is the interface between our CSS/HTML and javascript. It allows us to change things with the use of javascript. Everything lives inside of one object, the "document".

Selecting an element is easily accomplished using document.querySelector(), which will select the given input, say a <p> tag. From there, we have the ability to manipulate it by first saving the selection to a variable and then using dot notation to call on styles like so: p.style.color = "red"; which takes a variable p that we assigned with document.querySelector("p") and changes the CSS style "color" to red.

First Five Methods

document.getElementById() : returns an element by its ID.

document.getElementsByClassName() : returns all elements matching a given class name

document.getElementsByTagName() : returns all elements of the matching tag name.

document.querySelector() : returns the first matching occurrence of the given CSS selector

document.querySelectorAll() : returns all matching occurrences of the given CSS selector

Manipulating Styles, Text/Content, Attributes

Styles

We have access to the style property through the DOM, which allows us to add, change or remove the style properties of a given element. A few easy examples of changing styles:

var name = document.getElementById("name");

name.style.color = "red";
name.style.border = "1px solid black";
name.style.fontSize = "16px";
name.style.background = "black";

classList gives us the ability to add, delete or toggle a new class onto an element. We could create a new class in our CSS that sets the text size to 50 with a black background and white text, and through javascript, add that unassigned CSS class to any element we would like.

/* CSS FILE */

.standOut {
  font-size: 50px;
  color: white;
  background: black;
}

// JAVASCRIPT FILE

var so = docutment.getElementById("name");

// add the class .standOut to the item with ID of "name"
so.classList.add("standOut");
// removes class standOut to the item with the ID of "name"
so.classList.remove("standOut");
// add a class if it does not exist or remove if the class exists
so.classList.toggle("standOut");

Text and Content

The .textContent method allows us to change the text inside an element. We, for example, can select a <p> with querySelector("p") and store it in a var that gives us access to the text contained inside from which we can read the existing text or replace it with new text. Caution needs to be used as setting new text with .textContent will not preserve any HTML or content within the selected element. Adding content through this method will also not allow the input of HTML elements, they will be escaped.

.innerHTML is like .textContent except it will return a string with all the HTML contained in the provided element. Setting content this way provides the same problem we have with .textContent, no inner HTML content will be preserved when we add new content. When adding new content through this method, we have the ability to use HTML in the new content, unlike .textContent.

Attributes

.getAttribute() and .setAttribute() allow us to read and write attributes like href or src .

<a href="www.google.com">I'm a link</a> <img src="logo.png" />

var link = document.querySelector("a");
link.getAttribute("href"); // www.google.com

// change href
link.setAttribute("href", "http://yahoo.com");

Events

DOM Events are sent to notify the code of interesting things that have taken place. Each event is represented by an object based on the Event interface and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

- MDN

Events are notifications sent with key clicks, mouse clicks, button clicks, etc. We use them by attaching an event listener to a set element, and from there, we can launch other processes through javascript once the event notification has been triggered. A common listener is element.addEventListener(type, functionToCall); .

var button = document.querySelector("button");
button.addEventListener("click", function () {
  console.log("THE BUTTON HAS BEEN CLICKED!");
});

The above code sends a console message once the selected button has been clicked. Named functions can also be used in place of an anonymous function, most of the time, an anonymous function will be preferred, but some situations may arise where there is a function used in multiple places where a named function would be preferred over an anonymous one.

Some common addEventListener types:

  • click
  • mouseover
  • mouseout
  • keydown
  • keypress
  • keyup
  • focus
  • blur
  • change
  • submit
  • scroll
  • resize
  • load