0
# DOM Manipulation
1

2
Create and control HTML elements, form inputs, and integrate p5.js with web page DOM for interactive web applications beyond the canvas.
3

4
## Capabilities
5

6
### Element Selection
7

8
Functions for selecting existing DOM elements.
9

10
```javascript { .api }
11
/**
12
 * Select single DOM element by CSS selector
13
 * @param {string} selector - CSS selector string
14
 * @param {string|Element} [container] - Container element to search within
15
 * @returns {p5.Element|null} Element wrapper or null if not found
16
 */
17
function select(selector, container);
18

19
/**
20
 * Select multiple DOM elements by CSS selector
21
 * @param {string} selector - CSS selector string
22
 * @param {string|Element} [container] - Container element to search within
23
 * @returns {p5.Element[]} Array of element wrappers
24
 */
25
function selectAll(selector, container);
26

27
/**
28
 * Remove all p5-created DOM elements
29
 */
30
function removeElements();
31
```
32

33
### Element Creation
34

35
Functions for creating new HTML elements.
36

37
```javascript { .api }
38
/**
39
 * Create generic HTML element
40
 * @param {string} tag - HTML tag name
41
 * @param {string} [content] - Initial content
42
 * @returns {p5.Element} Element wrapper
43
 */
44
function createElement(tag, content);
45

46
/**
47
 * Create div element
48
 * @param {string} [html] - Initial HTML content
49
 * @returns {p5.Element} Div element wrapper
50
 */
51
function createDiv(html);
52

53
/**
54
 * Create paragraph element
55
 * @param {string} [html] - Initial HTML content
56
 * @returns {p5.Element} Paragraph element wrapper
57
 */
58
function createP(html);
59

60
/**
61
 * Create span element
62
 * @param {string} [html] - Initial HTML content
63
 * @returns {p5.Element} Span element wrapper
64
 */
65
function createSpan(html);
66

67
/**
68
 * Create image element
69
 * @param {string} src - Image source URL
70
 * @param {string} [alt] - Alt text
71
 * @param {string} [crossOrigin] - Cross-origin attribute
72
 * @param {function} [callback] - Load callback
73
 * @returns {p5.Element} Image element wrapper
74
 */
75
function createImg(src, alt, crossOrigin, callback);
76

77
/**
78
 * Create link element
79
 * @param {string} href - Link URL
80
 * @param {string} html - Link text/HTML
81
 * @param {string} [target] - Target attribute
82
 * @returns {p5.Element} Link element wrapper
83
 */
84
function createA(href, html, target);
85
```
86

87
### Form Input Elements
88

89
Functions for creating interactive form elements.
90

91
```javascript { .api }
92
/**
93
 * Create button element
94
 * @param {string} label - Button text
95
 * @param {string} [value] - Button value
96
 * @returns {p5.Element} Button element wrapper
97
 */
98
function createButton(label, value);
99

100
/**
101
 * Create checkbox input
102
 * @param {string} [label] - Checkbox label
103
 * @param {boolean} [value] - Initial checked state
104
 * @returns {p5.Element} Checkbox element wrapper
105
 */
106
function createCheckbox(label, value);
107

108
/**
109
 * Create select dropdown
110
 * @param {boolean} [multiple] - Allow multiple selections
111
 * @returns {p5.Element} Select element wrapper
112
 */
113
function createSelect(multiple);
114

115
/**
116
 * Create radio button group
117
 * @param {string|p5.Element} [containerElement] - Container for radio group
118
 * @param {string} [name] - Radio group name
119
 * @returns {p5.Element} Radio group wrapper
120
 */
121
function createRadio(containerElement, name);
122

123
/**
124
 * Create range slider
125
 * @param {number} min - Minimum value
126
 * @param {number} max - Maximum value
127
 * @param {number} [value] - Initial value
128
 * @param {number} [step] - Step size
129
 * @returns {p5.Element} Slider element wrapper
130
 */
131
function createSlider(min, max, value, step);
132

133
/**
134
 * Create text input
135
 * @param {string} [value] - Initial value
136
 * @param {string} [type] - Input type (text, password, email, etc.)
137
 * @returns {p5.Element} Input element wrapper
138
 */
139
function createInput(value, type);
140

141
/**
142
 * Create file input
143
 * @param {function} callback - File selection callback
144
 * @param {boolean} [multiple] - Allow multiple file selection
145
 * @returns {p5.Element} File input wrapper
146
 */
147
function createFileInput(callback, multiple);
148

149
/**
150
 * Create color picker
151
 * @param {string} [value] - Initial color value
152
 * @returns {p5.Element} Color picker wrapper
153
 */
154
function createColorPicker(value);
155
```
156

157
### p5.Element Class
158

159
Wrapper class for DOM elements with p5-specific methods.
160

161
```javascript { .api }
162
/**
163
 * DOM element wrapper with p5 integration
164
 */
165
class p5.Element {
166
  /** Reference to underlying DOM element */
167
  elt;
168
  
169
  /**
170
   * Get or set element's parent
171
   * @param {string|p5.Element|Element} [parent] - Parent element
172
   * @returns {p5.Element} Parent element when getting
173
   */
174
  parent(parent);
175
  
176
  /**
177
   * Get element ID
178
   * @param {string} [id] - ID to set
179
   * @returns {string} Element ID when getting
180
   */
181
  id(id);
182
  
183
  /**
184
   * Get or set CSS class
185
   * @param {string} [class] - CSS class to set
186
   * @returns {string} CSS class when getting
187
   */
188
  class(class);
189
  
190
  /**
191
   * Add CSS class
192
   * @param {string} class - CSS class to add
193
   * @returns {p5.Element} This element for chaining
194
   */
195
  addClass(class);
196
  
197
  /**
198
   * Remove CSS class
199
   * @param {string} class - CSS class to remove
200
   * @returns {p5.Element} This element for chaining
201
   */
202
  removeClass(class);
203
  
204
  /**
205
   * Check if element has CSS class
206
   * @param {string} class - CSS class to check
207
   * @returns {boolean} True if element has class
208
   */
209
  hasClass(class);
210
  
211
  /**
212
   * Toggle CSS class
213
   * @param {string} class - CSS class to toggle
214
   * @returns {p5.Element} This element for chaining
215
   */
216
  toggleClass(class);
217
  
218
  /**
219
   * Get or set element value
220
   * @param {*} [value] - Value to set
221
   * @returns {*} Element value when getting
222
   */
223
  value(value);
224
  
225
  /**
226
   * Get or set element HTML content
227
   * @param {string} [html] - HTML content to set
228
   * @param {boolean} [append] - Whether to append instead of replace
229
   * @returns {string} HTML content when getting
230
   */
231
  html(html, append);
232
  
233
  /**
234
   * Set element position
235
   * @param {number} x - X coordinate
236
   * @param {number} y - Y coordinate
237
   * @returns {p5.Element} This element for chaining
238
   */
239
  position(x, y);
240
  
241
  /**
242
   * Set element size
243
   * @param {number} width - Element width
244
   * @param {number} height - Element height
245
   * @returns {p5.Element} This element for chaining
246
   */
247
  size(width, height);
248
  
249
  /**
250
   * Apply CSS styles
251
   * @param {string} property - CSS property name
252
   * @param {string} [value] - CSS property value
253
   * @returns {string|p5.Element} Property value when getting, element when setting
254
   */
255
  style(property, value);
256
  
257
  /**
258
   * Get or set element attribute
259
   * @param {string} attr - Attribute name
260
   * @param {string} [value] - Attribute value to set
261
   * @returns {string|p5.Element} Attribute value when getting, element when setting
262
   */
263
  attribute(attr, value);
264
  
265
  /**
266
   * Remove element attribute
267
   * @param {string} attr - Attribute name to remove
268
   * @returns {p5.Element} This element for chaining
269
   */
270
  removeAttribute(attr);
271
  
272
  /**
273
   * Add event listener
274
   * @param {string} event - Event type
275
   * @param {function} callback - Event handler function
276
   * @param {boolean} [capture] - Use capture phase
277
   * @returns {p5.Element} This element for chaining
278
   */
279
  mousePressed(callback);
280
  mouseReleased(callback);
281
  mouseClicked(callback);
282
  mouseMoved(callback);
283
  mouseOver(callback);
284
  mouseOut(callback);
285
  touchStarted(callback);
286
  touchMoved(callback);
287
  touchEnded(callback);
288
  
289
  /**
290
   * Show element (set display: block)
291
   * @returns {p5.Element} This element for chaining
292
   */
293
  show();
294
  
295
  /**
296
   * Hide element (set display: none)
297
   * @returns {p5.Element} This element for chaining
298
   */
299
  hide();
300
  
301
  /**
302
   * Remove element from DOM
303
   */
304
  remove();
305
}
306
```
307

308
See complete usage examples and DOM integration patterns in the p5.js reference.