الـ DOM (Document Object Model) هو تمثيل الصفحة كشجرة من الكائنات، وواجهة تسمح لـ JavaScript بالتعامل مع HTML: قراءة العناصر وتعديلها وإضافتها وحذفها.

// read
const title = document.querySelector('h1');
console.log(title.textContent);

// change
title.textContent = 'New title';
title.classList.add('highlight');

// add
const p = document.createElement('p');
p.textContent = 'Added by JavaScript';
document.body.append(p);

الشجرة

document هو الجذر، وتحته html، ثم head وbody، ثم كل العناصر داخلها. كل عنصر “عقدة” يمكن الوصول إليها.

عندما تفتح أدوات المطور وترى تبويب Elements، فأنت ترى الـ DOM الحالي، وليس بالضرورة HTML الأصلي.