تخيل الصفحة مثل شجرة: كل عنصر HTML هو عقدة (Node) داخل هذه الشجرة. JavaScript تقدر تمسك أي عقدة وتغيّرها.

أشهر الطرق هي:

• document.getElementById() حسب الـ id
• document.querySelector() باستخدام CSS selector
• document.querySelectorAll() لجلب أكثر من عنصر

HTML:

مرحبا

JavaScript:

let title = document.getElementById("title");
console.log(title);

هذه الطريقة سريعة وواضحة عندما يكون لديك عنصر واحد معروف بالـ id.

تستطيع اختيار عنصر باستخدام نفس طريقة CSS:

let btn = document.querySelector(".my-button");  // class
let box = document.querySelector("#box");        // id
let p   = document.querySelector("p");           // أول فقرة في الصفحة

إذا عندك أكثر من عنصر وتريدهم كلهم:

let items = document.querySelectorAll(".item");
console.log(items.length);

هذا يرجع “قائمة” عناصر (NodeList)، وغالبًا نستخدم معها حلقة.

items.forEach(function (el) {
  console.log(el.textContent);
});

بعد ما تمسك العنصر، تقدر تغيّر النص بداخله.

let title = document.getElementById("title");

title.textContent = "أهلاً بك في JavaScript!";

title.innerHTML = "نص مع وسم";

أفضل طريقة لتغيير شكل عنصر هي إضافة/حذف كلاس CSS.

let box = document.querySelector("#box");

// إضافة كلاس
box.classList.add("hidden");

// حذف كلاس
box.classList.remove("hidden");

// تبديل (إذا موجود احذفه، وإذا غير موجود أضفه)
box.classList.toggle("hidden");

في Tailwind “hidden” تعني إخفاء العنصر.

إذا JavaScript حاولت تمسك عنصر قبل ما المتصفح يحمّله، ستأخذ null وراح يصير خطأ. هذا يحصل كثير عندما تضع السكربت في الأعلى.

✅ حلّين ممتازين:

document.addEventListener("DOMContentLoaded", function () {
  let title = document.getElementById("title");
  title.textContent = "تم تحميل الصفحة ✅";
});

HTML:

لم يتم الضغط بعد
اضغط هنا

JavaScript:

document.addEventListener("DOMContentLoaded", function () {
  let message = document.getElementById("message");
  let btn = document.getElementById("btn");

  btn.addEventListener("click", function () {
    message.textContent = "تم الضغط ✅";
  });
});

هذا المثال هو أول خطوة حقيقية نحو التفاعل داخل صفحاتك.

1. أنشئ عنوانًا وزرًا، وعند الضغط على الزر غيّر نص العنوان.
2. أنشئ عنصرًا (div) واجعل الزر يخفيه ويظهره باستخدام classList.toggle("hidden").
3. اجلب كل العناصر التي تحمل class معيّن باستخدام querySelectorAll واطبع عددها.