Please enable JavaScript.
Coggle requires JavaScript to display documents.
Common DOM operations
Click here to visit codepen collection - Coggle…
Create
HTML Element
document.createElement(tagName)
This method creates an HTMLElement of the type mentioned by tagName. tagName is case-insensitive for HTML but case-sensitive for XML.
-
-
Traverse
By characteristics
Element.getElementsByClassName() / Document.getElementsByClassName()
Accepts className and returns HTMLCollection.
Element.getElementsByTagName(tagName) / Document.getElementsByTagName(tagName)
This methods accepts tagName as a String and returns an HTMLCollection for elements having the tag
Document.getElementById(id)
This method accepts id as string and returns an element with matching id.
Element.querySelector() / Document.querySelector() / ParentNode.querySelector()
Accepts css selector query and return first matching element
Element.querySelectorAll() / Document.querySelectorAll() / ParentNode.querySelectorAll()
Accepts css selector query and returns NodeList
-
Modify
Remove
Single node
-
ChildNode.replaceWith()
If we do not pass any parameter to replaceWith() method then it removes the node.
Multiple nodes
Range.deleteContents()
We need to use Range.selectNodeContents() to select entire content of a node. Then use Range.deleteContents() to wipe it out
-
Replace
Single Node
Node.replaceChild(newNode, referenceNode)
referenceNode will be replaced with newNode.
There are 2 variation depending on whether newNode already exists in the document or not.
ChildNode.replaceWith(newNode)
There are 2 variations depending on whether newNode exists in the document or not.
Multiple Node
ParentNode.replaceChildren(...nodesOrDOMStrings)
This method replaces all children of a parent node with given set of nodes and dom strings
Clone
Node.cloneNode(deep)
with deep = false, children are not cloned along with parent.
with deep = true, children are cloned along with parent
By default deep = false
Range.cloneContents()
cloneContents() returns the documentFragment which can be appended later.
We need to use Range.selectNode() along with this.
Insert
At the beginning
ParentNode.prepend(...nodesOrDOMStrings)
This method adds nodes or strings at the beginning of the children of a given node. It is quite useful as it takes mixed types of arguments.
Node.insertBefore(newNode, referenceNode)
referenceNode is a mandatory argument else there will be an error.
If referenceNode is null or undefined, then newNode is appended at the end of the child list of parentNode.
-
Element.insertAdjacentElement(position, element)
Position should be 'afterbegin'
Element.insertAdjacentHTML(position, HTMLString)
Position should be 'afterbegin'
-
At the end
ParentNode.append(...nodesOrDomString)
Similar to prepend, we can pass number of nodes or text strings or combination of both.
-
Element.insertAdjacentHTML(position, HTMLString)
position should be 'beforeend'
Element.insertAdjacentElement(position, Node)
position should be 'beforeend'
Node.insertBefore()
This method should be used along
with Element.lastElementChild() and Element.nextElementSibling()
Bunch of items together
new DocumentFragment()
We can use methods like append(), prepend(), appendChild(), insertBefore() etc. to add nodes to documentFragment. And then we can append entire fragment to a specific node or document. Adding bunch of nodes with documentFragment saves us multiple reflow and repaints