DOM Traversing

<div class="card">
  <h3>عنوان</h3>
  <p>وصف هنا</p>
  <button>احذف</button>
</div>


const button = document.querySelector("button");

// الوصول إلى العنصر الأب (div.card)
const card = button.parentElement;

// حذف البطاقة بالكامل
button.onclick = () => {
  card.remove();
};

<ul id="myList">
  <li>عنصر 1</li>
  <li>عنصر 2</li>
  <li>عنصر 3</li>
</ul>


const ul = document.getElementById("myList");

// كل الأبناء (عناصر فقط)
console.log(ul.children); // [li, li, li]

// أول ابن
console.log(ul.firstElementChild.textContent); // "عنصر 1"

// آخر ابن
console.log(ul.lastElementChild.textContent); // "عنصر 3"

<div>
  <span id="s1">أول</span>
  <span id="s2">ثاني</span>
  <span id="s3">ثالث</span>
</div>


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

// العنصر السابق
console.log(s2.previousElementSibling.textContent); // "أول"

// العنصر التالي
console.log(s2.nextElementSibling.textContent); // "ثالث"

<div class="parent">
  <div class="child">
    <span id="inner">اضغط هنا</span>
  </div>
</div>

const span = document.getElementById("inner");

const closestParent = span.closest(".parent");
console.log(closestParent); // div.parent