MATIN MOLKARA
SERIES: JavaScript — PART 19 OF 108

19 -آموزش جاوااسکریپت | بررسی ویژگی‌های شیء Document

ویژگی‌های شیء document را بررسی کنیم؛ شیئی که در محیط مرورگر، نماینده‌ی سند HTML بارگذاری‌شده است و زیرمجموعه‌ای از window محسوب می‌شود.

در آموزش قبلی با DOM (Document Object Model) آشنا شدیم. حالا نوبت آن رسیده که ویژگی‌های خود شیء document را بررسی کنیم؛ شیئی که در محیط مرورگر، نماینده‌ی سند HTML بارگذاری‌شده است و زیرمجموعه‌ای از window محسوب می‌شود.

در این آموزش روی properties‌های document تمرکز می‌کنیم، نه متدهای آن. متدها را در آموزش های بعدی بررسی خواهیم کرد. برای اینکه از همان ابتدا دقیقاً بدانیم روی چه ساختاری کار می‌کنیم، ابتدا نمای HTML نمونه را می‌بینیم. در این آموزش، یک ul با کلاس collection داریم که شامل چند li با کلاس collection-item است و داخل هر آیتم نیز یک لینک قرار گرفته است:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <title>Task List</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col s12">
        <div id="main" class="card">
          <div class="card-content">
            <span class="card-title">Task List</span>
            <div class="row">
              <form id="task-form">
                <div class="input-field col s12">
                  <input type="text" name="task" id="task">
                  <label for="task">New Task</label>
                </div>
                <input type="submit" value="Add Task" class="btn">
              </form>
            </div>
          </div>
          <div class="card-action">
            <h5 id="task-title">Tasks</h5>
            <div class="input-field col s12">
              <input type="text" name="filter" id="filter">
              <label for="filter">Filter Tasks</label>
            </div>
            <ul class="collection"></ul>
            <a href="#" class="clear-tasks btn black">Clear Tasks</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

ویژگی‌های مهم شیء document

1) دسترسی به کل سند HTML

document.all

این ویژگی یک HTMLCollection از تمام عناصر موجود در سند HTML برمی‌گرداند.

نکات مهم:

  • شبیه آرایه است، اما آرایه نیست
  • length دارد
  • می‌توان با ایندکس به عناصر آن دسترسی داشت
  • متدهایی مثل forEach روی آن کار نمی‌کنند

مثال:

console.log(document.all[0]);
console.log(document.all.length);

2) دسترسی به بخش‌های اصلی سند

document.head
document.body
  • document.head به تگ <head> دسترسی می‌دهد
  • document.body به تگ <body> دسترسی می‌دهد

3) اطلاعات سند و URL

document.doctype
document.domain
document.URL
document.characterSet
document.contentType

این ویژگی‌ها اطلاعاتی درباره‌ی سند فعلی و محیط بارگذاری صفحه می‌دهند.

  • document.doctype → نوع سند
  • document.domain → دامنه فعلی
  • document.URL → آدرس کامل صفحه
  • document.characterSet → مجموعه کاراکترها
  • document.contentType → نوع محتوا

4) دسترسی به عناصر خاص بدون Selector

این روش‌ها برای آشنایی مفیدند، اما در عمل معمولاً از Selectorها استفاده می‌شود.

فرم‌ها

document.forms

یک HTMLCollection از همه‌ی فرم‌های صفحه برمی‌گرداند.

console.log(document.forms[0]);
console.log(document.forms[0].id);
console.log(document.forms[0].method);
console.log(document.forms[0].action);

لینک‌ها

document.links

تمام تگ‌های <a> را برمی‌گرداند.

console.log(document.links[0]);
console.log(document.links[0].id);
console.log(document.links[0].className);
console.log(document.links[0].classList);
  • className → رشته‌ای از کلاس‌ها
  • classList → شیئی برای مدیریت کلاس‌ها

تصاویر

document.images

تمام <img>‌های موجود در صفحه را برمی‌گرداند.

اسکریپت‌ها

document.scripts

تمام تگ‌های <script> را برمی‌گرداند.

console.log(document.scripts[0].getAttribute('src'));

تفاوت HTMLCollection با آرایه

HTMLCollection مانند آرایه قابل پیمایش و دارای length است، اما متدهای آرایه را ندارد.

مثلاً این کد خطا می‌دهد:

document.scripts.forEach(script => {
  console.log(script);
});

راه‌حل: تبدیل به آرایه

let scripts = document.scripts;
let scriptsArray = Array.from(scripts);

scriptsArray.forEach(script => {
  console.log(script.src);
});

جمع‌بندی

در این آموزش با مهم‌ترین ویژگی‌های شیء document آشنا شدیم و یاد گرفتیم چگونه به بخش‌های مختلف سند HTML دسترسی پیدا کنیم:

  • document.all
  • document.head
  • document.body
  • document.forms
  • document.links
  • document.images
  • document.scripts

همچنین تفاوت HTMLCollection با آرایه را بررسی کردیم و دیدیم که برای استفاده از متدهایی مثل forEach باید آن را به آرایه تبدیل کنیم.

در آموزش بعدی، سراغ Selectors در DOM می‌رویم تا روش‌های استانداردتر و کاربردی‌تر برای انتخاب عناصر را یاد بگیریم.

// 0 comments
#جاوااسکریپت#آموزش جاوااسکریپت#DOM#Document Object Model#شیء Document#ویژگی‌های document#HTMLCollection#NodeList#Vanilla JavaScript#DOM Traversal#علم مرورگر#app.js

نظرات (0)

نظر خود را بنویسید