Install Node.js and Check Your Setup

1) Do you already have Node?

node -v
npm -v
npx -v

If node -v prints a version for example, v22.19.0, you are good.

2) Installations

macOS

1. Go to the downloads page: https://nodejs.org/en/download
2. Download the macOS installer
3. Run the installer and follow the prompts
4. Once downloaded, open the terminal
5. Verify:

bash 
node --version
npm --version

Linux (Ubuntu)

sudo apt update
sudo apt install nodejs npm

# Verify
    node -v
    npm -v

Windows

1. Go to the downloads page: https://nodejs.org/en/download
2. Download the Windows installer (.msi)
3. Run the installer and follow the prompts
   • Keep default options
   • When you see the option to Automatically install the necessary tools, check it if you plan to build native modules
4. Once downloaded, open the Command Prompt
5. Verify:

bash 
node -v
npm -v
npx -v

3) Run your JavaScript file

Create a file like script.js Run it:

> node script.js

DOM Quick Reference

---

Select elements

const title = document.querySelector('#title');

---

Read or change content

// text
title.textContent = 'Welcome to the DOM workshop';

// HTML (avoid with untrusted input)
desc.innerHTML = '<strong>Bold</strong>';

// input value
const name = nameInput.value.trim() || 'friend';

---

Inline styles

// page colors
document.body.style.backgroundColor = '#1c1e1f';
document.body.style.color = '#e7e7e7';

// element styles
title.style.padding = '0.25rem 0.5rem';
title.style.borderRadius = '6px';

---

Create and insert

// create
const li = document.createElement('li');
li.textContent = `Item ${list.children.length + 1}`;

// insert
list.append(li); // end
list.prepend(document.createElement('li')); // start

// insert relative to another element
title.before('Intro: '); // before <h1>
title.after(' End'); // after <h1>

// quick HTML snippet
list.insertAdjacentHTML('beforeend', '<li><b>HTML item</b></li>');

---

Remove

li.remove();
// or
list.removeChild(list.lastElementChild);

---

Events

// click
changeTitleBtn.addEventListener('click', () => {
  title.textContent = 'Title updated via DOM';
});

// add item
addItemBtn.addEventListener('click', () => {
  const item = document.createElement('li');
  item.textContent = `Item ${list.children.length + 1}`;
  list.append(item);
});