Learning About Nodes

This page is notes from Tania Rascia’s How to traverse the dom.

(See the work page for this from Tania. Every element is given an 1px outline.)

We can also define the title by writing
document.title = "this is page 7"

There are several other elements we can select easily by name:

To select a lower element in Javascript use

document.getElementsByTagName('p')[0]

The 0 in square brackets is choosing the first paragraph

In Tania's example page she defines 3 variables:

const h1 = document.getElementsByTagName('h1')[0]
const p = document.getElementsByTagName('p')[0]
const ul = document.getElementsByTagName('ul')[0]
const vs let

Targetting parent elements

There are two things that can do this:

If you want to target two levels up you can string two parentNode's together to get the parent of the parent of:

h1.parentNode.parentNode

The parent of h1 in Tania’s file is body and the parent of that is HTML. So in the console this returns html.

parentNode is used more than parentElement

Adding CSS

Once you've targetted an element you can style it. Typically this is done by first adding a .style then another dot and the property you wish to affect. You can’t use a colon so you use equals sign with the value in quotes. Like this:

h1.style.color="orange";;. NB. the h1 here is a variable defined above.

The list