📝 Penn Week 9a — JavaScript Continues

The Document Object Model (DOM)

https://dev.to/karaluton/what-exactly-is-the-dom-jhg

The Document Object Model (DOM) is a programming interface for web 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 interact with the page.

As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

(Definition from Mozilla)

Interacting with the DOM

Before Spring Break we learned about querySelector to interact with HTML elements. This is a tool to “query” or search the document by a CSS selector.

This is great, but it only targets the first item within the document that fits that query. To target all of them we can use querySelectorAll

Example

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="main.css">

<title>JavaScript Day 2</title>

</head>

<body>

<div class="wrapper">

<section>

<h1>Hello!</h1>

</section>

<section>

<h1>It’s November Third</h1>

</section>

</div>

<script src="main.js" type="text/javascript"></script>

</body>

</html>

body {

background-color: blue;

color: white;

font-family: monospace;

}

h1 {

font-weight: normal;

}

let body = document.body;

let headline = document.querySelector("h1");

​​The Document Object Model (DOM)

​​Interacting with the DOM

The Document Object Model (DOM)

Interacting with the DOM