CPIT-405 · WEB APPLICATIONS

JS

The DOM

Part 3: Take control of the whole page

The treeNodes & windowSelectingquerySelectorStyles & classesContentTraversalCreate & insertremove()

01 · WHAT IS THE DOM?

Document Object Model

<body> <h1>Hi</h1> <p>Text</p></body>

browser reads it →

+ add

✎ change

− delete

elements · attributes · styles · events

02 · THE DOM TREE

<html><head> <title>My Title</title></head><body> <div class="content"> <ul id="menu"> <li>Home</li> <li>About</li> </ul> </div></body></html>

03 · NODES & WINDOW

<p> <div>ELEMENT_NODE

"some text"TEXT_NODE

<!-- note -->COMMENT_NODE

hrefATTRIBUTE_NODE

Tab 1 · windowTab 2 · its own window

window

documentwindow.documentthe page: the DOM tree lives here

04 · SELECTING ELEMENTS

document.getElementById("title")

→

<h1> Title 1

one element

document.getElementsByTagName("h1")

→

<h1> Title 1<h1> Title 2

document.getElementsByName("hobby")

→

☐ Volleyball☐ Football☐ Basketball

The s in Elements means you get a collection: loop over it, or use [0]

05 · CSS SELECTORS

querySelector & querySelectorAll

<h1 class="title"> KAU

<h1 class="title"> CPIT-405

document.querySelector('h1.title') → the first match

document.querySelectorAll('h1.title') → all matches

#id.classtag.box > ali:last-child

06 · CHANGING STYLES

div.style.backgroundColor = "red";

CSSJavaScript

background-colorbackgroundColor

margin-topmarginTop

text-decorationtextDecoration

colorcolor

This is a paragraph

This is a paragraph

07 · CLASSES

Style with a class, switch with classList

/* CSS */.dark-mode { background: #16212b; color: white; }

document.body.classList.toggle("dark-mode");

One line: adds the class if it is missing, removes it if it is there

Toggle

Toggle

Toggle

08 · ATTRIBUTES & CONTENT

document.getElementById("myLink").href = "https://cpit405.gitlab.io/";

CPIT-405href="#"href="https://cpit405.gitlab.io/"

el.innerText = "<b>Hi</b>";

<b>Hi</b>shown as plain text

el.innerHTML = "<b>Hi</b>";

Hiparsed into real elements

09 · MOVING AROUND THE TREE

↑up: parents

↓down: children

↔sideways: siblings

10 · CREATING ELEMENTS

Build it from nothing

let ul = document.createElement("ul");let li = document.createElement("li");let text = document.createTextNode("Item 1");li.appendChild(text);ul.appendChild(li);document.body.appendChild(ul);

ul

li

"Item 1"

<ul>

<li>"Item 1"

on the page

• Item 1

11 · INSERTING NEXT TO AN ELEMENT

insertAdjacentText & insertAdjacentHTML

beforebegin

<p>

afterbegin

text value

beforeend

</p>

afterend

h1.insertAdjacentText("beforeend", ": Web Applications");

CPIT-405: Web Applicationstext added

div.insertAdjacentHTML("beforeend", '<input type="submit" value="share">');

sharea real element added

12 · DELETING

.remove()

let elem = document.querySelector("#languages li:last-child");elem.remove();

ul#languages

JavaScript

Node

Go

Ruby

Rust

Java

NEXT

Your turn

Open the practice platform and start the Part 3 tab

Selector huntPredict the DOMDOM challenges