DOM — امسك الصفحة وغيّرها

هنا تتحول الصفحة من ورقة ميتة إلى تطبيق حي. DOM شجرة عناصر الصفحة، وجافاسكربت تتحكم بها:

// الامساك
const title = document.querySelector("h1");
const btn = document.querySelector("#go");
// التغيير
title.textContent = "عنوان جديد";
title.style.color = "green";
btn.classList.add("active");
// الإنشاء
const p = document.createElement("p");
p.textContent = "عنصر جديد من العدم!";
document.body.appendChild(p);

querySelector يختار بأي selector CSS تعرفه: وسم، أو .class، أو #id. الحين عندك يد فعلية داخل الصفحة!