انتقل إلى المحتوى

٧.١ مقدمة إلى DOM

window.document

سنستخدم مستند HTML التالي في هذا الجزء:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>DOM - Introduction</title>
    <meta name="description" content="Learn DOM in an easy and simple way">
    <meta name="author" content="Nawras Ali - Learn With Naw">
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

التمرين 1: اطبع window في وحدة التحكم.

console.log(window);

النتيجة هي: Window {window: Window, self: Window, document: document, name: "", location: Location, …}

التمرين 2: اطبع window.document في وحدة التحكم. قد تختلف النتيجة بحسب المستند.

console.log(window.document);

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

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>DOM - Introduction</title>
    <meta name="description" content="Learn DOM in an easy and simple way">
    <meta name="author" content="Nawras Ali - Learn With Naw">
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

التمرين 3: ما نوع window.document?

console.log(typeof window.document);

النتيجة هي: object

التمرين 4: اطبع window.document.title في وحدة التحكم.

console.log(window.document.title);

النتيجة هي: مقدمة إلى DOM

التمرين 5: اطبع window.document.head في وحدة التحكم.

console.log(window.document.head);

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

<head>
    <meta charset="utf-8">
    <title>DOM - Introduction</title>
    <meta name="description" content="Learn DOM in an easy and simple way">
    <meta name="author" content="Nawras Ali - Learn With Naw">
</head>

التمرين 6: اطبع window.document.body في وحدة التحكم.

console.log(window.document.body);

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

<body>
    <script src="script.js"></script>  
</body>

window.document

العامل window.document خاصية في window تُرجع كائن المستند الحالي، ويمكن من خلاله الوصول إلى بنية الصفحة ومحتواها.

window.document كائن.

شجرة المستند

سنستخدم مستند HTML التالي في هذا الجزء:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The official LWN Website</title>
  </head>
  <body>
    <header>
      <h1>LWN Website</h1>
      <p>learn more about linux and web development</p>
    </header>
    <section>
      <article>
        <h3>How to think like a programmer?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos asperiores, nostrum tenetur. Veniam, facilis, explicabo!</p>
      </article>
      <article>
        <h3>What is the DOM?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos asperiores, nostrum tenetur. Veniam, facilis, explicabo!</p>
      </article>
      <article>
        <h3>How to be a system administrator?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos asperiores, nostrum tenetur. Veniam, facilis, explicabo!</p>
      </article>
    </section>
    <aside>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae, distinctio modi iure culpa sapiente sint dicta fuga nostrum aperiam!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio impedit officiis, incidunt corrupti doloremque vero magni, minima minus quas laborum animi error perspiciatis quae modi, obcaecati saepe. Possimus, mollitia.</p>
    </aside>
    <footer>
      <p>All the copyright reserved</p>
    </footer>
    <script src="script.js"></script>
  </body>
</html>

التمرين 7: ما عنوان المستند السابق؟

console.log(document.title);

النتيجة هي: The official LWN Website

التمرين 8: ما قيمة head للمستند السابق؟

console.log(document.head);

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

<head>
    <meta charset="utf-8">
    <title>The official LWN Website</title>
</head>

التمرين 9: ما قيمة body للمستند السابق؟

console.log(document.body);

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

<body>
  <header>
    <h1>LWN Website</h1>
    <p>learn more about linux and web development</p>
  </header>
  <section>
    <article>
      <h3>How to think like a programmer?</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos asperiores, nostrum tenetur. Veniam, facilis, explicabo!</p>
    </article>
    <article>
      <h3>What is the DOM?</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos asperiores, nostrum tenetur. Veniam, facilis, explicabo!</p>
    </article>
    <article>
      <h3>How to be a system administrator?</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos asperiores, nostrum tenetur. Veniam, facilis, explicabo!</p>
    </article>
  </section>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae, distinctio modi iure culpa sapiente sint dicta fuga nostrum aperiam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio impedit officiis, incidunt corrupti doloremque vero magni, minima minus quas laborum animi error perspiciatis quae modi, obcaecati saepe. Possimus, mollitia.</p>
  </aside>
  <footer>
    <p>All the copyright reserved</p>
  </footer>
  <script src="script.js"></script>
</body>

التمرين 10: ادرس المخطّط التالي الذي يمثّل عناصر HTML في المستند.

تمثيل صفحة ويب باستخدام DOM

شجرة HTML

مثّلنا مستند HTML بمخطّط شجري.

يُسمّى هذا التمثيل the HTML Document Object Model.

نموذج كائن المستند (DOM)

عند تحميل الصفحة، يبني المتصفح شجرة DOM للمستند.

التمرين 11: ارسم شجرة المستند لملف HTML التالي.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>Mobile Shop - High quality mobile for affordable prices</title>
  </head>
  <body>
    <header>
      <h1>Mobile Shop</h1>
      <p>Buy the most elegant mobile phones here</p>
    </header>
    <section>
      <ul>
          <li>Red phones</li>
          <li>Silver phones</li>
          <li>High memory phones</li>
          <li>High storage phones</li>
      </ul>
    </section>
  </body>
</html>

تمثيل صفحة ويب باستخدام DOM

التمرين 12: ارسم شجرة المستند لملف HTML التالي.

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <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>
  </div>
</body>

</html>

تمثيل صفحة ويب باستخدام DOM

التمرين 13: ارسم شجرة المستند لملف HTML التالي.

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <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="phone1.jpg">
          <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="phone2.jpg">
          <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="phone3.jpg">
          <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="phone4.jpg">
          <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>
</body>

</html>

تمثيل صفحة ويب باستخدام DOM

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

الحجم المفرط لشجرة DOM

تجنّب إضافة عناصر HTML غير ضرورية، فهي تزيد حجم شجرة DOM وقد تُبطئ أداء الصفحة.

التمرين 14: ارجع إلى التمرين 10؛ ما العنصر الأب لـ head ؟

الجذر html هو أب العنصر head .

نُشير إلى عناصر HTML في شجرة DOM بوصفها عُقَدًا.

التمرين 15: ارجع إلى التمرين 10؛ ما العنصر الأب لأي article ؟

العامل section هو أب لثلاثة عناصر من نوع article .

التمرين 16: ارجع إلى التمرين 10؛ ما العناصر الأبناء لـ aside ؟

العامل aside له ابنان من نوع p .

التمرين 17: ارجع إلى التمرين 10؛ ما العناصر الأشقاء لـ script ؟

العامل script له أربعة أشقاء، هي header, section, aside، و footer .

التمرين 18: ارجع إلى التمرين 10؛ ما أبناء article ؟

العامل article له ابنان: h3 و p.