Skip to main content

DOM Manipulation

We can split up DOM Manipulation into 3 main categories and 2 supplementary categories:

Selecting Elements​

  • getElementById() – select an element by id.
  • getElementsByName() – select elements by name.
  • getElementsByTagName() – select elements by a tag name.
  • getElementsByClassName() – select elements by one or more class names.
  • querySelector() – select elements by CSS selectors.

Traversing Elements​

  • Get the parent element – get the parent node of an element.
  • Get child elements – get children of an element.
  • Get siblings of an element – get siblings of an element.

Manipulating elements​

  • createElement() – create a new element.
  • appendChild() – append a node to a list of child nodes of a specified parent node.
  • textContent – get and set the text content of a node.
  • innerHTML – get and set the HTML content of an element.
  • innerHTML vs. createElement – explain the differences between innerHTML and createElement when it comes to creating new elements.
  • DocumentFragment – learn how to compose DOM nodes and insert them into the active DOM tree.
  • insertBefore() – insert a new node before an existing node as a child node of a specified parent node.
  • insertAfter() helper function – insert a new node after an existing node as a child node of a specified parent node.
  • append() – insert a node after the last child node of a parent node.
  • prepend() – insert a node before the first child node of a parent node.
  • insertAdjacentHTML() – parse a text as HTML and insert the resulting nodes into the document at a specified position.
  • replaceChild() – replace a child element by a new element.
  • cloneNode() – clone an element and all of its descendants.
  • removeChild() – remove child elements of a node.

Working with Attributes​

  • setAttribute() – set the value of a specified attribute on a element.
  • getAttribute() – get the value of an attribute on an element.
  • removeAttribute() – remove an attribute from a specified element.
  • hasAttribute() – check if an element has a specified attribute or not.

Manipulating Element’s Styles​

  • style property – get or set inline styles of an element.
  • getComputedStyle() – return the computed style of an element.
  • className property – return a list of space-separated CSS classes.
  • classList property – manipulate CSS classes of an element.
  • Element’s width & height – get the width and height of an element.

Resources​