این آموزش در تاریخ ۱۴۰۱/۰۵/۰۵ آپدیت شده است.
آموزش متد compareDocumentPosition در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد compareDocumentPosition در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد compareDocumentPosition در DOM جاوااسکریپت
با استفاده از متد ()compareDocumentPosition همونطور که از اسمش هم مشخصه ، میتونیم موقعیت قرارگیری ۲ گره (تگ) رو با هم مقایسه کنیم و در نهایت با توجه به عددی که در خروجی به ما نشون میده، میتونیم متوجه بشیم که موقعیت اون ۲گره به چه صورت می باشد.
این متد ۶ مقدار عددی در خروجی نمایش میده که هر یک از این مقادیر نشانگر موقعیت قرارگیری اون ۲گره ای است که با هم مقایسه شده اند.
- مقادیری که این متد به خروجی میده :
- ۱ : یعنی ۲ گره در یک صفحه قرار ندارند
- ۲ : یعنی گره اول بعد از گره دوم قرار دارد
- ۴ : یعنی گره اول قبل از گره دوم قرار دارد
- ۸ : یعنی گره اول داخل گره دوم قرار دارد
- ۱۶ : یعنی گره دوم داخل گره اول قرار دارد
- ۳۲ : یعنی ۲گره از صفت های یک تگ هستند
| مقدار برگشتی | برگشت یک عدد که نشانگر موقعیت قرار گیری گره هاست ( اعداد در لیست بالا ) |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در این مثال باید خروجی ۴ باشه ( این یعنی گره P1 قبل از گره P2 قرار داره )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function Get(){ var Tag_1 , Tag_2 , MyPosition , Result; Tag_1 = document.getElementById("p1"); Tag_2 = document.getElementById("p2"); Result = document.getElementById("Result"); MyPosition = Tag_1.compareDocumentPosition(Tag_2); Result.innerHTML = MyPosition; } </script> |
مثال شماره ۲ : خروجی ترکیبی ، مثلا ممکنه در خروجی عدد ۲۰ چاپ بشه، این یعنی P2 داخل P1 هست ( این میشه ۱۶ تا ) و P1 قبل از P2 قرار داره ( اینم میشه ۴ تا ) که جمعشون میشه ۲۰ و در خروجی چاپ میشه
|
1 2 3 |
<div id="p1"> <p id="p2">P2</p> </div> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()compareDocumentPosition | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.compareDocumentPosition( Node_Name ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Node_Name | ضروری – اون گره ( تگ ) که قراره با گره فعلی مقایسه شه |
Free-Learn
نکات و توضیحات
- مقدار برگشتی ممکنه بصورت ترکیبی هم باشه. ( همانند مثال شماره ۲ )
