#15 JavaScript Code Snippets: DOM Manipulation

JavaScript

const element =
    document.getElementById("title");

console.log(element.textContent);

getElementById() returns the element with the matching id.

A

const element =
    document.querySelector(".box");

console.log(element.textContent);

querySelector() returns the first matching element.

const elements =
    document.querySelectorAll(".item");

console.log(elements.length);

querySelectorAll() returns all matching elements.

const cards =
 document.getElementsByClassName("card");

console.log(cards.length);

getElementsByClassName() returns all matching elements.

A
B

const elements =
 document.getElementsByTagName("p");

console.log(elements.length);

Returns all matching tag elements.

const box =
 document.getElementById("box");

box.innerHTML = "<span>Hello</span>";

console.log(box.innerHTML);

innerHTML returns HTML markup.

    Hello


const box =
 document.getElementById("box");

console.log(box.innerText);

innerText returns visible text.

    JavaScript


const box =
 document.getElementById("box");

console.log(box.textContent);

textContent returns all text content.

const box =
 document.getElementById("box");

box.textContent =
 "Hello";

console.log(box.textContent);

textContent treats everything as plain text.

Old


const title =
 document.getElementById("title");

title.textContent = "New";

console.log(title.textContent);

textContent updates the text inside the element.

const box =
 document.getElementById("box");

console.log(
 box.getAttribute("data-role")
);

getAttribute() returns the attribute value.

const box =
 document.getElementById("box");

box.setAttribute(
 "title",
 "Frontend"
);

console.log(
 box.getAttribute("title")
);

setAttribute() adds or updates an attribute.

const box =
 document.getElementById("box");

box.removeAttribute("title");

console.log(
 box.getAttribute("title")
);

The attribute no longer exists.

const box =
 document.getElementById("box");

console.log(
 box.hasAttribute("title")
);

hasAttribute() checks whether an attribute exists.

const box =
 document.getElementById("box");

console.log(
 box.dataset.user
);

data-user becomes dataset.user.

const element =
 document.createElement("div");

console.log(
 element.tagName
);

tagName returns the uppercase tag name in HTML documents.

const parent =
 document.getElementById("parent");

const child =
 document.createElement("span");

parent.appendChild(child);

console.log(
 parent.children.length
);

appendChild() adds a child node at the end.

const parent =
 document.getElementById("parent");

parent.append("JavaScript");

console.log(
 parent.textContent
);

append() can append text directly.

 B


const parent =
 document.getElementById("parent");

const child =
 document.createElement("span");

child.textContent = "A";

parent.prepend(child);

console.log(
 parent.firstElementChild.textContent
);

prepend() inserts at the beginning.

 
B


const list =
 document.getElementById("list");

const item =
 document.createElement("li");

item.textContent = "A";

list.insertBefore(
 item,
 list.firstElementChild
);

console.log(
 list.firstElementChild.textContent
);

insertBefore() inserts before the specified node.

const box =
 document.getElementById("box");

box.remove();

console.log(
 document.getElementById("box")
);

remove() deletes the element from the DOM.

 
A


const list =
 document.getElementById("list");

list.removeChild(
 list.firstElementChild
);

console.log(
 list.children.length
);

removeChild() removes the specified child node.

const box =
 document.getElementById("box");

box.classList.add("active");

console.log(
 box.classList.contains("active")
);

add() inserts the class into classList.

const box =
 document.getElementById("box");

box.classList.remove("active");

console.log(
 box.classList.contains("active")
);

remove() deletes the specified class.

const box =
 document.getElementById("box");

box.classList.toggle("active");

console.log(
 box.classList.contains("active")
);

toggle() adds the class if it does not exist.

const box =
 document.getElementById("box");

console.log(
 box.classList.contains("active")
);

contains() checks class existence.

const box =
 document.getElementById("box");

box.style.color = "red";

console.log(
 box.style.color
);

style.color returns the inline style value.

const box =
 document.getElementById("box");

box.style.display = "none";

console.log(
 box.style.display
);

display stores the assigned CSS value.

const box =
 document.getElementById("box");

box.style.visibility = "hidden";

console.log(
 box.style.visibility
);

visibility controls whether the element is visible.

const box =
 document.getElementById("box");

console.log(
 getComputedStyle(box).color
);

getComputedStyle() returns computed CSS values. Browsers typically return rgb(255, 0, 0), so avoid assuming exact formatting.

    


const child =
 document.getElementById("child");

console.log(
 child.parentElement.id
);

parentElement returns the parent DOM element.

    
    



const box =
 document.getElementById("box");

console.log(
 box.children.length
);

children includes only element nodes.

    A
    
B


const box =
 document.getElementById("box");

console.log(
 box.firstElementChild.tagName
);

firstElementChild returns the first child element.

    
    



const box =
 document.getElementById("box");

console.log(
 box.lastElementChild.tagName
);

lastElementChild returns the last child element.

  
  


const a =
 document.getElementById("a");

console.log(
 a.nextElementSibling.id
);

nextElementSibling returns the next sibling element.

  
  


const b =
 document.getElementById("b");

console.log(
 b.previousElementSibling.id
);

previousElementSibling returns the previous sibling element.

const div =
 document.createElement("div");

div.textContent = "JS";

const clone =
 div.cloneNode(true);

console.log(
 clone.textContent
);

cloneNode(true) creates a deep clone.

   


const parent =
 document.getElementById("parent");

const newNode =
 document.createElement("p");

parent.replaceChild(
 newNode,
 document.getElementById("old")
);

console.log(
 parent.firstElementChild.tagName
);

replaceChild replaces an existing node.

const box =
 document.getElementById("box");

box.insertAdjacentHTML(
 "beforeend",
 "<span>JS</span>"
);

console.log(
 box.children.length
);

insertAdjacentHTML inserts parsed HTML.

const fragment =
 document.createDocumentFragment();

console.log(
 fragment.nodeType
);

DocumentFragment nodeType is 11.

const items =
 document.getElementsByClassName("item");

console.log(
 items.constructor.name
);

getElementsByClassName returns an HTMLCollection.

const items =
 document.querySelectorAll(".item");

console.log(
 items.constructor.name
);

querySelectorAll returns a NodeList.

   



const items =
 document.getElementsByClassName("item");

const newDiv =
 document.createElement("div");

newDiv.className = "item";

document
 .getElementById("parent")
 .appendChild(newDiv);

console.log(items.length);

HTMLCollection is live and updates automatically.

   Text
   


const box =
 document.getElementById("box");

console.log(
 box.childNodes.length >
 box.children.length
);

childNodes includes text nodes. children includes only element nodes.

   


const box =
 document.getElementById("box");

const children =
 box.children;

box.appendChild(
 document.createElement("p")
);

console.log(
 children.length
);

children returns a live HTMLCollection. The length updates automatically.