0
# DOM Element Access
1

2
Methods for accessing and manipulating specific popup elements, enabling advanced customization and programmatic control of popup components.
3

4
## Capabilities
5

6
### Container Elements
7

8
Methods to access the main container and popup elements.
9

10
```typescript { .api }
11
/**
12
 * Gets the popup container which contains the backdrop and the popup itself
13
 * @returns The container element or null if no popup is displayed
14
 */
15
function getContainer(): HTMLElement | null;
16

17
/**
18
 * Gets the main popup element
19
 * @returns The popup element or null if no popup is displayed
20
 */
21
function getPopup(): HTMLElement | null;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
// Style the container
28
const container = Swal.getContainer();
29
if (container) {
30
  container.style.zIndex = '99999';
31
}
32

33
// Add custom class to popup
34
const popup = Swal.getPopup();
35
if (popup) {
36
  popup.classList.add('my-custom-popup');
37
}
38
```
39

40
### Content Elements
41

42
Methods to access content-related elements like title, text, and footer.
43

44
```typescript { .api }
45
/**
46
 * Gets the popup title element
47
 * @returns The title element or null if no title is displayed
48
 */
49
function getTitle(): HTMLElement | null;
50

51
/**
52
 * Gets the DOM element where the html/text parameter is rendered
53
 * @returns The content container element or null if no content is displayed
54
 */
55
function getHtmlContainer(): HTMLElement | null;
56

57
/**
58
 * Gets the popup footer element
59
 * @returns The footer element or null if no footer is displayed
60
 */
61
function getFooter(): HTMLElement | null;
62

63
/**
64
 * Gets progress steps element
65
 * @returns The progress steps element or null if no progress steps are displayed
66
 */
67
function getProgressSteps(): HTMLElement | null;
68
```
69

70
**Usage Examples:**
71

72
```typescript
73
// Animate title
74
const title = Swal.getTitle();
75
if (title) {
76
  title.style.animation = 'pulse 1s infinite';
77
}
78

79
// Modify content dynamically
80
const htmlContainer = Swal.getHtmlContainer();
81
if (htmlContainer) {
82
  htmlContainer.innerHTML += '<p>Additional content added dynamically</p>';
83
}
84

85
// Style footer
86
const footer = Swal.getFooter();
87
if (footer) {
88
  footer.style.backgroundColor = '#f8f9fa';
89
}
90
```
91

92
### Visual Elements
93

94
Methods to access icons, images, and visual indicators.
95

96
```typescript { .api }
97
/**
98
 * Gets the icon element
99
 * @returns The icon element or null if no icon is displayed
100
 */
101
function getIcon(): HTMLElement | null;
102

103
/**
104
 * Gets the icon content element (without border)
105
 * @returns The icon content element or null if no icon is displayed
106
 */
107
function getIconContent(): HTMLElement | null;
108

109
/**
110
 * Gets the image element
111
 * @returns The image element or null if no image is displayed
112
 */
113
function getImage(): HTMLElement | null;
114

115
/**
116
 * Gets the timer progress bar element
117
 * @returns The progress bar element or null if timer progress bar is not enabled
118
 */
119
function getTimerProgressBar(): HTMLElement | null;
120
```
121

122
**Usage Examples:**
123

124
```typescript
125
// Customize icon
126
const icon = Swal.getIcon();
127
if (icon) {
128
  icon.style.borderColor = '#ff6b6b';
129
  icon.style.color = '#ff6b6b';
130
}
131

132
// Add click handler to image
133
const image = Swal.getImage();
134
if (image) {
135
  image.addEventListener('click', () => {
136
    console.log('Image clicked!');
137
  });
138
}
139

140
// Style progress bar
141
const progressBar = Swal.getTimerProgressBar();
142
if (progressBar) {
143
  progressBar.style.backgroundColor = '#28a745';
144
}
145
```
146

147
### Button Elements
148

149
Methods to access all available button elements.
150

151
```typescript { .api }
152
/**
153
 * Gets the "Confirm" button element
154
 * @returns The confirm button element or null if not displayed
155
 */
156
function getConfirmButton(): HTMLButtonElement | null;
157

158
/**
159
 * Gets the "Deny" button element
160
 * @returns The deny button element or null if not displayed
161
 */
162
function getDenyButton(): HTMLButtonElement | null;
163

164
/**
165
 * Gets the "Cancel" button element
166
 * @returns The cancel button element or null if not displayed
167
 */
168
function getCancelButton(): HTMLButtonElement | null;
169

170
/**
171
 * Gets the close button element
172
 * @returns The close button element or null if not displayed
173
 */
174
function getCloseButton(): HTMLButtonElement | null;
175

176
/**
177
 * Gets the actions (buttons) wrapper element
178
 * @returns The actions wrapper element or null if no buttons are displayed
179
 */
180
function getActions(): HTMLElement | null;
181
```
182

183
**Usage Examples:**
184

185
```typescript
186
// Style confirm button
187
const confirmBtn = Swal.getConfirmButton();
188
if (confirmBtn) {
189
  confirmBtn.style.backgroundColor = '#28a745';
190
  confirmBtn.style.borderRadius = '25px';
191
}
192

193
// Add custom event to deny button
194
const denyBtn = Swal.getDenyButton();
195
if (denyBtn) {
196
  denyBtn.addEventListener('mouseover', () => {
197
    denyBtn.textContent = 'Are you sure?';
198
  });
199
}
200

201
// Modify actions container
202
const actions = Swal.getActions();
203
if (actions) {
204
  actions.style.justifyContent = 'space-around';
205
}
206
```
207

208
### Focus Management
209

210
Methods for managing focus and accessing focusable elements.
211

212
```typescript { .api }
213
/**
214
 * Gets all focusable elements in the popup
215
 * @returns Read-only array of focusable elements
216
 */
217
function getFocusableElements(): readonly HTMLElement[];
218
```
219

220
**Usage Examples:**
221

222
```typescript
223
// Log all focusable elements
224
const focusable = Swal.getFocusableElements();
225
console.log('Focusable elements:', focusable);
226

227
// Add custom focus styling
228
focusable.forEach(element => {
229
  element.addEventListener('focus', (e) => {
230
    e.target.style.outline = '3px solid #007bff';
231
  });
232
  element.addEventListener('blur', (e) => {
233
    e.target.style.outline = '';
234
  });
235
});
236
```
237

238
### Programmatic Button Clicks
239

240
Methods to trigger button clicks programmatically.
241

242
```typescript { .api }
243
/**
244
 * Clicks the "Confirm" button programmatically
245
 */
246
function clickConfirm(): void;
247

248
/**
249
 * Clicks the "Deny" button programmatically
250
 */
251
function clickDeny(): void;
252

253
/**
254
 * Clicks the "Cancel" button programmatically
255
 */
256
function clickCancel(): void;
257
```
258

259
**Usage Examples:**
260

261
```typescript
262
// Auto-confirm after delay
263
Swal.fire({
264
  title: 'Auto-confirming in 5 seconds',
265
  timer: 5000,
266
  timerProgressBar: true,
267
  didOpen: () => {
268
    setTimeout(() => {
269
      Swal.clickConfirm();
270
    }, 5000);
271
  }
272
});
273

274
// Programmatic interaction based on conditions
275
if (userHasPermission) {
276
  Swal.clickConfirm();
277
} else {
278
  Swal.clickCancel();
279
}
280
```
281

282
## Advanced DOM Manipulation Examples
283

284
```typescript
285
// Complete custom styling
286
await Swal.fire({
287
  title: 'Custom Styled Popup',
288
  text: 'This popup has custom styling applied via DOM access',
289
  icon: 'info',
290
  didOpen: () => {
291
    // Style multiple elements
292
    const popup = Swal.getPopup();
293
    const title = Swal.getTitle();
294
    const content = Swal.getHtmlContainer();
295
    const confirmBtn = Swal.getConfirmButton();
296
    
297
    if (popup) popup.style.borderRadius = '15px';
298
    if (title) title.style.color = '#6c5ce7';
299
    if (content) content.style.fontSize = '1.1em';
300
    if (confirmBtn) {
301
      confirmBtn.style.background = 'linear-gradient(45deg, #6c5ce7, #a29bfe)';
302
      confirmBtn.style.border = 'none';
303
      confirmBtn.style.borderRadius = '25px';
304
    }
305
  }
306
});
307

308
// Dynamic content updates
309
Swal.fire({
310
  title: 'Loading...',
311
  html: 'Please wait while we process your request',
312
  didOpen: () => {
313
    const content = Swal.getHtmlContainer();
314
    let dots = 0;
315
    
316
    const interval = setInterval(() => {
317
      dots = (dots + 1) % 4;
318
      if (content) {
319
        content.innerHTML = `Please wait while we process your request${'.'.repeat(dots)}`;
320
      }
321
    }, 500);
322
    
323
    // Simulate async operation
324
    setTimeout(() => {
325
      clearInterval(interval);
326
      Swal.update({
327
        title: 'Complete!',
328
        html: 'Your request has been processed successfully',
329
        icon: 'success'
330
      });
331
    }, 3000);
332
  }
333
});
334
```