Sling Academy
Home/JavaScript/JavaScript: Document Object Model Tutorials

JavaScript: Document Object Model Tutorials

DOM, which stands for Document Object Model, represents the structure of a web page as a tree of objects, where each object represents an HTML element. The HTML DOM is the essential concept for web development, and Javascript is the language used to manipulate it. This allows developers to access and modify the content and behavior of a web page using Javascript.

In this series of tutorials, you will learn how to use Javascript to interact with the HTML DOM. You will start with the basics of the HTML DOM, learning how to access elements, change their content and styles, and respond to user interactions. As you progress through the tutorials, you will tackle more advanced topics such as events, browser compatibility, and performance considerations. By the end of this series, you will have a good understanding of how to use Javascript to create dynamic and interactive web pages.

The tutorials will be presented in a clear and concise manner, with practical examples to help you understand each concept. Whether you are a beginner or an experienced developer, you will find something of value in this series.

1 The Modern JavaScript DOM Cheat Sheet

2 JavaScript: Detect a click outside an HTML element

3 JavaScript: 3 Ways to Insert Custom Content After N Paragraphs

4 JavaScript: Set HTML lang attribute programmatically

5 JavaScript: 4 Ways to Get the Width & Height of an Element

6 JavaScript: How to Disable a Button on Click

7 JavaScript: Get the Position (X & Y Coordinates) of an Element

8 JavaScript: How to Programmatically Scroll Inside a Div

9 JavaScript: Programmatically Disable/Enable a Text Input

10 JavaScript: How to Programmatically Update Page Title

11 JavaScript: Show a Custom Context Menu on Right Click

12 JavaScript: Checking if a Div element is visible

13 JavaScript: Detect when a Div goes into viewport

14 JavaScript: Disable a Button After a Click for N Seconds

15 JavaScript: How to implement auto-save form

16 DOM in a Nutshell: A Quick Introduction to JavaScript

17 Selecting Elements Like a Pro with JavaScript querySelector()

18 Fast DOM Manipulation with JavaScript document.createElement()

19 Modern Event Handling: addEventListener() in JavaScript

20 Making Buttons Do Something: JavaScript Click Events Explained

21 Styling Elements on the Fly: Changing CSS with JavaScript

22 Creating Dynamic Lists: Adding and Removing Nodes in JavaScript

23 The Power of classList: Toggling Classes Easily in JavaScript

24 Working with Forms: Reading and Updating Input Values in JavaScript

25 Mastering Inner HTML vs Text Content in JavaScript

26 DOM Traversal: Moving Between Parent and Child Nodes in JavaScript

27 From Static to Dynamic: Updating the DOM in Real-Time with JavaScript

28 Shaping the User Experience with JavaScript DOM Events

29 Making Your Pages Interactive: The Basics of the JavaScript DOM

30 Handling Keyboard Events in JavaScript: Press Any Key!

31 Inline vs External JavaScript: A DOM Perspective

32 Stop Page Jumps: Preventing Default Behaviors in JavaScript

33 Eavesdropping on the DOM: Using Event Bubbling & Capturing in JavaScript

34 Building a Simple Modal with Pure JavaScript DOM Manipulation

35 Hover Effects with JavaScript: No CSS? No Problem!

36 Dynamic Image Galleries: Changing src on the Fly in JavaScript

37 Replacing Content with JavaScript: Using replaceChild()

38 Adding Animation Classes via JavaScript DOM Updates

39 Working with Data Attributes: The dataset Property in JavaScript

40 The Document Object Model vs The Window Object in JavaScript

41 Shortcuts with querySelectorAll(): Targeting Multiple Elements in JavaScript

42 Light and Dark Mode Switcher Using the JavaScript DOM

43 Focus and Blur Events: Managing Input Fields in JavaScript

44 A Quick Tour of the Node vs Element Distinction in JavaScript

45 How to Efficiently Remove Elements with JavaScript remove()

46 Cloning Nodes: The cloneNode() Trick in JavaScript

47 Inserting HTML Fragments Using insertAdjacentHTML() in JavaScript

48 Tackling Browser Compatibility in Modern JavaScript DOM

49 Event Delegation: A Cleaner Way to Handle Many Events in JavaScript

50 Conditionally Displaying Sections with the hidden Attribute in JavaScript

51 Smooth Scrolling to Elements with JavaScript DOM Methods

52 Tracking Mouse Movements Over Elements with JavaScript

53 Text Transformations: Editing Paragraphs on the Fly in JavaScript

54 Injecting Templates Dynamically with Template Tags in JavaScript

55 Building a Simple Tabs Interface Using Only the JavaScript DOM

56 Creating a Dropdown Menu with Vanilla JavaScript

57 Element Positioning: Reading offsetTop and offsetLeft in JavaScript

58 Managing Checkboxes and Radio Buttons via the JavaScript DOM

59 A Primer on the Shadow DOM (Quick Introduction) in JavaScript

60 Debugging DOM Issues: Tips and Tricks for JavaScript Developers

61 Batch Updates: Minimizing Reflows and Repaints in JavaScript

62 Adding and Removing Inline Styles Dynamically with JavaScript

63 Refining Page Structure: Using documentFragment() in JavaScript

64 Event Timing: Using setTimeout() and the JavaScript DOM

65 Resizing Elements in Real-Time with JavaScript

66 Filtering Lists: Show and Hide Items via JavaScript DOM Updates

67 Simple Drag and Drop with Basic JavaScript DOM Events

68 Using scrollIntoView() for Better Navigation in JavaScript

69 Working with IFrames: Accessing and Manipulating Their DOM in JavaScript

70 Responsive Design Helpers: Checking Window Size with JavaScript

71 Color Pickers and Input Ranges: Creating Dynamic UI Controls in JavaScript

72 Tracking User Interactions with Data Attributes in JavaScript

73 DOMContentLoaded vs Load: Understanding the Difference in JavaScript

74 Creating and Controlling Popovers and Tooltips in JavaScript

75 Real-Time Search Filters Without Libraries Using JavaScript

76 Efficient Table Manipulations: Adding Rows and Cells with JavaScript

77 Custom User Alerts: Building a Notification Banner in JavaScript

78 DOM Scripting for Improved Accessibility in JavaScript

79 Keyboard Shortcuts: Navigating the Page with Keys in JavaScript

80 Editing Text Content Inline with JavaScript DOM

81 Creating a Toggle Switch from Scratch in JavaScript

82 Simple SPA Routing: Switching Content Areas with the JavaScript DOM

83 Working with SVG Elements in the JavaScript DOM

84 Performance Tips for Faster JavaScript DOM Interactions

85 Detecting Element Visibility with the Intersection Observer in JavaScript

86 Reading and Changing Element Dimensions Dynamically in JavaScript

87 Optimizing Image Galleries with Lazy Loading in JavaScript

88 Building a Color Theme Picker Using the JavaScript DOM

89 Async and the DOM: Waiting for Data Before Rendering in JavaScript

90 JavaScript and Geolocation: Displaying Location Data

91 Handling Errors and Fallbacks with Graceful Degradation in JavaScript

92 Creating Dynamic Timers and Counters with JavaScript

93 Small Data Storage: Using localStorage in JavaScript

94 Highlighting Text Selections on User Interaction in JavaScript

95 Making Interactive Questionnaires Using JavaScript DOM Manipulation

96 Detecting Link Clicks and Tracking User Navigation in JavaScript

97 Mastering querySelector(): Tips and Best Practices in JavaScript

98 Animating Width and Height with JavaScript Updates

99 Building a Simple Browser Game with Basic JavaScript DOM Logic

100 Creating Reusable DOM Snippets for Faster Prototyping in JavaScript

101 Refactoring Your DOM Code for Better Readability in JavaScript

102 Exporting and Importing DOM Snippets as Templates in JavaScript

103 Conditional Rendering: Show or Hide Elements Using JavaScript

104 Building a Lightweight Accordion Component in JavaScript

105 Managing Multiple Event Listeners Efficiently with JavaScript

106 Reacting to Network Status Changes in the JavaScript DOM

107 Smoothing Out User Flows: Focus Management Techniques in JavaScript

108 Context Menus with Custom Right-Click Events in JavaScript

109 Integrating Fetch API Results into the JavaScript DOM

110 Adding Input Validation Messages Dynamically with JavaScript

111 Creating Quick Carousels: Sliding Through Images in JavaScript

112 Building a Rating System with Stars Using the JavaScript DOM

113 Highlighting Code Snippets: Simple JavaScript DOM Approaches

114 Detecting Touch vs Click Events for Mobile-Friendly Pages in JavaScript

115 Saving User Preferences and Applying Them to the DOM with JavaScript