التعامل مع العناصر الأبناء (Children) في DOM

<div id="parent">
  <p>فقرة 1</p>
  <p>فقرة 2</p>
  <span>عنصر آخر</span>
</div>

const parent = document.getElementById("parent");
console.log(parent.children); // HTMLCollection of <p> و <span>
console.log(parent.children[0]); // أول ابن

console.log(parent.childNodes); // ممكن تلاقي فواصل نصية مثل "\n"

console.log(parent.firstElementChild); // <p>فقرة 1</p>
console.log(parent.lastElementChild);  // <span>عنصر آخر</span>

for (let child of parent.children) {
  console.log(child.tagName); // مثل: P, P, SPAN
}

const paragraph = document.querySelector("#parent p");
console.log(paragraph.parentElement); // يرجع <div id="parent">

while (parent.firstChild) {
  parent.removeChild(parent.firstChild);
}

parent.innerHTML = ""; // يفرّغ كل المحتوى

const secondParagraph = parent.children[1];
parent.removeChild(secondParagraph);

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


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

// عرض جميع العناصر
for (let li of list.children) {
  console.log(li.textContent);
}

// حذف العنصر الأخير
list.removeChild(list.lastElementChild);