WinehouseLabs

DOM manipulation refers to the process of using JavaScript to interact with and modify the Document Object Model (DOM), which represents the structure of a web page.

This is achieved using a series of DOM properties that are used to select, interact, listen to events, and alter parts of the webpage.

Element Selection

Property / Method	Description
`getElementById()`	Selects a single element by its `id` attribute. Returns the element or `null` if not found.
`getElementsByClassName()`	Selects all elements with a given class name. Returns a live HTMLCollection.
`getElementsByTagName()`	Selects all elements with a given tag name (e.g. `"div"`, `"p"`). Returns a live HTMLCollection.
`querySelector()`	Selects the first element that matches a CSS selector.
`querySelectorAll()`	Selects all elements that match a CSS selector. Returns a static NodeList.

Content Manipulation

Property	Description
`innerText`	Gets or sets the visible, rendered text of an element. CSS-aware — only returns what is actually visible on screen.
`textContent`	Gets or sets all text content inside an element, including text inside hidden elements. Faster than `innerText` and the safer choice for plain text.
`innerHTML`	Gets or sets the HTML markup inside an element. ⚠️ Never use with untrusted user input — it opens the door to XSS (Cross-Site Scripting) attacks. Use `textContent` for plain text instead.
`outerHTML`	Gets or sets the HTML of the element itself, including its own opening and closing tags.
`nodeValue`	Gets or sets the value of a text node or comment node directly.

Attribute Handling

Property / Method	Description
`id`	Gets or sets the `id` attribute of an element.
`className`	Gets or sets the full `class` attribute of an element as a string.
`getAttribute()`	Returns the value of a specified attribute on an element.
`setAttribute()`	Sets the value of a specified attribute on an element. Creates the attribute if it doesn't exist.
`removeAttribute()`	Removes a specified attribute from an element entirely.
`hasAttribute()`	Returns `true` if the element has the specified attribute, `false` otherwise.

Style and Appearance

Property / Method	Description
`style`	Gets or sets inline CSS styles directly on an element (e.g. `element.style.color = "red"`).
`classList`	Returns the list of CSS classes on an element. Provides the following methods:
`classList.add()`	Adds one or more class names to the element.
`classList.remove()`	Removes one or more class names from the element.
`classList.toggle()`	Adds the class if it is absent; removes it if it is present.
`classList.contains()`	Returns `true` if the element has the specified class, `false` otherwise.

Element Creation and Removal

Method	Description
`createElement()`	Creates a new HTML element of the specified tag type (e.g. `"div"`, `"p"`).
`appendChild()`	Appends a node as the last child of a specified parent element.
`removeChild()`	Removes a specified child node from its parent element.
`replaceChild()`	Replaces an existing child node with a new node.
`createTextNode()`	Creates a new text node with the specified string content.
`cloneNode()`	Creates a copy of an element. Pass `true` to also clone all its child elements.

Traversing the DOM

Property	Description
`parentNode`	Returns the parent node of the specified element.
`childNodes`	Returns a NodeList of all child nodes, including text nodes and comments.
`children`	Returns an HTMLCollection of only the element children, excluding text and comment nodes.
`firstChild`	Returns the first child node, including text nodes.
`firstElementChild`	Returns the first child that is an element, ignoring text and comment nodes.
`lastChild`	Returns the last child node, including text nodes.
`lastElementChild`	Returns the last child that is an element, ignoring text and comment nodes.
`nextSibling`	Returns the next node at the same level, including text nodes.
`nextElementSibling`	Returns the next element at the same level, ignoring text and comment nodes.
`previousSibling`	Returns the previous node at the same level, including text nodes.
`previousElementSibling`	Returns the previous element at the same level, ignoring text and comment nodes.

DOM Events

DOM events are actions or occurrences that happen in the browser — like a user clicking a button or typing in a field. To respond to these events, JavaScript uses addEventListener(), which attaches a function to an element that runs when the specified event occurs.

Syntax:

element.addEventListener('event', callbackFunction);

Example:

const button = document.querySelector('#submit-btn');

button.addEventListener('click', function() {
  console.log('Button was clicked!');
});

Event	Description
`click`	Fires when an element is clicked.
`input`	Fires when the value of an input field changes as the user types.
`submit`	Fires when a form is submitted.
`keydown`	Fires when a keyboard key is pressed down.
`mouseover`	Fires when the mouse pointer moves over an element.
`change`	Fires when the value of a select, checkbox, or radio input is changed and confirmed.
`focus`	Fires when an element receives focus (e.g. clicking into an input field).
`blur`	Fires when an element loses focus.