مرورگر: Document، Eventها، رابط‌ها

• Document

  • محیط مرورگر و خصوصیات (Specs)

  • درخت DOM

  • Walking the DOM

    • DOM children

    • The sibling question

    • Select all diagonal cells

  • جستجو: *getElement و *querySelector

    • جستجوی elementها

  • Node properties: type, tag and contents

    • Count descendants

    • What's in the nodeType?

    • Tag in comment

    • Where's the "document" in the hierarchy?

  • Attributes and properties

    • Get the attribute

    • Make external links orange

  • Modifying the document

    • createTextNode vs innerHTML vs textContent

    • Clear the element

    • Why does "aaa" remain?

    • Create a list

    • Create a tree from the object

    • Show descendants in a tree

    • Create a calendar

    • Colored clock with setInterval

    • Insert the HTML in the list

    • Sort the table

  • Styles and classes

    • Create a notification

  • Element size and scrolling

    • What's the scroll from the bottom?

    • What is the scrollbar width?

    • Place the ball in the field center

    • The difference: CSS width versus clientWidth

  • Window sizes and scrolling

  • Coordinates

    • Find window coordinates of the field

    • Show a note near the element

    • Show a note near the element (absolute)

    • Position the note inside (absolute)

• معرفی Events

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

    • مخفی کردن در صورت کلیک

    • مخفی کردن خود عنصر

    • کدام کنترل‌کننده اجرا شود؟

    • توپ را طول زمین حرکت دهید

    • ساخت یک منوی کشویی

    • دکمه بسته‌شدن اضافه کنید

    • اسلایدر

  • بالارفتن و گرفتن

  • پترن Event delegation

    • Hide messages with delegation

    • Tree menu

    • Sortable table

    • Tooltip behavior

  • اکشن‌های پیشفرض مرورگر

    • Why "return false" doesn't work?

    • Catch links in the element

    • Image gallery

  • Dispatchکردن eventهای شخصی سازی شده

• جزئیات Eventها

  • رویدادهای موس

    • لیست قابل انتخاب

  • حرکت موس: روی/بیرون‌از عنصر، ورود/خروج‌از عنصر

    • رفتار یک تولتیپ پیشرفته

    • تولتیپ "باهوش"

  • Drag'n'Drop with mouse events

    • Slider

    • Drag superheroes around the field

  • Pointer events

  • Keyboard: keydown and keyup

    • Extended hotkeys

  • اسکرول کردن (Scrolling)

    • صفحه بی‌پایان

    • دکمه بالا و پایین

    • بارگذاری تصاویر قابل‌مشاهده

• فرم‌ها، کنترل‌ها

  • Form properties و methods

    • اضافه کردن یک option به select

  • Focus: متمرکز کردن/محو کردن

    • div قابل ویرایش

    • ویرایش TD با click

    • ماوس همراه با کیبورد

  • Events: change, input, cut, copy, paste

    • ماشین حساب سپرده

  • فرم‌ها: event و method submit

    • Modal form

• Document و بارگیری منابع

  • Page: DOMContentLoaded, load, beforeunload, unload

  • Scripts: async, defer

  • Resource loading: onload and onerror

    • Load images with a callback

• متفرقه

  • Mutation observer

  • Selection و Range

  • Event loop: microtasks و macrotasks

    • What will be the output of this code?