dom.md

DOM

Exploring essential DOM methods for frontend development	10/18/24
🌐 Understanding Shadow DOM and Web Components in JavaScript	6/21/24
Taming the Shadow DOM: Injecting Global Styles with Adopted Stylesheets	4/9/24
8 DOM APIs You Shouldn’t Ignore	6/6/23
$(document).ready equivalent without jQuery	5/31/23

2021

How to get the next and previous sibling elements with vanilla JS	5/12
Challenges and limitations with advanced selectors and the document.querySelectorAll() method	4/21
How to add and remove classes with vanilla JS	4/19
How to get the width and height of the viewport with vanilla JS	4/10
The Element.getBoundingClientRect() method in vanilla JS	4/8
How to replace an element with vanilla js	4/7
The Element.innerHTML and Element.outerHTML properties in vanilla JS	4/6
Live vs. static NodeLists and HTMLCollections in vanilla JS	3/29
How to clone a node or element with vanilla JS	3/27
How to remove an element from the DOM with vanilla JS	3/25
Adding elements to the beginning of a group with vanilla JS	3/24
Adding elements to the end of a group with vanilla JS	3/23
Injecting one element after another with vanilla JS	3/18
Creating a new element with vanilla JS	3/16
The difference between attributes and properties in vanilla JS	3/12
The Element.style.cssText property in vanilla JS	2/1

2020

Nodes vs Elements in the DOM	11/20
How to check if an element contains another one with the vanilla JS Node.contains() method	9/3
How to replace an element and its content using vanilla JS	6/20
JavaScript Fundamentals: Master the DOM! (Part 2)	5/11
https://htmldom.dev/	4/2

DOM

console
document
window
node
getters / setters

elements	https://developer.mozilla.org/en-US/docs/Web/API/Element
methods
properties
classes
data attributes

Element Properties and Methods

.children()
.childNodes()
.closest()	Starting with the Element itself, the closest() method traverses parents (heading toward the document root) of the Element until it finds a node that matches the provided selectorString. Will return itself or the matching ancestor. If no such element exists, it returns null.
.createRange()
.dispatchEvent()	Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
Element.classList()	The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.
.firstChild()
.firstElementChild()	The ParentNode.firstElementChild read-only property returns the object's first child Element, or null if there are no child elements.
.getElementbyId()	The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
.lastChild()
.lastElementChild()	The ParentNode.lastElementChild read-only property returns the object's last child Element or null if there are no child elements.
.innerHTML()	The Element property innerHTML gets or sets the HTML or XML markup contained within the element.
.innerText()	The innerText property of the HTMLElement interface represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
.insertAdjacentHTML()	The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.
.insertAdjacentText()	'beforebegin': Before the element itself. 'afterbegin': Just inside the element, before its first child. 'beforeend': Just inside the element, after its last child. 'afterend': After the element itself.
.nextSibling()	The Node.nextSibling read-only property returns the node immediately following the specified one in their parent's childNodes, or returns null if the specified node is the last child in the parent element.
.nextElementSibling()	The NonDocumentTypeChildNode.nextElementSibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.
.outerHTML()
.parentNode()
.parentElement()
.previousSibling()
.previousElementSibling()
.remove()
.textContent()
.querySelector()	The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
.querySelectorAll()

Attributes

.dataset()
.getAttribute()
.hasAttribute()
.removeAttribute()	The Element method removeAttribute() removes the attribute with the specified name from the element.
.setAttribute()	Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

HTML

.appendChild()	The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).
.cloneNode()
.createElement()	In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.
.insertAdjacentElement()