مقدمه. مدل شی dom دستکاری DOM جاوا اسکریپت خالص

در این درس، به این خواهیم پرداخت که DOM چیست، چرا به آن نیاز است و چگونه ساخته شده است.

DOM چیست؟

مرورگر هنگام درخواست صفحه و دریافت کد HTML منبع آن در پاسخ از سرور، ابتدا باید آن را تجزیه کند. در فرآیند تجزیه و تجزیه کد HTML، مرورگر یک درخت DOM را بر اساس آن می‌سازد.

پس از انجام این عمل و تعدادی عمل دیگر، مرورگر اقدام به رندر صفحه می کند. در این فرآیند، البته، او در حال حاضر از درخت DOM که ساخته است استفاده می کند، نه از HTML اصلی.

DOM مدل شی سندی است که مرورگر بر اساس کد HTML که از سرور دریافت می کند در حافظه کامپیوتر ایجاد می کند.

به بیان ساده، کد HTML متن یک صفحه است و DOM مجموعه ای از اشیاء مرتبط است که توسط مرورگر هنگام تجزیه متن آن ایجاد می شود.

در کروم، کد منبع صفحه ای که مرورگر دریافت می کند را می توان در تب "منبع" در پانل "ابزارهای توسعه دهنده وب" مشاهده کرد.

در کروم، هیچ ابزاری وجود ندارد که بتوان از آن برای مشاهده درخت DOM که ایجاد کرده است استفاده کرد. اما نمایشی از این درخت DOM در قالب کد HTML وجود دارد که در تب "Elements" موجود است. البته این نمایش DOM برای یک توسعه دهنده وب بسیار راحت تر است تا با آن کار کند. بنابراین، هیچ ابزاری وجود ندارد که DOM را به شکل یک ساختار درختی نشان دهد.

اشیاء در این مدل تقریباً از هر چیزی که در HTML وجود دارد (برچسب ها، محتوای متن، نظرات و غیره) از جمله خود سند تشکیل می شوند. روابط بین این اشیاء در مدل بر اساس چگونگی شکل می گیرد عناصر HTML نسبت به یکدیگر در کد قرار دارند.

در این حالت، DOM سند پس از تشکیل آن قابل تغییر است. هنگامی که DOM تغییر می کند، مرورگر تقریباً بلافاصله تصویر صفحه را دوباره ترسیم می کند. در نتیجه داریم رندر صفحه همیشه با DOM مطابقت دارد.

برای خواندن و تغییر برنامه DOM، مرورگر یک DOM API یا به عبارت دیگر یک رابط برنامه نویسی در اختیار ما قرار می دهد. به روشی ساده، DOM API مجموعه ای از تعداد زیادی از اشیاء مختلف، ویژگی ها و روش های آنها است که می توانیم از آنها استفاده کنیم. خواندن و اصلاح DOM.

برای کار با DOM در بیشتر موارد، جاوا اسکریپت استفاده می شود، زیرا. تا به امروز، این تنها زبان برنامه نویسی است که اسکریپت ها را می توان در مرورگر اجرا کرد.

چرا به DOM API نیاز داریم؟ما به آن نیاز داریم تا بتوانیم جاوا اسکریپتتغییر صفحه در پرواز، یعنی. آن را پویا و تعاملی کنید.

DOM API تعداد زیادی روش را در اختیار ما (توسعه دهندگان) قرار می دهد که با آن می توانیم همه چیز را در صفحه تغییر دهیم و همچنین با کاربر تعامل داشته باشیم. آن ها این رابط برنامه نویسی به ما اجازه می دهد تا رابط های پیچیده، فرم ها، پردازش اقدامات کاربر، افزودن و حذف عناصر مختلف در صفحه، تغییر محتوا، ویژگی ها (ویژگی ها) و بسیاری موارد دیگر را ایجاد کنیم.

در حال حاضر در وب عملا هیچ سایتی وجود ندارد که در اسکریپت های آن هیچ کار با DOM وجود نداشته باشد.

کد HTML برای یک صفحه چیست؟

قبل از شروع مطالعه مدل شی سند، ابتدا باید به یاد داشته باشید که کد منبع یک صفحه وب (سند HTML) چیست.

کد منبع یک صفحه وب شامل برچسب ها، ویژگی ها، نظرات و متن است. برچسب ها سینتکس اولیه HTML هستند. بیشتر آنها جفت هستند. در این صورت یکی از آنها افتتاحیه و دیگری بسته کننده است. یکی از این جفت‌ها یک عنصر HTML را تشکیل می‌دهد. عناصر HTML می توانند داشته باشند گزینه های اضافی- ویژگی های.

در یک سند برای ایجاد یک نشانه گذاری خاص، برخی از عناصر در برخی دیگر قرار دارند. در نتیجه، یک سند HTML را می توان به عنوان مجموعه ای از عناصر HTML تو در تو در نظر گرفت.

به عنوان مثال، کد HTML زیر را در نظر بگیرید:

عنوان صفحه

عنوان مقاله

بخش مقاله

محتوای مقاله

در این کد عنصر ریشه html است. عناصر سر و بدن درون آن تودرتو شده اند. عنصر head شامل عنوان است، در حالی که عنصر بدن حاوی h1 و div است. عنصر div به نوبه خود حاوی h2 و p است.

حال بیایید ببینیم مرورگر چگونه یک درخت DOM را بر اساس کد HTML می سازد.

درخت DOM سند چگونه ساخته می شود؟

همانطور که قبلا در بالا توضیح داده شد، مرورگر یک درخت بر اساس عناصر HTML و سایر موجودیت ها می سازد. کد منبعصفحات هنگام انجام این فرآیند، تودرتو بودن عناصر در یکدیگر را در نظر می گیرد.

در نتیجه، مرورگر از درخت DOM حاصل نه تنها در کار خود استفاده می کند، بلکه یک API برای ما نیز ارائه می کند. عملیات راحتبا آن از طریق جاوا اسکریپت.

هنگام ساختن DOM، مرورگر اشیاء (گره های درخت DOM) را از عناصر HTML، متن، نظرات و سایر موجودات این زبان ایجاد می کند.

در بیشتر موارد، توسعه دهندگان وب فقط به اشیاء (گره ها) تشکیل شده از عناصر HTML علاقه مند هستند.

در عین حال، مرورگر فقط اشیاء را از عناصر HTML ایجاد نمی کند، بلکه آنها را با اتصالات خاصی به یکدیگر متصل می کند، بسته به اینکه هر یک از آنها چگونه با دیگری در کد ارتباط دارند.

عناصری که مستقیماً در یک عنصر قرار دارند فرزندان آن هستند. و او برای هر یک از آنها پدر و مادر است. به علاوه همه این عناصر نسبت به یکدیگر خواهر و برادر (برادر) هستند.

علاوه بر این، در HTML، هر عنصر همیشه یک والد دارد (عنصر HTML که مستقیماً در آن قرار دارد). در HTML، یک عنصر نمی تواند چندین والدین داشته باشد. تنها استثنا عنصر html است. او پدر و مادر ندارد.

برای به دست آوردن درخت DOM همانطور که مرورگر آن را می سازد، فقط باید همه عناصر را بسته به رابطه آنها با یکدیگر "ترتیب" کنید.

ایجاد درخت DOM از بالا به پایین انجام می شود.

ریشه درخت DOM همیشه خود سند (گره سند) است. علاوه بر این، درخت بسته به ساختار کد HTML ساخته می شود.

به عنوان مثال، کد HTML که در بالا نگاه کردیم دارای درخت DOM زیر است:

در بالای این درخت گره سند قرار دارد. این گره با html مرتبط است، فرزند آن است. گره html تشکیل می شود عنصر html (...). گره های سر ( ...) و بدن ( ...

) به html تبدیل شده اند. در رابطه با یکدیگر، آنها خواهر و برادر هستند، زیرا یک پدر و مادر داشته باشد گره سر با عنوان مرتبط است (lt;title>...او فرزند اوست. گره‌های h1 و div به بدنه مربوط می‌شوند، برای آنها والد است. گره div به h2 (

...

) و p()، فرزندان آن هستند.

درخت، همانطور که در بالا ذکر شد، از سند شی (گره) شروع می شود. به نوبه خود دارای یک گره فرزند است که توسط عنصر html ( ...). عناصر سر ( ...) و بدن ( ...

) در html هستند و بنابراین فرزندان آن هستند. بعد، گره سر، والد عنوان است (lt;title>...). عناصر h1 و div درون بدن قرار دارند، به این معنی که آنها فرزندان آن هستند. div مستقیماً حاوی عناصر h2 (

...

) و p(). این بدان معنی است که گره div برای هر یک از آنها والد است.

به این صورت است که درخت DOM به سادگی در مرورگر بر اساس کد HTML ساخته می شود.

چرا باید بدانید که درخت DOM چگونه ساخته می شود؟اول، درک محیطی است که می خواهید چیزی را در آن تغییر دهید. ثانیاً، بیشتر اقدامات هنگام کار با DOM به یافتن (انتخاب) عناصر ضروری می رسد. بدون دانستن نحوه چیدمان درخت DOM و اتصالات بین گره ها، یافتن یک عنصر خاص در آن بسیار دشوار خواهد بود.

ورزش

بر اساس درخت DOM نشان داده شده در شکل، کد HTML را ایجاد کنید.

این نشریه قبل از یک سری مقالات در مورد راه های جایگزینبا XML کار کنید "جایگزین"، زیرا به عنوان یک قاعده، کار با XML در 1C محدود به تجزیه xml با استفاده از خواندن متوالی - تجزیه خط به خط محتوای متن است. و راه های دیگری نیز وجود دارد.

به عنوان مثال، استفاده از زبان پرس و جو XML xPathیا قالب های تبدیل XSL. این گزینه ها در مقالات آینده مورد بحث قرار خواهند گرفت. اما همه آنها به یک نمایش اولیه اسناد XML در فرم متکی هستند DOM. در مورد اینکه DOM (مدل شیء سند یا مدل شیء سند) چیست و در نشریه مورد بحث قرار خواهد گرفت.

DOM بر اساس نمایش یک سند از هر ساختار به شکل درختی از گره ها است که هر گره (گره) یک عنصر، یک ویژگی یک عنصر، یک مقدار متنی یک عنصر و غیره است. گره ها بر اساس اصل "والد - زیردستان" ساخته شده اند. ریشه سند (درخت DOM) والد ندارد. یک عنصر خرد هیچ عنصر فرعی ندارد (این عناصر به طور انتزاعی برگ درخت نامیده می شوند). بنابراین، مدل DOM را می توان نه تنها برای XML، بلکه در واقع برای هر سند ساختاری (HTML، XHTML) ایجاد کرد.بنابراین، به عنوان مثال، مرورگر کاربر، با دریافت کد HTML یک صفحه وب از اینترنت، یک درخت DOM از این صفحه در RAM رایانه کاربر ایجاد می کند.

DOM باز می شود فرصت های گستردهدستکاری داده های سند می‌توانید گره‌های جدیدی ایجاد کنید، آن‌ها را در سطوح مختلف درخت قرار دهید، گره‌ها را کپی کنید، گره‌ها را حذف کنید، گره‌ها را با پارامترهای مختلف جستجو کنید و خیلی چیزهای دیگر.

مدل DOM سند XMLبه وضوح در شکل زیر نشان داده شده است.

هر زبان برنامه نویسی مدرن ابزارهایی (تجزیه کننده) برای کار با چنین درختی دارد. تجزیه کننده XML با دریافت محتوای رشته به عنوان ورودی، درختی از گره ها را در RAM می سازد و با داده های درخت دستکاری می کند. مزیت این رویکرد نسبت به تجزیه خط به خط آشکار است: با یک پرس و جو به درخت، می توانید داده های لازم را بدون مرور خط به خط کل سند انتخاب کنید، زیرا RAM حاوی یک نمایش کامل از عناصر با همه است. ارتباطات متقابل

در پلت فرم 1C، مدل DOM توسط یک شی خاص نشان داده می شود DocumentDOM، که به نوبه خود با استفاده از شی ساخته می شود BuilderDOMو روش او خواندن. ورودی این روش، به عنوان یک قاعده، یا یک شی است خواندن XML، یا خواندن HTML، که مستقیماً از فایل ها خوانده می شود یا از رشته ای از محتوای متنی XML یا HTML بارگیری می شود. خب، پس تعدادی ساختار وجود دارد که به شما امکان می دهد داده ها را از مدل شی سند خوانده شده استخراج کنید.

از بین همه گزینه ها، از نظر من جالب ترین گزینه شماره 1 با استفاده از روش است ExpressionXPath را ارزیابی کنید. مقاله بعدی به آن اختصاص داده خواهد شد.

مزایای تجزیه خط به خط: نیاز به منابع کمتر است. معایب: زمان طولانی برای دریافت اطلاعات مورد نیاز برای خواندن کل فایل خط به خط، پیچیدگی کد برنامههنگام تجزیه اسناد XML با ساختار پیچیده.

مزیت نمونه برداری از طریق DOM: سرعت نمونه برداری داده ها، سادگی کد برنامه. معایب: تقاضا برای منابع، ساخت و پرس و جو از DOM صرف می شود رمو قدرت پردازش

DOM اغلب به عنوان درخت DOM شناخته می شود زیرا از درختی از اشیاء به نام گره تشکیل شده است. در اینجا یاد گرفتید که Document Object Model (DOM) چیست، چگونه به شی سند دسترسی داشته باشید و ویژگی های آن را با استفاده از کنسول تغییر دهید، و همچنین تفاوت بین کد منبع HTML و DOM را یاد گرفتیم.

در این آموزش، اصطلاحات HTML مورد نیاز برای کار با جاوا اسکریپت و DOM، یادگیری در مورد گره های درختی و DOM و شناسایی رایج ترین انواع گره ها را خواهید یافت. همچنین می توانید یک برنامه جاوا اسکریپت در کنسول ایجاد کنید تا به صورت تعاملی DOM را تغییر دهید.

اصطلاحات HTML

درک شرایط HTML و جاوا اسکریپت برای کار با DOM بسیار مهم است. بیایید نگاهی گذرا به اصطلاحات اصلی بیندازیم.

به این عنصر HTML نگاه کنید:

صفحه اصلی

دارای یک لنگر است که پیوندی به index.html است.

a - برچسب
href - ویژگی
html - مقدار ویژگی
صفحه اصلی - متن.

همه چیز بین تگ های باز و بسته شدن یک عنصر HTML است.

بیایید به فایل index.html از آموزش قبلی برگردیم:

یادگیری DOM

مدل شیء سند

ساده ترین راه برای دسترسی به یک عنصر با جاوا اسکریپت با ویژگی id است. بیایید لینک بالا را با id="nav" به فایل index.html اضافه کنیم.

...

مدل شیء سند

صفحه اصلی

...

صفحه را در یک پنجره مرورگر بارگیری (یا تازه کردن) کنید و به DOM نگاه کنید تا مطمئن شوید کد به روز شده است.

سپس از متد getElementById() برای دسترسی به کل عنصر استفاده کنید. موارد زیر را در کنسول وارد کنید:

document.getElementById("nav");
صفحه اصلی

متد getElementById() کل عنصر را بازیابی می کند. اکنون، به جای اینکه هر بار که نیاز به دسترسی به پیوند ناو دارید، این شی و متد را تایپ کنید، می توانید عنصر را در یک متغیر قرار دهید تا کار با آن آسان تر شود.

اجازه دهید navLink = document.getElementById("nav");

متغیر navLink حاوی لنگر است. در اینجا می توانید به راحتی ویژگی ها و مقادیر را تغییر دهید. به عنوان مثال، برای تغییر مکان یک لینک، ویژگی href را تغییر دهید:

navLink.href = "https://www.wikipedia.org";

همچنین می توانید با اختصاص مجدد ویژگی textContent متن را تغییر دهید:

navLink.textContent = "پیمایش به ویکی پدیا";

حال اگر این عنصر را در کنسول مشاهده کنید یا تگ Elements را تیک بزنید، خواهید دید که چگونه به روز شده است.

ناو لینک;
به ویکی پدیا بروید

تغییرات در قسمت جلویی نیز منعکس خواهد شد.

با رفرش کردن صفحه، تمام مقادیر اصلی باز می گردند.

در این مرحله، باید بدانید که چگونه از روش سند برای دسترسی به یک عنصر استفاده کنید، چگونه یک عنصر را به یک متغیر اختصاص دهید، و چگونه خواص و مقادیر یک عنصر را تغییر دهید.

گره های درختی و DOM

همه عناصر در DOM به عنوان گره تعریف می شوند. انواع مختلفی از گره ها وجود دارد، اما سه گره اصلی وجود دارد که اغلب با آنها کار خواهید کرد:

گره عنصر
گره متن
گره نظر

هنگامی که یک عنصر HTML یک عنصر در DOM باشد، به آن گره عنصر می گویند. هر متن منفرد خارج از یک عنصر یک گره متن است و نظر HTML- یک گره نظر. به غیر از این سه نوع گره، شی سند خود گره سند است که گره ریشه تمام گره های دیگر است.

DOM از یک ساختار درختی از گره های تودرتو تشکیل شده است که اغلب به عنوان درخت DOM شناخته می شود. حتما میدونی چیه درخت شجره نامه- این یک نمایش شماتیک از پیوندهای خانوادگی است که متشکل از والدین، فرزندان و خانواده نزدیک است. گره ها در DOM بر اساس ارتباط آنها با گره های دیگر، گره های والد و فرزند نیز نامیده می شوند.

به عنوان مثال، یک فایل nodes.html ایجاد کنید. یک گره متن و همچنین گره های نظر و عنصر را به آن اضافه کنید.

یادگیری در مورد گره ها

یک گره عنصر

یک گره متن.

گره عنصر html والد است. سر و بدن گره های فرزند html هستند. بدن شامل سه گره فرزند است و همه آنها در یک سطح هستند - نوع گره بر سطح تودرتو تأثیر نمی گذارد.

توجه داشته باشیدتوجه: هنگام کار با DOM تولید شده HTML، تورفتگی منبع HTML بسیاری از گره های متن خالی ایجاد می کند که در برگه DevTools Elements قابل مشاهده نخواهند بود. اطلاعات بیشتر در مورد این در لینک.

تعریف نوع گره

هر گره در یک سند دارای یک نوع است که از طریق ویژگی nodeType قابل دسترسی است. شبکه توسعه دهنده موزیلا فهرستی به روز شده از تمام ثابت های نوع گره دارد. در زیر جدولی از رایج ترین انواع گره ها آورده شده است.

در تب Elements ابزارهای توسعه‌دهنده، ممکن است متوجه شوید که هر خطی را در DOM کلیک کرده و انتخاب کنید، مقدار == $0 در کنار آن ظاهر می‌شود. این خیلی راه راحتبه عنصر فعال فعلی دسترسی داشته باشید.

در کنسول node.html روی اولین عنصر بدنه (h1) کلیک کنید.

با استفاده از کنسول، با استفاده از ویژگی nodeType نوع گره انتخاب شده را پیدا کنید.

$0.nodeType;
1

با انتخاب عنصر h1 عدد 1 را به عنوان خروجی مشاهده خواهید کرد که به ELEMENT_NODE اشاره دارد. همین کار را با گره های دیگر انجام دهید و آنها به ترتیب 3 و 8 را برمی گردانند.

با دانستن نحوه دسترسی به یک عنصر، می توانید نوع گره را بدون برجسته کردن عناصر در DOM مشاهده کنید.

document.body.nodeType;
1

علاوه بر nodeType، می‌توانید از ویژگی nodeValue برای دریافت مقدار متن یا گره نظر و از nodeName برای دریافت تگ عنصر استفاده کنید.

تغییر DOM با رویدادها

تاکنون نحوه تغییر DOM در کنسول را دیده اید و چنین تغییراتی موقتی هستند. هر بار که صفحه به روز می شود، همه تغییرات از بین می روند. در شما رنگ پس زمینه صفحه را در کنسول به روز کردید. سعی کنید آنچه را که در این آموزش آموخته اید با چیزهایی که قبلاً می دانید ترکیب کنید تا یک دکمه تعاملی ایجاد کنید که رنگ پس زمینه را تغییر می دهد.

به فایل index.html برگردید و یک عنصر دکمه با یک شناسه اضافه کنید. همچنین باید پیوندی به آن اضافه کنید فایل جدیدبه دایرکتوری جدید js js/scripts.js.

یادگیری DOM

مدل شیء سند

رویداد در جاوا اسکریپت عملی است که کاربر انجام می دهد. کاربر روی یک عنصر می‌چرخد، روی آن کلیک می‌کند یا کلید خاصی را روی صفحه کلید فشار می‌دهد - اینها همه رویدادها هستند. در این مورد خاص، زمانی که کاربر روی آن کلیک می‌کند، دکمه باید عملی را انجام دهد. برای انجام این کار، باید شنونده رویداد اضافه کنید. یک فایل scripts.js ایجاد کنید و آن را در یک پوشه جدید js ذخیره کنید. شما باید یک عنصر دکمه را در فایل تعریف کنید و آن را به یک متغیر اختصاص دهید.

با استفاده از متد ()adEventListener، دکمه به کلیک ها گوش می دهد و پس از کلیک عملکرد خود را اجرا می کند.

...
button.addEventListener("کلیک کنید"، () => (
// عمل به اینجا خواهد رفت
});

برای تغییر رنگ پس‌زمینه به فوشیا، باید کد دفترچه راهنمای قبلی را در داخل تابع قرار دهید.

...

این چیزی است که اسکریپت به نظر می رسد:

let button = document.getElementById("changeBackground");
button.addEventListener("کلیک کنید"، () => (
document.body.style.backgroundColor = "فوشیا";
});

ذخیره کنید و فایل را ببندید. صفحه index.html را در مرورگر بازخوانی کنید. مطبوعات دکمه جدیدو رنگ پس زمینه صفحه تغییر خواهد کرد.

برچسب ها: ,

به طور معمول، توسعه دهندگان زمانی که نیاز به انجام کاری با DOM دارند از jQuery استفاده می کنند. با این حال، تقریباً هر دستکاری DOM را می توان در جاوا اسکریپت خالص با استفاده از DOM API آن انجام داد.

بیایید این API را با جزئیات بیشتری بررسی کنیم:

در پایان، کتابخانه DOM ساده خود را می نویسید که می تواند در هر پروژه ای استفاده شود.

پرس و جوهای DOM

پرس و جوهای DOM با استفاده از متد .querySelector () ساخته می شوند که یک انتخابگر CSS دلخواه را به عنوان آرگومان می گیرد.

Const myElement = document.querySelector ("#foo > div.bar")

اولین عنصر منطبق را برمی گرداند. می توانید برعکس این کار را انجام دهید - بررسی کنید که آیا یک عنصر با انتخابگر مطابقت دارد یا خیر:

MyElement.matches("div.bar") === درست است

اگر می‌خواهید تمام عناصری که با یک انتخابگر مطابقت دارند را بدست آورید، از ساختار زیر استفاده کنید:

Const myElements = document.querySelectorAll(.bar")

اگر می‌دانید به کدام عنصر والد مراجعه کنید، می‌توانید به‌جای جستجوی کل کد، به سادگی در میان فرزندان آن جستجو کنید:

Const myChildElemet = myElement.querySelector("ورودی") // به جای: // document.querySelector("#foo > ورودی div.bar")

این سوال پیش می‌آید: پس چرا از روش‌های کمتر راحت‌تر مانند.getElementsByTagName() استفاده می‌کنیم؟ یک مشکل کوچک وجود دارد - نتیجه ()output.querySelector به روز نمی شود و وقتی اضافه می کنیم عنصر جدید(نگاه کنید به)، تغییر نخواهد کرد.

const element1 = document.querySelectorAll("div") const element2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) element1.length === element2.length // نادرست

همچنین querySelectorAll() همه چیز را در یک لیست جمع آوری می کند که باعث می شود کارایی زیادی نداشته باشد.

چگونه با لیست ها کار کنیم؟

علاوه بر این، .querySelectorAll() دو ویژگی کوچک دارد. شما نمی توانید فقط متدها را روی نتایج فراخوانی کنید و انتظار داشته باشید که برای هر یک از آنها اعمال شود (همانطور که ممکن است با jQuery عادت داشته باشید). در هر صورت، باید روی تمام عناصر موجود در حلقه تکرار کنید. دوم، شیء برگشتی فهرستی از عناصر است، نه یک آرایه. بنابراین، روش های آرایه کار نمی کنند. البته، متدهایی برای لیست ها وجود دارد، چیزی مانند () .forEach، اما، افسوس، آنها برای همه موارد مناسب نیستند. بنابراین بهتر است لیست را به یک آرایه تبدیل کنید:

// استفاده از Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // یا نمونه اولیه آرایه (قبل از ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Easier.forE. (myElements، doSomethingWithEachElement)

هر عنصر دارای ویژگی هایی است که به یک "خانواده" اشاره دارد.

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

از آنجایی که رابط Element از رابط Node به ارث رسیده است، ویژگی های زیر نیز وجود دارد:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

ویژگی های اول به عنصر اشاره دارد، در حالی که دومی (به استثنای .parentElement) می تواند فهرستی از عناصر از هر نوع باشد. بر این اساس، می توانید نوع عنصر را بررسی کنید:

MyElement.firstChild.nodeType === 3 // این عنصر یک گره متن خواهد بود

اضافه کردن کلاس ها و ویژگی ها

اضافه کردن کلاس جدیدبسیار ساده:

myElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

افزودن یک ویژگی به یک عنصر دقیقاً مانند افزودن یک ویژگی به هر شی است:

// مقدار مشخصه را دریافت کنید const value = myElement.value // ویژگی را به عنوان ویژگی عنصر myElement.value = "(!LANG:foo) تنظیم کنید" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

می توانید از متدهای .getAttibute، .setAttribute() و .removeAttribute() استفاده کنید. آن‌ها فوراً ویژگی‌های HTML عنصر را تغییر می‌دهند (برخلاف ویژگی‌های DOM)، که باعث بازپرداخت مرورگر می‌شود (شما می‌توانید هر گونه تغییر را با بررسی عنصر با استفاده از ابزارهای توسعه‌دهنده در مرورگر مشاهده کنید). چنین ترسیم مجدد نه تنها به منابع بیشتری نسبت به تنظیم ویژگی های DOM نیاز دارد، بلکه می تواند منجر به خطاهای غیرمنتظره شود.

آنها معمولاً روی عناصری استفاده می‌شوند که دارای ویژگی‌های DOM متناظر نیستند، مانند colspan. یا اگر استفاده از آنها واقعاً ضروری است، به عنوان مثال برای ویژگی های HTML هنگام ارث بردن (نگاه کنید به).

اضافه کردن سبک های CSS

آنها مانند سایر ویژگی ها اضافه می شوند:

MyElement.style.marginLeft = "2em"

برخی از ویژگی های خاص را می توان با استفاده از .style تنظیم کرد، اما اگر می خواهید پس از انجام محاسبات مقادیری دریافت کنید، بهتر است از window.getComputedStyle() استفاده کنید. این متد عنصر را می گیرد و یک CSSStyleDeclaration حاوی استایل های خود عنصر و والد آن را برمی گرداند:

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

تغییر DOM

می توانید عناصر را جابجا کنید:

// افزودن عنصر1 به عنوان آخرین فرزند عنصر2 element1.appendChild(element2) // درج عنصر2 به عنوان فرزند عنصر1 قبل از element3 element1.insertBefore(element2, element3)

اگر نمی‌خواهید جابه‌جا شوید، اما نیاز به چسباندن یک کپی دارید، از:

// ایجاد یک کلون const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

متد ()cloneNode یک مقدار بولی را به عنوان آرگومان می گیرد و اگر درست باشد، عناصر فرزند نیز کلون می شوند.

البته، شما می توانید عناصر جدید ایجاد کنید:

const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("متن")

و سپس آنها را مطابق شکل بالا وارد کنید. شما نمی توانید یک عنصر را مستقیماً حذف کنید، اما می توانید آن را از طریق عنصر والد انجام دهید:

MyParentElement.removeChild(myElement)

همچنین می توانید به صورت غیر مستقیم مراجعه کنید:

MyElement.parentNode.removeChild(myElement)

روش های روی عناصر

هر عنصر دارای ویژگی هایی مانند .innerHTML و .textContent است، آنها حاوی کد HTML و بر این اساس، خود متن هستند. مثال زیر محتوای یک عنصر را تغییر می دهد:

// HTML myElement.innerHTML = ` را تغییر دهید

محتوای جدید

بوق بوپ بیپ بوپ

` // این محتوا را حذف می کند myElement.innerHTML = null // افزودن به HTML myElement.innerHTML += ` ادامه خواندن...

در واقع، تغییر HTML ایده بدی است، زیرا تمام تغییراتی که قبلا ایجاد شده بود را از دست می دهد و همچنین کنترل کننده های رویداد را بیش از حد بارگذاری می کند. بهتر است از این روش فقط با حذف کامل تمام HTML و جایگزینی آن با یک کپی از سرور استفاده کنید. مثل این:

const link = document.createElement("a") const text = document.createTextNode("ادامه به خواندن...") const hr = document.createElement("hr") link.href = "foo.html" link.appendChild( متن) myElement.appendChild(پیوند) myElement.appendChild(hr)

با این حال، این منجر به دو بار ترسیم مجدد مرورگر می شود، در حالی که .innerHTML فقط به یک مورد منجر می شود. اگر ابتدا همه چیز را به DocumentFragment اضافه کنید و سپس قطعه مورد نیاز خود را اضافه کنید، می توانید این کار را حل کنید:

Const fragment = document.createDocumentFragment() fragment.appendChild(text) fragment.appendChild(hr) myElement.appendChild(fragment)

گردانندگان رویداد

یکی از ساده ترین کنترل کننده ها:

MyElement.onclick = تابع onclick (رویداد) (console.log(event.type + "Got Fired"))

اما به عنوان یک قاعده کلی، باید از آن اجتناب کرد. در اینجا، onclick. یک ویژگی عنصر است، و در تئوری می‌توانید آن را تغییر دهید، اما نمی‌توانید با استفاده از تابع دیگری که به تابع قدیمی اشاره می‌کند، کنترل‌کننده‌های دیگری را اضافه کنید.

برای اضافه کردن کنترلرها بهتر است از .addEventListener() استفاده کنید. سه آرگومان نیاز دارد: یک نوع رویداد، یک تابع که هر زمان که فعال شود فراخوانی می شود، و یک شی پیکربندی (در ادامه به آن خواهیم پرداخت).

MyElement.addEventListener("click"، تابع (رویداد) (consol.log(event.type + "Got fireed"))) myElement.addEventListener("کلیک"، تابع (رویداد) (consol.log(event.type + " دوباره اخراج شدم")))

ویژگی event.target به عنصری اشاره دارد که رویداد به آن متصل شده است.

و بنابراین شما می توانید به تمام ویژگی ها دسترسی داشته باشید:

// ویژگی `forms` آرایه ای است که حاوی پیوندهایی به همه فرم ها است. تغییر "، تابع (رویداد) (consol.log(event.target.value) )) ))

جلوگیری از اقدامات پیش فرض

برای این کار از متد .preventDefault() استفاده می شود که اقدامات استاندارد را مسدود می کند. به عنوان مثال، اگر مجوز سمت مشتری موفقیت آمیز نباشد، ارسال فرم را مسدود می کند:

MyForm.addEventListener("submit"، تابع (رویداد) (const name = this.querySelector("#name") if (name.value === "(!LANG:Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

متد .stopPropagation() به شما کمک می کند اگر یک کنترل کننده رویداد خاص به فرزند و یک کنترل کننده دوم برای همان رویداد متصل به والد داشته باشید.

همانطور که قبلا ذکر شد، متد ()addEventListener آرگومان سوم اختیاری را به عنوان یک شی پیکربندی می گیرد. این شی باید دارای یکی از ویژگی های بولی زیر باشد (همه به طور پیش فرض روی false تنظیم شده اند):

ضبط: رویداد قبل از هر عنصر دیگری در DOM به این عنصر متصل می شود.
Once: یک رویداد را فقط یک بار می توان پین کرد.
passive: event.preventDefault() نادیده گرفته می شود (استثنا در هنگام خطا).

متداول ترین ویژگی .capture است و آنقدر رایج است که یک مختصر برای آن وجود دارد: به جای ارسال آن در یک شیء پیکربندی، فقط مقدار آن را در اینجا مشخص کنید:

MyElement.addEventListener (نوع، شنونده، درست)

هندلرها با استفاده از متد .removeEventListener حذف می شوند، که دو آرگومان دارد: نوع رویداد و ارجاع به کنترل کننده برای حذف. به عنوان مثال، ویژگی Once را می توان به صورت زیر پیاده سازی کرد:

MyElement.addEventListener("تغییر"، تابع شنونده (رویداد) (consol.log(event.type + "روی " + این فعال شد) this.removeEventListener("تغییر"، شنونده)))

وراثت

فرض کنید یک عنصر دارید و می‌خواهید یک کنترل کننده رویداد برای همه عناصر فرزند آن اضافه کنید. سپس باید آنها را با استفاده از روش myForm.querySelectorAll("input") همانطور که در بالا نشان داده شده است حلقه بزنید. با این حال، می‌توانید به سادگی عناصری را به فرم اضافه کنید و محتوای آنها را با event.target بررسی کنید.

MyForm.addEventListener("تغییر"، تابع (رویداد) (const target = event.target if (target.matches("input")) (consol.log(target.value) ))

و یک مزیت دیگر این روش این است که کنترل کننده به طور خودکار به عناصر فرزند جدید متصل می شود.

انیمیشن

ساده ترین راه برای افزودن انیمیشن استفاده از CSS با ویژگی انتقال است. اما برای انعطاف بیشتر (به عنوان مثال، برای یک بازی)، جاوا اسکریپت مناسب تر است.

فراخوانی متد window.setTimeout() تا زمانی که انیمیشن تمام شود ایده خوبی نیست، زیرا ممکن است برنامه شما به خصوص در دستگاه های تلفن همراه مسدود شود. بهتر است از window.requestAnimationFrame() برای ذخیره تمام تغییرات تا ترسیم مجدد بعدی استفاده کنید. تابعی را به عنوان آرگومان می گیرد که به نوبه خود یک مهر زمانی دریافت می کند:

const start = window.performance.now() const duration = 2000 window.requestAnimationFrame(function fadeIn (اکنون)) ( const progress = now - start myElement.style.opacity = پیشرفت / مدت اگر (پیشرفت< duration) { window.requestAnimationFrame(fadeIn) } }

به این ترتیب انیمیشن بسیار روان به دست می آید. مارک براون در مقاله خود به این موضوع پرداخته است.

نوشتن کتابخانه خودمان

این واقعیت که در DOM باید همیشه روی عناصر تکرار کنید تا کاری با آنها انجام دهید، در مقایسه با نحو jQuery $(.foo").css((color: "red")) بسیار خسته کننده به نظر می رسد. اما چرا برخی از روش های خود را برای آسان تر کردن این کار نمی نویسید؟

Const $ = تابع $(انتخاب کننده، متن = سند) ( عناصر const = Array.from(context.querySelectorAll(انتخاب کننده)) برمی گرداند ( عناصر، html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) این را برگرداند ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) این را برگرداند, در (رویداد، کنترل کننده، گزینه ها) ( this.elements .forEach(element => ( element.addEventListener(رویداد، کنترل‌کننده، گزینه‌ها))) این را برگردانید)))

در این درس، به این خواهیم پرداخت که DOM چیست، چرا به آن نیاز است و چگونه ساخته شده است.

DOM چیست؟

DOM مدل شی سندی است که مرورگر بر اساس کد HTML که از سرور دریافت می کند در حافظه کامپیوتر ایجاد می کند.

چرا به DOM API نیاز داریم؟ما به آن نیاز داریم تا بتوانیم از جاوا اسکریپت برای تغییر صفحه در لحظه استفاده کنیم، یعنی. آن را پویا و تعاملی کنید.

در حال حاضر در وب عملا هیچ سایتی وجود ندارد که در اسکریپت های آن هیچ کار با DOM وجود نداشته باشد.

کد HTML برای یک صفحه چیست؟

قبل از شروع مطالعه مدل شی سند، ابتدا باید به یاد داشته باشید که کد منبع یک صفحه وب (سند HTML) چیست.

کد منبع یک صفحه وب شامل برچسب ها، ویژگی ها، نظرات و متن است. برچسب ها سینتکس اولیه HTML هستند. بیشتر آنها جفت هستند. در این صورت یکی از آنها افتتاحیه و دیگری بسته کننده است. یکی از این جفت‌ها یک عنصر HTML را تشکیل می‌دهد. عناصر HTML می توانند پارامترهای اضافی - ویژگی ها داشته باشند.

به عنوان مثال، کد HTML زیر را در نظر بگیرید:

عنوان صفحه

عنوان مقاله

بخش مقاله

محتوای مقاله

حال بیایید ببینیم مرورگر چگونه یک درخت DOM را بر اساس کد HTML می سازد.

درخت DOM سند چگونه ساخته می شود؟

همانطور که در بالا توضیح داده شد، مرورگر یک درخت بر اساس عناصر HTML و سایر موجودات در کد منبع صفحه می سازد. هنگام انجام این فرآیند، تودرتو بودن عناصر در یکدیگر را در نظر می گیرد.

در نتیجه، مرورگر از درخت DOM حاصل نه تنها در کار خود استفاده می کند، بلکه یک API برای کار راحت با آن از طریق جاوا اسکریپت در اختیار ما قرار می دهد.

هنگام ساختن DOM، مرورگر اشیاء (گره های درخت DOM) را از عناصر HTML، متن، نظرات و سایر موجودات این زبان ایجاد می کند.

در بیشتر موارد، توسعه دهندگان وب فقط به اشیاء (گره ها) تشکیل شده از عناصر HTML علاقه مند هستند.

ایجاد درخت DOM از بالا به پایین انجام می شود.

ریشه درخت DOM همیشه خود سند (گره سند) است. علاوه بر این، درخت بسته به ساختار کد HTML ساخته می شود.

به عنوان مثال، کد HTML که در بالا نگاه کردیم دارای درخت DOM زیر است:

در بالای این درخت گره سند قرار دارد. این گره با html مرتبط است، فرزند آن است. گره html توسط عنصر html ( ...). گره های سر ( ...) و بدن ( ...

) به html تبدیل شده اند. در رابطه با یکدیگر، آنها خواهر و برادر هستند، زیرا یک پدر و مادر داشته باشد گره سر با عنوان مرتبط است (lt;title>...او فرزند اوست. گره‌های h1 و div به بدنه مربوط می‌شوند، برای آنها والد است. گره div به h2 (