به طور معمول، توسعه دهندگان زمانی که نیاز به انجام کاری با 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 = ` را تغییر دهید

در واقع، تغییر 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("کلیک"، تابع (رویداد) (console.log(event.type + "کار انداخته شد") )) myElement.addEventListener("کلیک"، تابع (رویداد) (consol.log(event.type + " دوباره اخراج شدم")))

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

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

// ویژگی `forms` آرایه ای است که حاوی پیوندهایی به تمام فرم ها است const myForm = document.forms const myInputElements = myForm.querySelectorAll("input") Array.from(myInputElements).forEach(el => (el.addEventListener(" تغییر "، تابع (رویداد) (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(رویداد، کنترل‌کننده، گزینه‌ها))) این را برگردانید)))

قبل

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

در مثال دوم، من از متد childElementCount استفاده می‌کنم، که به نظرم روشی منظم‌تر و بالقوه قابل نگهداری‌تر است (در این مورد بعداً، فکر نمی‌کنم در درک این که چه کار می‌کند مشکلی نداشته باشید).

می توانم سعی کنم از childNodes.length (به جای Children.length) استفاده کنم، اما به نتیجه نگاه کنید:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

13 را برمی گرداند زیرا childNodes مجموعه ای از تمام گره ها از جمله فضاها است - اگر به تفاوت بین گره های فرزند و گره های عنصر فرزند اهمیت می دهید این را در نظر داشته باشید.

بررسی وجود گره های کودک

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

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // درست است، واقعی

من می دانم که لیست من دارای گره های فرزند است، اما می توانم HTML را طوری تغییر دهم که هیچ کدام وجود نداشته باشد. اکنون نشانه گذاری به این صورت است:

و در اینجا نتیجه اجرای مجدد hasChildNodes() است:

Console.log(myList.hasChildNodes()); // درست است، واقعی

روش همچنان true را برمی گرداند. اگرچه لیست حاوی هیچ عنصری نیست، اما حاوی یک فاصله است که یک نوع گره معتبر است. این روشهمه گره ها را در نظر می گیرد، نه فقط گره های عنصر را. برای اینکه hasChildNodes() false را برگرداند، باید علامت گذاری را دوباره تغییر دهیم:

و اکنون نتیجه مورد انتظار در کنسول نمایش داده می شود:

Console.log(myList.hasChildNodes()); // نادرست

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

افزودن و حذف عناصر کودک

تکنیک هایی وجود دارد که می توان برای افزودن و حذف عناصر از DOM استفاده کرد. معروف ترین آنها بر اساس ترکیبی از متدهای createElement() و appendChild() است.

VarmyEl = document.createElement("div"); document.body.appendChild(myEl);

در این صورت من در حال ایجاد هستم