Kurs DOM*
Podstawy: Wstęp; Rodzaje dokumentów; Przestrzenie nazw; Parsowanie i serializacja; Drzewo węzłów; Kodowanie; Adresy URL; Fecz; Kolekcje; API selektorów; Węzły znakowe; Elementy i atrybuty; Zakresy; Przejścia; Zestawy; Obserwatorzy zmian; Pochodzenie zasobów; Web IDL; Typy danych; Interfejsy i obiekty; Obsługa błędów; Zarządzanie pamięcią
Zdarzenia*: Wstęp; Architektura; Uchwyty; Delegacja; Bazowe interfejsy; Słownik pojęć; Przegląd typów zdarzeń; Moduły; Interfejs użytkownika; load; unload; abort; error; select; resize; scroll; Zogniskowanie; blur; focus; focusin; focusout; Mysz; click; dblclick; mousedown; mouseenter; mouseleave; mousemove; mouseout; mouseover; mouseup; Kółko; wheel; Wejście; beforeinput; input; Klawiatura; keydown; keyup; Kompozycja; compositionstart; compositionupdate; compositionend
Ogólne: Wstęp; Łańcuchy znaków; Events; Nodes; MutationObserver; Document; DocumentType; DocumentFragment; Element; NamedNodeMap; Attr; CharacterData; Collections; Sets; Range; Traversal; Parsing & Serialization; Encoding; TextEncoder; TextDecoder; URLs; URLUtils i URLUtilsReadOnly; URLSearchParams; Fetch; Headers; Body; Request; Response
ERRORS
DOMException: Wstęp; Właściwości; .code
DOMError: Wstęp; Właściwości; .message; .name; Inne; new DOMError()
EVENTS
Event: Wstęp; Właściwości; .bubbles; .cancelable; .currentTarget; .defaultPrevented; .eventPhase; .isTrusted; .target; .timeStamp; .type; Metody; .initEvent(); .preventDefault(); .stopImmediatePropagation(); .stopPropagation(); Inne; new Event()
CustomEvent: Wstęp; Właściwości; .detail; Metody; .initCustomEvent(); Inne; new CustomEvent()
EventTarget: Wstęp; Metody; .addEventListener(); .dispatchEvent(); .removeEventListener()
EventListener: Wstęp; Metody; .handleEvent()
UIEvent: Wstęp; Właściwości; .detail; .view; Metody; .initUIEvent(); Inne; new UIEvent()
FocusEvent: Wstęp; Właściwości; .relatedTarget; Metody; .initFocusEvent(); Inne; new FocusEvent()
MouseEvent: Wstęp; Właściwości; .altKey; .button; .buttons; .clientX; .clientY; .ctrlKey; .metaKey; .relatedTarget; .screenX; .screenY; .shiftKey; Metody; .getModifierState(); .initMouseEvent(); Inne; new MouseEvent()
WheelEvent: Wstęp; Właściwości; .deltaMode; .deltaX; .deltaY; .deltaZ; Metody; .initWheelEvent(); Inne; new WheelEvent()
InputEvent: Wstęp; Właściwości; .data; .isComposing; Inne; new InputEvent()
KeyboardEvent: Wstęp; Właściwości; .altKey; .code; .ctrlKey; .isComposing; .key; .location; .metaKey; .repeat; .shiftKey; Metody; .getModifierState(); .initKeyboardEvent(); Inne; new KeyboardEvent()
CompositionEvent: Wstęp; Właściwości; .data; Metody; .initCompositionEvent(); Inne; new CompositionEvent()
NODES
ParentNode: Wstęp; Właściwości; .childElementCount; .children; .firstElementChild; .lastElementChild; Metody; .append(); .getElementById(); .prepend(); .querySelector(); .querySelectorAll()
ChildNode: Wstęp; Właściwości; .nextElementSibling; .previousElementSibling; Metody; .after(); .before(); .remove(); .replaceWith()
MutationObserver: Wstęp; Metody; .disconnect(); .observe(); .takeRecords(); Inne; new MutationObserver()
MutationRecord: Wstęp; Właściwości; .addedNodes; .attributeName; .attributeNamespace; .nextSibling; .oldvalue; .previousSibling; .removedNodes; .target; .type
Node: Wstęp; Właściwości; .baseURI; .childNodes; .firstChild; .lastChild; .nextSibling; .nodeName; .nodeType; .nodeValue; .ownerDocument; .parentElement; .parentNode; .previousSibling; .rootNode; .textContent; Metody; .appendChild(); .cloneNode(); .compareDocumentPosition(); .contains(); .hasChildNodes(); .insertBefore(); .isDefaultNamespace(); .isEqualNode(); .isSameNode(); .lookupNamespaceURI(); .lookupPrefix(); .normalize(); .removeChild(); .replaceChild()
Document: Wstęp; Właściwości; .characterSet; .charset; .compatMode; .contentType; .doctype; .documentElement; .documentURI; .implementation; .inputEncoding; .origin; .URL; Metody; .adoptNode(); .createAttribute(); .createAttributeNS(); .createComment(); .createDocumentFragment(); .createElement(); .createElementNS(); .createEvent(); .createNodeIterator(); .createProcessingInstruction(); .createRange(); .createTextNode(); .createTreeWalker(); .getElementsByClassName(); .getElementsByTagName(); .getElementsByTagNameNS(); .importNode(); Inne; new Document()
XMLDocument: Wstęp
DOMImplementation: Wstęp; Metody; .createDocument(); .createDocumentType(); .createHTMLDocument(); .hasFeature()
DocumentType: Wstęp; Właściwości; .name; .publicId; .systemId
DocumentFragment: Wstęp; Inne; new DocumentFragment()
Element: Wstęp; Właściwości; .attributes; .classList; .className; .id; .localName; .namespaceURI; .prefix; .tagName; Metody; .getAttribute(); .getAttributeNS(); .getAttributeNode(); .getAttributeNodeNS(); .getAttributeNames(); .getElementsByClassName(); .getElementsByTagName(); .getElementsByTagNameNS(); .hasAttribute(); .hasAttributeNS(); .hasAttributes(); .insertAdjacentElement(); .insertAdjacentText(); .matches(); .removeAttribute(); .removeAttributeNS(); .removeAttributeNode(); .setAttribute(); .setAttributeNS(); .setAttributeNode(); .setAttributeNodeNS()
NamedNodeMap: Wstęp; Właściwości; .length; Metody; .getNamedItem(); .getNamedItemNS(); .item(); .removeNamedItem(); .removeNamedItemNS(); .setNamedItem(); .setNamedItemNS()
Attr: Wstęp; Właściwości; .localName; .name; .namespaceURI; .nodeName; .nodeValue; .ownerElement; .prefix; .specified; .textContent; .value
CharacterData: Wstęp; Właściwości; .data; .length; Metody; .appendData(); .deleteData(); .insertData(); .replaceData(); .substringData()
Text: Wstęp; Właściwości; .wholeText; Metody; .splitText(); Inne; new Text()
Comment: Wstęp; Inne; new Comment()
ProcessingInstruction: Wstęp; Właściwości; .target
COLLECTIONS
NodeList: Wstęp; Właściwości; .length; Metody; .item()
HTMLCollection: Wstęp; Właściwości; .length; Metody; .item(); .namedItem()
SETS
DOMTokenList: Wstęp; Właściwości; .length; .value; Metody; .add(); .contains(); .item(); .remove(); .replace(); .supports(); .toggle(); Inne; stringifier
RANGES
Range: Wstęp; Właściwości; .collapsed; .commonAncestorContainer; .endContainer; .endOffset; .startContainer; .startOffset; Metody; .cloneContents(); .cloneRange(); .collapse(); .compareBoundaryPoints(); .comparePoint(); .deleteContents(); .detach(); .extractContents(); .insertNode(); .intersectsNode(); .isPointInRange(); .selectNode(); .selectNodeContents(); .setEnd(); .setEndAfter(); .setEndBefore(); .setStart(); .setStartAfter(); .setStartBefore(); .surroundContents(); Inne; new Range(); stringifier
TRAVERSAL
NodeIterator: Wstęp; Właściwości; .filter; .pointerBeforeReferenceNode; .referenceNode; .root; .whatToShow; Metody; .detach(); .nextNode(); .previousNode()
TreeWalker: Wstęp; Właściwości; .currentNode; .filter; .root; .whatToShow; Metody; .firstChild(); .lastChild(); .nextNode(); .nextSibling(); .parentNode(); .previousNode(); .previousSibling()
NodeFilter: Wstęp; Metody; .acceptNode()
Dodatki*
PARSING & SERIALIZATION
DOMParser: Wstęp; Metody; .parseFromString(); Inne; new DOMParser()
XMLSerializer: Wstęp; Metody; .serializeToString(); Inne; new XMLSerializer()
Element (rozszerzenie): Wstęp; Właściwości; .innerHTML; .outerHTML; Metody; .insertAdjacentHTML()
Range (rozszerzenie): Wstęp; Metody; .createContextualFragment()
Text (rozszerzenie): Wstęp; Właściwości; .serializeAsCDATA
ENCODING
TextEncoder: Wstęp; Właściwości; .encoding; Metody; .encode(); Inne; new TextEncoder()
TextDecoder: Wstęp; Właściwości; .encoding; .fatal; .ignoreBOM; Metody; .decode(); Inne; new TextDecoder()

Zdarzenia#

Bazowe interfejsy#

Z mechanizmem zdarzeń związanych jest kilka bazowych interfejsów zdarzeń # (basic event interfaces), które muszą być obsługiwane przez każdą implementację. Zaliczamy do nich cztery następujące interfejsy:

Bazowe interfejsy zdarzeń oraz wszystkie polecenia z nimi związane zdefiniowano w najnowszej specyfikacji DOM4, dlatego w bieżącej specyfikacji D3E, jeśli się pojawiają, to tylko jako referencje. Można powiedzieć, że w przypadku zdarzeń zależności między najważniejszymi specyfikacjami webowymi są następujące DOM4 > D3E > HTML5, czyli:

Specyfikacja HTML5 zależy od specyfikacji D3E (np. w kontekście zdarzeń myszy, klawiatury lub zogniskowania).
Specyfikacja D3E zależy od specyfikacji DOM4 (w kontekście bazowych interfejsów zdarzeń).

Pozostałe interfejsy definiowane w specyfikacji D3E tworzą odrębne moduły. Wykaz wszystkich interfejsów oraz zależności między nimi prezentuje poniższa grafika:

Bazowe interfejsy zdarzeń oraz ich dziedziczenie

Rysunek. Bazowe interfejsy zdarzeń oraz ich dziedziczenie

Poszczególne typy zdarzeń występujące w specyfikacji D3E pochodzą z tych bazowych interfejsów i muszą dziedziczyć wszystkie właściwości, metody oraz stałe z interfejsów, od których pochodzą. Kolejne typy zdarzeń definiowane w inny specyfikacjach również mogą dziedziczyć z tych bazowych interfejsów lub z nowych interfejsów, które definiują.

Moduły zdarzeń#

Specyfikacja D3E wprowadza pojęcie modułu zdarzeń # (event module). Moduł zdarzeń definiuje kolejne interfejsy (dziedziczące z interfejsów bazowych) oraz wchodzące w ich skład konkretne typy zdarzeń.

Model zdarzeń DOM umożliwia implementacjom DOM wspieranie wielu modułów zdarzeń. Model ten został tak zaprojektowany, aby możliwe było dodawanie nowych modułów zdarzeń w przyszłości. Celem specyfikacji D3E nie jest zdefiniowanie wszystkich możliwych zdarzeń. Dla celów interoperacyjności specyfikacja definiuje jedynie moduł zdarzeń interfejsu użytkownika, z podziałem na zdarzeniami niższego poziomu, które zależą od stosowanego urządzenia.

Istnieje jeszcze moduł ze zdarzeniami zmian, ale obecnie uznawany jest za przestarzały. W razie potrzeby można skorzystać z obserwatorów zmian.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Zdarzenia (H1) Bazowe interfejsy (H2) Moduły zdarzeń (H3)