الدرس الثالث عشر: التفاعل مع DOM في JavaScript – فهم ومعالجة عناصر الصفحة

الدرس الثالث عشر: التفاعل مع DOM في JavaScript – فهم ومعالجة عناصر الصفحة 🌐

العنوان:

كيفية التعامل مع Document Object Model (DOM) لتحديث وتعديل صفحات الويب ديناميكيًا.

المقدمة:

عند تصفح صفحة ويب، كل ما تراه عبارة عن عناصر مرتبة في شجرة تُسمى DOM. باستخدام JavaScript، يمكننا الوصول إلى هذه الشجرة، تعديلها، إضافة عناصر جديدة، أو حذف العناصر الموجودة.

ما هو DOM؟

DOM هو تمثيل برمجي للصفحة الحالية.

يمكن اعتبار DOM كـ "شجرة عائلة" لكل العناصر (عناصر HTML) على الصفحة.
يتم تحويل كل عنصر في HTML (مثل <div>, <p>, <button>) إلى عقدة (Node) يمكن التفاعل معها باستخدام JavaScript.

شجرة DOM:

<html>
  <body>
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  </body>
</html>

الوصول إلى عناصر DOM:

1. باستخدام المعرف (ID):


<div id="myDiv">Hello, World!</div>
<script>  let div = document.getElementById("myDiv");
  console.log(div.innerHTML); // "Hello, World!"</script>

2. باستخدام اسم العنصر (Tag Name):


<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>  let paragraphs = document.getElementsByTagName("p");
  console.log(paragraphs[0].innerText); // "Paragraph 1"</script>

3. باستخدام اسم الفئة (Class Name):


<div class="myClass">Div 1</div>
<div class="myClass">Div 2</div>
<script>  let elements = document.getElementsByClassName("myClass");
  console.log(elements[1].innerText); // "Div 2"</script>

4. باستخدام `querySelector` و`querySelectorAll`:


<div id="container">
  <p class="text">Text 1</p>
  <p class="text">Text 2</p>
</div>
<script>  let singleElement = document.querySelector("#container .text");
  console.log(singleElement.innerText); // "Text 1"
  let allElements = document.querySelectorAll("#container .text");
  console.log(allElements[1].innerText); // "Text 2"</script>

تعديل العناصر:

1. تعديل النص الداخلي (`innerText`):


<div id="myDiv">Old Text</div>
<script>  let div = document.getElementById("myDiv");
  div.innerText = "New Text";</script>

2. تعديل HTML الداخلي (`innerHTML`):


<div id="myDiv"><span>Old Content</span></div>
<script>  let div = document.getElementById("myDiv");
  div.innerHTML = "<b>New Content</b>";</script>

3. تعديل الخصائص (Attributes):


<img id="myImage" src="old.jpg" alt="Old Image">
<script>  let img = document.getElementById("myImage");
  img.src = "new.jpg";
  img.alt = "New Image";</script>

4. تعديل الأنماط (Styles):


<p id="myParagraph">Styled Paragraph</p>
<script>  let paragraph = document.getElementById("myParagraph");
  paragraph.style.color = "blue";
  paragraph.style.fontSize = "20px";</script>

إضافة عناصر جديدة:

1. إنشاء وإضافة عنصر جديد:


<div id="container"></div>
<script>  let container = document.getElementById("container");
  let newElement = document.createElement("p");
  newElement.innerText = "This is a new paragraph.";
  container.appendChild(newElement);</script>

2. إدراج عنصر قبل عنصر آخر:


<div id="container">
  <p id="reference">Reference Paragraph</p>
</div>
<script>  let container = document.getElementById("container");
  let newElement = document.createElement("p");
  newElement.innerText = "New Paragraph Before Reference";
  let reference = document.getElementById("reference");
  container.insertBefore(newElement, reference);</script>

حذف العناصر:

1. إزالة عنصر باستخدام `removeChild`:


<div id="container">
  <p id="myParagraph">This will be removed.</p>
</div>
<script>  let container = document.getElementById("container");
  let paragraph = document.getElementById("myParagraph");
  container.removeChild(paragraph);</script>

2. إزالة العنصر مباشرة باستخدام `remove`:


<p id="toRemove">Remove this paragraph</p>
<script>  let paragraph = document.getElementById("toRemove");
  paragraph.remove();</script>

تطبيق عملي: إنشاء قائمة مهام ديناميكية

الكود:


<div id="todoApp">
  <input type="text" id="taskInput" placeholder="Add a task">
  <button id="addTask">Add</button>
  <ul id="taskList"></ul>
</div>
<script>  let taskInput = document.getElementById("taskInput");
  let addTaskButton = document.getElementById("addTask");
  let taskList = document.getElementById("taskList");
  addTaskButton.addEventListener("click", function () {
    let taskText = taskInput.value;
    if (taskText) {
      let listItem = document.createElement("li");
      listItem.innerText = taskText;
      taskList.appendChild(listItem);
      taskInput.value = "";
    }
  });</script>

تمارين عملية:

اكتب كود لإضافة وإزالة صور ديناميكيًا باستخدام DOM.
صمم تطبيق بسيط لتغيير ألوان خلفية الصفحة عند اختيار لون من قائمة.
أنشئ قائمة ديناميكية تظهر عناصرها عند الضغط على زر "إظهار" وتختفي عند الضغط على زر "إخفاء".

وختامًا:

تعاملنا في الدرس ده مع DOM، وشفنا إزاي ممكن نستخدم JavaScript لتعديل صفحات الويب بشكل ديناميكي. في الدرس القادم، هنركز على التعامل مع التخزين المحلي (Local Storage) لحفظ البيانات على المتصفح. استعد للتعلم! 🚀

تعديل المقال

WiseSyntax

الدرس الثالث عشر: التفاعل مع DOM في JavaScript – فهم ومعالجة عناصر الصفحة