JavaScript Fundamentals: Master the DOM! (Part 2)
12 min readMar 7, 2019
In this article, we’re going to learn all about traversing DOM elements as well as making changes to DOM elements. We’re following on from Master the DOM! (Part 1). So let’s get started!
🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!
Subscribe to my newsletter here → https://easeout.eo.page
Traversing the DOM
When we traverse the DOM, we’re essentially navigating through the DOM. We work with parent, child and sibling properties to apply our JavaScript to DOM elements.
We’ll be using a new example, as follows:
<!DOCTYPE html>
<html><head>
<title>Traversing the DOM</title>
</head><body>
<h1>Traversing the DOM</h1>
<p>Let's work with this example to <strong>MASTER</strong> the DOM!</p>
<h2>List of Items..</h2>
<ul>
<li>Pizza</li>
<li>Burgers</li>
<li>Doritos</li>
</ul>
</body><script>
const h1 = document.getElementsByTagName('h1')[0];
const p = document.getElementsByTagName('p')[0];
const ul = document.getElementsByTagName('ul')[0];
</script>
