DHTML — 35 free lessons

dynamic html · dom + script + style · pre-framework era

Start lesson 1 →

DHTML Tutorial

1. What is DHTML · HTML + CSS + JavaScript + DOM 2. The DOM · The Document Tree 3. DOM Node Types · Element · Text · Attribute …4. Document Object · Entry to the DOM 5. Window Object · The Global Container 6. Accessing Elements · GetElementById …7. Modern Selecting · QuerySelector · QuerySelectorAll 8. InnerHTML · Setting Markup as a String 9. InnerText vs TextContent

DHTML DOM Manipulation

10. CreateElement · CreateTextNode 11. Inserting Nodes · AppendChild · InsertBefore 12. Removing Nodes · RemoveChild 13. Cloning Nodes · CloneNode Deep vs Shallow 14. Element.style · Changing Inline CSS 15. Computed Styles · GetComputedStyle 16. ClassName · ClassList · The CSS Hooks 17. SetAttribute · GetAttribute · RemoveAttribute

DHTML Events

18. Event Handlers · The Old Onclick Way 19. AddEventListener · The Modern Way 20. Event Bubbling · Capturing · Delegation 21. Event Object · Target · Type · PreventDefault 22. Mouse Events · Click · Mousemove · Mouseover 23. Keyboard Events · Keydown · Keyup · Key Codes 24. Form Events · Submit · Change · Input 25. Window Events · Load · Resize · Scroll

DHTML Patterns

26. Timing · SetTimeout · SetInterval · ClearTimeout 27. Show / Hide Patterns · Display · Visibility 28. Toggle Patterns · ClassList.toggle 29. Animations the DHTML Way · SetInterval + Style 30. Drag and Drop · Mousedown · Mousemove · Mouseup 31. Modal Patterns · Overlays · Centering 32. Accordion · Tabs · The Classic Widgets

DHTML Modern Legacy

33. AJAX · The Leap to Fetching Without Reload 34. Why DHTML Became Invisible · Frameworks Ate it 35. References · Examples · The Legacy you Still Touch