7.5 KiB

Raw Blame History

DOM

Glossary

Event Delegation - Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.

Node API

Here's a list of the essential and more common DOM Node APIs. It is important to know how to traverse and manipulate the DOM in vanilla JS without jQuery.

Properties

Node.childNodes - Returns a live NodeList containing all the children of this node. NodeList being live means that if the children of the Node change, the NodeList object is automatically updated.
Node.firstChild
Node.lastChild
Node.nextSibling - Returns a Node representing the next node in the tree, or null if there isn't such a node.
Node.nodeName - DIV, SPAN, etc. Note that it is in upper case in HTML documents, and has the same value as Element.tagName.
Node.parentNode - Returns a Node that is the parent of this node. If there is no such node, like if this node is the top of the tree or if it doesn't participate in a tree, this property returns null.
Node.parentElement - Returns an Element that is the parent of this node. If the node has no parent, or if that parent is not an Element, this property returns null.
Node.previousSibling - Returns a Node representing the previous node in the tree, or null if there isn't such a node.
Node.textContent - Returns / Sets the textual content of an element and all its descendants.

Methods

Node.appendChild(node) - Adds the specified node argument as the last child to the current node. If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
Node.cloneNode(node) - Clone a Node, and optionally, all of its contents. By default, it clones the content of the node.
Node.contains(node) - Returns a Boolean value indicating whether a node is a descendant of a given node or not.
Node.hasChildNodes() - Returns a Boolean indicating if the element has any child nodes, or not.
Node.insertBefore(newNode, referenceNode) - Inserts the first Node before the reference node as a child of the current node. If referenceNode is null, the newNode is inserted at the end of the list of child nodes.
Node.removeChild(node) - Removes a child node from the current element, which must be a child of the current node.
Node.replaceChild(newChild, oldChild) - Replaces one child node of the specified node with another node.

Element API

Here's a list of the essential and more common DOM Element APIs. It is important to know how to traverse and manipulate the DOM in vanilla JS without jQuery.

Properties

Element.attributes - Returns a NamedNodeMap object containing the assigned attributes of the corresponding HTML element.
Element.classList - Returns a DOMTokenList containing the list of class attributes.
- DOMTokenList.add(String [, String]) - Add specified class values. If these classes already exist in attribute of the element, they are ignored.
- DOMTokenList.remove(String [, String]) - Remove specified class values.
- DOMTokenList.toggle(String [, force]) - Toggle specified class value. If second argument is present and evaluates to true, add the class value, else remove it.
- DOMTokenList.contains(String) - Checks if specified class value exists in class attribute of the element.
Element.className - A DOMString representing the class of the element.
Element.id
Element.innerHTML - Returns a DOMString representing the markup of the element's content or parse the content string and assigns the resulting nodes as children of the element.
Element.tagName - DIV, SPAN, etc. Note that it is in upper case in HTML documents, and has the same value as Node.nodeName.

Methods

EventTarget.addEventListener(type, callback, options) - Registers an event handler to a specific event type on the element. Read up more on the options here.
EventTarget.removeEventListener(type, callback, options) - Removes an event listener from the element. Read up more on the options here.
Element.closest(selectors) - Returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.
Element.getElementsByClassName(classNames)- Returns a live HTMLCollection that contains all descendants of the current element that possess the list of classes given in the parameter.
Element.getElementsByTagName(tagName) - Returns a live HTMLCollection containing all descendant elements, of a particular tag name, from the current element.
Element.querySelector(selectors) - Returns the first Node which matches the specified selector string relative to the element.
Element.querySelectorAll(selectors) - Returns a NodeList of nodes which match the specified selector string relative to the element.
ChildNode.remove() - Removes the element from the children list of its parent. TODO: Check whether it's Element or ChildNode.
Element.setAttribute(attrName, value) - Sets the value of a named attribute of the current node.
Element.removeAttribute(attrName) - Removes the named attribute from the current node.

Document API

document.getElementById(id) - An Element object, or null if an element with the specified ID is not in the document.

Window/Document Events

document.addEventListener('DOMContentLoaded', callback)
- The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. Similar to jQuery.ready() but different because $.ready will execute immediately if the DOMContentLoaded event has already fired.
- This corresponds to document.readyState === 'interactive'.
window.onload = function() {}
- window's load event is only fired after the DOM and all assets have loaded.
- This corresponds to document.readyState === 'complete'.

Questions

What's the difference between Node.children and Node.childNodes?

Node.children returns a live HTMLCollection of the child elements of Node. Node.childNodes returns a NodeList, an ordered collection of DOM nodes that are children of the current Element. childNodes includes all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use Node.children instead.

What's the difference between NodeList and HTMLCollection?

A NodeList can contain any node type, but an HTMLCollection is supposed to only contain Element nodes. HTMLCollection is always live and is a superset of NodeList. NodeList need not be live.

How do you convert an HTMLCollection or NodeList into an array?

const nodelist = document.querySelectorAll('div');
// Array.from
const divArray = Array.from(nodelist);
// Array.prototype.slice
const divArray2 = Array.prototype.slice.call(nodelist); // or .apply
// ES2015 Spread
const divArray3 = [...nodeList];

7.5 KiB Raw Blame History

DOM