٧.٤ عُقَد DOM — الجزء الثاني

سنستخدم مستند HTML التالي في هذا الدرس:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Old Phones Store</title>
</head>

<body>
  <div class="container">
    <header class="header">
      <div class="brand">
        <h1><a href="">Old Phones Store</a></h1>
        <p>The one and the only old phones store in the world</p>
      </div>
      <nav class="nav">
        <ul class="list">
          <li class="list-item">
            <a href="#" class="list-link">
              1960s Phones
            </a>
          </li>
          <li class="list-item">
            <a href="#" class="list-link">
              1970s Phones
            </a>
          </li>
          <li class="list-item">
            <a href="#" class="list-link">
              1980s Phones
            </a>
          </li>
        </ul>
        <div class="search">
            <form action="" class="search-form">
              <input type="search" class="search-input" placeholder="search">
            </form>
          </div>
      </nav>
    </header>
    <section class="main">
      <div class="heading">
        <h2>Our Products</h2>
      </div>
      <div class="items">
        <article class="item">
          <img src="https://via.placeholder.com/150">
          <div class="item-details">
            <div class="item-title">Black Phone</div>
            <div class="item-category">1970s phones<div>
            <div class="item-price">$100</div>
            <a href="#" class="btn">Buy Now</a>
          </div>
        </article>

        <article class="item">
          <img src="https://via.placeholder.com/150">
          <div class="item-details">
            <div class="item-title">Pink Phone</div>
            <div class="item-category">1980s phones</div>
            <div class="item-price">$200</div>
            <a href="#" class="btn">Buy Now</a>
          </div>
        </article>

        <article class="item">
          <img src="https://via.placeholder.com/150">
          <div class="item-details">
            <div class="item-title">red Phone</div>
            <div class="item-category">1960s phones</div>
            <div class="item-price">$400</div>
            <a href="#" class="btn">Buy Now</a>
          </div>
        </article>

        <article class="item">
          <img src="https://via.placeholder.com/150">
          <div class="item-details">
            <div class="item-title">Transparent Green Phone</div>
            <div class="item-category">1960s phones</div>
            <div class="item-price">$150</div>
            <a href="#" class="btn">Buy Now</a>
          </div>
        </article>
      </div>
    </section>
  </div>
  <script src="script.js"></script>
</body>
</html>

افتح الصورة في تبويب جديد وكبّرها لرؤية تفاصيل الشجرة.

عقدة النص

textContent

التمرين 1: اجلب a داخل header .

let aTag = document.querySelector(".header > .brand > h1 > a");

console.log(aTag);

النتيجة هي: <a href="">Old Phones Store</a>

التمرين 2: ارجع إلى التمرين 1؛ اجلب النص داخل a . تلميح: استخدم element.textContent

let aTag = document.querySelector(".header > .brand > h1 > a");

console.log(aTag.textContent);

النتيجة هي: Old Phones Store

التمرين 3: اعرض النص داخل .brand > p .

let el = document.querySelector('.header > .brand > p');
console.log(el.textContent);

النتيجة هي: The one and the only old phones store in the world

التمرين 4: غيّر النص داخل .brand > h1 > a إلى "Modern Phones Store". تلميح: استخدم el.textContent = "Modern Phones Store"

let el = document.querySelector(".header > .brand > h1 > a");

el.textContent = "Modern Phones Store";
console.log(el.textContent);

النتيجة هي: Modern Phones Store

التمرين 5: غيّر النص داخل .brand > p إلى "Just another website".

let el = document.querySelector(".header > .brand > p");

el.textContent = "Just another website";
console.log(el.textContent);

النتيجة: Just another website

el.textContent

العامل textContent تُرجع المحتوى النصي للعنصر.

يمكن تغيير النص داخل الوسم باستخدام: element.textContent = "new text here"

التمرين 6: غيّر نص آخر ul.list ابن إلى "Modern Phones".

let el = document.querySelector(".nav > .list").lastElementChild.querySelector("a");

el.textContent = "Modern Phones";

console.log(el.textContent);

النتيجة هي: Modern Phones

التمرين 7: اجلب نص ثالث .item > .item-price .

let el = document.querySelector(".main .items").children[2].querySelector(".item-details > .item-price");

console.log(el.textContent);

النتيجة هي: $400

التمرين 8: اجلب نص آخر .item > .item-title .

let el = document.querySelector(".main .items").lastElementChild.querySelector(".item-details > .item-title");

console.log(el.textContent);

النتيجة هي: Transparent Green Phone

التمرين 9: غيّر نص جميع .btn إلى Order Now.

let buttons = document.getElementsByClassName("btn");

for (button of buttons){
  button.textContent = "Order Now";
  console.log(button.textContent);
}

النتيجة كما يلي:

Order Now
Order Now
Order Now
Order Now

---

childNodes

التمرين 10: اجلب جميع العُقَد الأبناء لـ .items .

var children = document.querySelector(".main > .items").children;

for(child of children){
  console.log(child);
}

النتيجة كما يلي:

<article class="item"></article>
<article class="item"></article>
<article class="item"></article>
<article class="item"></article>

التمرين 11: اجلب جميع العُقَد الأبناء لـ .items . تلميح: استخدم element.childNodes.

var children = document.querySelector(".main > .items").childNodes;

for(child of children){
  console.log(child);
}

النتيجة كما يلي:

#text
<article class="item"></article>
#text
<article class="item"></article>
#text
<article class="item"></article>
#text
<article class="item"></article>
#text

المقارنة بين children وchildNodes

العامل el.children تُرجع العناصر الأبناء فقط، بينما el.childNodes تُرجع جميع العُقَد الأبناء، بما فيها العناصر والنصوص والتعليقات.

---

firstChild

التمرين 12: اجلب أول عنصر ابن لـ .items .

var el = document.querySelector(".main > .items").firstElementChild;

console.log(el);

النتيجة كما يلي: <article class="item">...</article>

التمرين 13: اجلب أول عنصر ابن لـ .items . تلميح: استخدم el.firstChild.

var el = document.querySelector(".main > .items").firstChild;

console.log(el);

النتيجة كما يلي: #text

المقارنة بين firstElementChild وfirstChild

العامل el.firstElementChild تُرجع أول عنصر ابن، بينما el.firstChild تُرجع أول عقدة ابن، وقد تكون عنصرًا أو نصًا أو تعليقًا.

---

lastChild

التمرين 14: اجلب آخر عنصر ابن لـ .items .

var el = document.querySelector(".main > .items").lastElementChild;

console.log(el);

النتيجة كما يلي: <article class="item">...</article>

التمرين 15: اجلب آخر عنصر ابن لـ .items . تلميح: استخدم el.lastChild.

var el = document.querySelector(".main > .items").lastChild;

console.log(el);

النتيجة كما يلي: #text

المقارنة بين lastElementChild وlastChild

العامل el.lastElementChild تُرجع آخر عنصر ابن، بينما el.lastChild تُرجع آخر عقدة ابن، وقد تكون عنصرًا أو نصًا أو تعليقًا.

---

nextSibling

التمرين 16: اجلب الشقيق التالي لـ el التالي.

var el = document.querySelector(".main > .items").childNodes[3];

console.log(el.nextElementSibling);

النتيجة كما يلي: <article class="item">...</article>

التمرين 17: اجلب الشقيق التالي لـ el التالي. تلميح: استخدم el.nextSibling.

var el = document.querySelector(".main > .items").childNodes[3];

console.log(el.nextSibling);

النتيجة كما يلي: #text

المقارنة بين nextElementSibling وnextSibling

العامل el.nextElementSibling تُرجع العنصر الشقيق التالي، بينما el.nextSibling تُرجع العقدة الشقيقة التالية، وقد تكون عنصرًا أو نصًا أو تعليقًا.

---

previousSibling

التمرين 18: اجلب الشقيق السابق لـ el التالي.

var el = document.querySelector(".main > .items").childNodes[5];

console.log(el.previousElementSibling);

النتيجة كما يلي: <article class="item">...</article>

التمرين 19: اجلب الشقيق السابق لـ el التالي. تلميح: استخدم el.previousSibling.

var el = document.querySelector(".main > .items").childNodes[3];

console.log(el.previousSibling);

النتيجة كما يلي: #text

المقارنة بين previousElementSibling وpreviousSibling

العامل el.previousElementSibling تُرجع العنصر الشقيق السابق، بينما el.previousSibling تُرجع العقدة الشقيقة السابقة، وقد تكون عنصرًا أو نصًا أو تعليقًا.

---

element.innerHTML

التمرين 20 اجلب عنصر article الثاني.

let el = document.querySelector(".main > .items").children[1];

console.log(el);

النتيجة كما يلي: <article class="item">...</article>

التمرين 21: ارجع إلى التمرين 20؛ اعرض محتوى el . تلميح: استخدم el.innerHTML.

let el = document.querySelector(".main > .items").children[1];

console.log(el.innerHTML);

النتيجة كما يلي:

<img src="https://via.placeholder.com/150">
<div class="item-details">
  <div class="item-title">Pink Phone</div>
  <div class="item-category">1980s phones</div>
  <div class="item-price">$200</div>
  <a href="#" class="btn">Buy Now</a>
</div>

التمرين 22: اعرض محتوى .nav > .list التالي.

let el = document.querySelector(".nav > .list");

console.log(el.innerHTML);

النتيجة كما يلي:

<li class="list-item">
  <a href="#" class="list-link">
    1960s Phones
  </a>
</li>
<li class="list-item">
  <a href="#" class="list-link">
    1970s Phones
  </a>
</li>
<li class="list-item">
  <a href="#" class="list-link">
    1980s Phones
  </a>
</li>

التمرين 23: اعرض محتوى .nav > .search التالي.

let el = document.querySelector(".nav > .search");

console.log(el.innerHTML);

النتيجة كما يلي:

<form action="" class="search-form">
  <input type="search" class="search-input" placeholder="search">
</form>

التمرين 24: غيّر محتوى العنصر التالي إلى <p>search here for whatever you want</p>. تلميح: استخدم el.innerHTML = "<p>search here for whatever you want</p>".

let el = document.querySelector(".nav > .search");

el.innerHTML = "<p>search here for whatever you want</p>";
console.log(el.innerHTML)

النتيجة هي: <p>search here for whatever you want</p>

التمرين 25: غيّر محتوى العنصر التالي إلى <p>search here for whatever you want</p>. تلميح: استخدم textContent.

let el = document.querySelector(".nav > .search");

el.textContent = "<p>search here for whatever you want</p>";
console.log(el.innerHTML)

النتيجة هي: <p>search here for whatever you want</p>

المقارنة بين el.innerHTML وel.textContent

العامل el.innerHTML تقرأ شيفرة HTML داخل العنصر أو تضبطها، بينما el.textContent تقرأ النص أو تضبطه دون تفسيره على أنه HTML.

التمرين 26: ما innerHTML لآخر عنصر ابن لـ .main > .items .

var el = document.querySelector(".main > .items").lastElementChild;

console.log(el.innerHTML);

النتيجة كما يلي:

<img src="https://via.placeholder.com/150">
<div class="item-details">
  <div class="item-title">Transparent Green Phone</div>
  <div class="item-category">1960s phones</div>
  <div class="item-price">$150</div>
  <a href="#" class="btn">Buy Now</a>
</div>

التمرين 27: ما innerHTML للشقيق التالي لأول عقدة ابن لـ .main > .items .

var el = document.querySelector(".main > .items").firstChild.nextSibling;

console.log(el.innerHTML);

النتيجة كما يلي:

<img src="https://via.placeholder.com/150">
<div class="item-details">
  <div class="item-title">Black Phone</div>
  <div class="item-category">1970s phones</div>
  <div class="item-price">$100</div>
  <a href="#" class="btn">Buy Now</a>
</div>

التمرين 28: غيّر innerHTML للشقيق السابق لآخر عقدة ابن لـ .main > .items على <p><strong>No more exists</strong></p>.

var el = document.querySelector(".main > .items").lastChild.previousSibling;

el.innerHTML = "<p><strong>No more exists</strong></p>";
console.log(el.innerHTML);

النتيجة هي: "<p><strong>No more exists</strong></p>"