Browser: Document, Events, Interfaces

• Document

  • Browser environment, specs

  • DOM tree

  • Menelusuri DOM

    • DOM children

    • The sibling question

    • Select all diagonal cells

  • Pencarian: getElement*, querySelector*

    • Pencarian untuk elemen

  • Node properties: type, tag and contents

    • Count descendants

    • What's in the nodeType?

    • Tag in comment

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

  • Atribut dan Properti

    • 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)

• Pengenalan ke Peristiwa

  • Pengenalan ke peristiwa peramban (_browser events_)

    • Klik untuk menyembunyikan

    • Sembunyikan diri

    • Penangan mana yang dijalankan?

    • Pindahkan bola ke seberang lapangan

    • Buat sebuah menu geser

    • Tambahkan tombol untuk menutup

    • Carousel

  • Menggelembung (_bubbling_) dan menangkap (_capturing_)

  • Delegasi Peristiwa

    • Menyembunyikan pesan menggunakan delegasi

    • Menu pohon (_tree menu_)

    • Tabel yang bisa diurutkan

    • Perilaku Tooltip

  • _Browser default actions_

    • Mengapa "return false" tidak berfungsi?

    • Tangkap link pada elemen

    • Image gallery

  • Dispatching custom events

• UI Events

  • Mouse events

    • Selectable list

  • Moving the mouse: mouseover/out, mouseenter/leave

    • Improved tooltip behavior

    • "Smart" tooltip

  • Drag'n'Drop with mouse events

    • Slider

    • Drag superheroes around the field

  • Pointer events

  • Keyboard: keydown and keyup

    • Extended hotkeys

  • Scrolling

    • Endless page

    • Up/down button

    • Load visible images

• Forms, controls

  • Metode dan properti form

    • Tambahkan option pada select

  • Focusing: focus/blur

    • Editable div

    • Edit TD on click

    • Keyboard-driven mouse

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

    • Deposit calculator

  • Forms: *event* dan *method* submit

    • Modal form

• Document and resource loading

  • Page: DOMContentLoaded, load, beforeunload, unload

  • Scripts: async, defer

  • Resource loading: onload and onerror

    • Load images with a callback

• Miscellaneous

  • Mutation observer

  • Selection and Range

  • Event loop: microtasks and macrotasks