اكتب كود JS لاختيار العناصر التالية:

1. عنصر يحمل المعرف `header` (استخدم `getElementById`).
2. جميع العناصر التي تحمل الفئة `btn` (استخدم `querySelectorAll`).
3. أول عنصر `p` في الصفحة (استخدم `querySelector`).

const header = document.getElementById("header");
const buttons = document.querySelectorAll(".btn");
const firstPara = document.querySelector("p");

لديك عنصر `h1` بالمعرف `title`:

1. غير نصه الداخلي ليصبح "مرحباً بالعالم" (innerText).
2. غير محتواه ليصبح `<span>مرحباً</span>` (innerHTML).

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

title.innerText = "مرحباً بالعالم";
title.innerHTML = "<span>مرحباً</span>";

غير تنسيق العنصر `box`:

1. اجعل لون الخلفية أحمر (backgroundColor).
2. اجعل حجم الخط 20px (fontSize).
3. أخفِ العنصر تماماً (display = 'none').

const box = document.getElementById("box");

box.style.backgroundColor = "red";
box.style.fontSize = "20px";
box.style.display = "none";

استخدم `classList` لتعديل فئات العنصر `item`:

1. أضف الفئة `active`.
2. أزل الفئة `hidden`.
3. بدل حالة الفئة `selected` (toggle).

const item = document.getElementById("item");

item.classList.add("active");
item.classList.remove("hidden");
item.classList.toggle("selected");

أضف عنصراً جديداً للصفحة:

1. أنشئ عنصر `li` جديد.
2. أضف له النص "عنصر جديد".
3. أضفه كابن لقائمة موجودة بالمعرف `list` (appendChild).

const newItem = document.createElement("li");
newItem.innerText = "عنصر جديد";

const list = document.getElementById("list");
list.appendChild(newItem);

اجعل الزر `btn` تفاعلياً:

1. أضف مستمع لحدث النقر (click).
2. عند النقر، اطبع "تم النقر!" في الكونسول.

const btn = document.getElementById("btn");

btn.addEventListener("click", function() {
    console.log("تم النقر!");
});

اقرأ قيمة من حقل إدخال:

1. لديك حقل إدخال `input` وزر.
2. عند النقر على الزر، اقرأ القيمة الموجودة في الحقل (`value`).
3. اعرضها في تنبيه (`alert`).

const input = document.getElementById("myInput");
const btn = document.getElementById("myBtn");

btn.addEventListener("click", function() {
    alert(input.value);
});

استمع لضغطات المفاتيح:

1. أضف مستمع لحدث `keydown` على كامل المستند.
2. اطبع اسم المفتاح المضغوط (`event.key`) في الكونسول.

document.addEventListener("keydown", function(event) {
    console.log(event.key);
});

امنع نموذجاً من الإرسال:

1. لديك نموذج `form`.
2. عند حدث الإرسال (`submit`)، امنع الصفحة من إعادة التحميل باستخدام `event.preventDefault()`.
3. اطبع "تم إيقاف الإرسال".

const form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
    event.preventDefault();
    console.log("تم إيقاف الإرسال");
});

احذف عنصراً من الصفحة:

1. عند النقر على العنصر `item`، قم بحذفه من DOM.
2. استخدم `item.remove()` أو `item.parentElement.removeChild(item)`.

const item = document.getElementById("item");

item.addEventListener("click", function() {
    item.remove();
});