getElementsByTagName and getElementsByClassName returns HTMLCollection and not NodeList.
HTMLCollection is automatically updated if there’s a change happened to DOM.
Creating Elements
Inserting Elements
insertAdjacentHTML: parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.
Position
Details
beforebegin
Before the element. Only valid if the element is in the DOM tree and has a parent element.
afterbegin
Just inside the element, before its first child.
beforeend
Just inside the element, after its last child.
afterend
After the element. Only valid if the element is in the DOM tree and has a parent element.
prepend(), append(), after(), and before() methods: inserts a set of Node objects or string objects. For these four methods, String objects are inserted as equivalent Text nodes.
prepend(): before the first child of the Element.
append(): after the last child of the Element.
after() inserts in the children list of the Element’s parent, just after the Element. (As a sibling)
before()inserts in the children list of this Element’s parent, just before this Element. (As a sibling)
appendChild() adds a node to the end of the list of children of a specified parent node.
insertBefore(): inserts a node before a reference node as a child of a specified parent node.
Deleting Elements
remove(): removes the element from the DOM.
removeChild() method of the Node interface removes a child node from the DOM and returns the removed node.
Replacing Elements
replaceChild: replaces a child node within the given (parent) node.
Styles
Changing styles using JavaScript modifies inline style.
CSS attributes must be in camelCase without spaces or hyphen.
Reading styles
Accessing styles values using dot notation works only for attributes set by the code itself.
To access CSS styles we can use getComputedStyle() method.
parseFloat can be used to get CSS value without the unit.
Setting custom style properties (variables) using setProperty()
Attributes
Non-standard Attributes can’t be accessed directly, instead getAttribute should be used.
src and href attributes returns the absolute URLs if they are accessed directly and the relative if the it’s accessed using getAttribute.
The Element.attributes property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap, a key/value pair of strings that represents any information regarding that attribute.
Data Attributes
The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-) on elements.
Element.children: all child elements of an element.
Element.firstElementChild andElement.lastElementChild: returns an element’s first/last child Element, or null.
Node.childNodes, Node.firstChild, Node.lastChild: returns all child nodes, including non-element nodes like text and comment nodes.
Upwards (parents)
Node.parentNode returns the parent of the specified node in the DOM tree.
Document and DocumentFragment nodes can never have a parent, so parentNode will always return null. It also returns null if the node has just been created and is not yet attached to the tree.
Node.parentElement returns the DOM node’s parent Element, or null.
Element.closest() traverses the element and its parents (upwards) until it finds a node that matches the specified CSS selector. It returns the closest ancestor element, the element itself or null.
Opposite of querySelector.
Sideways (siblings)
Only direct siblings can be accessed.
Element.previousElementSibling and Element.nextElementSibling: returns the Element immediately prior to / following the specified one in its parent’s children list.
Node.previousSibling and Node.nextSibling returns the node immediately preceding / following the specified one in its parent’s childNodes list.
These four methods return null if the specified node is the first in that list.
To get all siblings, including the node itself we can use Node.parentElement.children.
Traverse the DOM tree using querySelector() and querySelectorAll()