Querying and updating the DOM using Javascript




Get Element By Id

const element = document.getElementById('page-banner');

Get Element By Class or Tag

// By Class
// Retrieves a list(html collection) of element with the same name
const elements = document.getElementsByClassName('title');

// By Tag 
// Retrieves a list(html collection) of element with the same name
const elements = document.getElementsByTagName('li');

Loop through an HTML collection

const el = document.getElementsByTagName('li');

// First convert the HTML collection to an array with Array.from()
Array.from(el).forEach(el => {
    console.log(el) // <li></li>
})

Get Element with querySelector

// returns one element
const el = document.querySelector('#book-list li:nth-child(2) .name');

console.log(el); // <span class="name">The Wise Man's Fear</span>

Get Element with querySelectorAll

// returns an Node list.
const books = document.querySelectorAll('#book-list .name');

books.forEach(book => {
    console.log(book.textContent);
})

Changing Text & HTML Content


Updating textContent

const books = document.querySelectorAll('#book-list .name');

books.forEach(book => {
    book.textContent += '(book title)'
})

Updating html
const books = document.querySelectorAll('#book-list .name');

books.forEach(book => {
    book.innerHTML += '<h3>Added a heading tag</h3>'
})

Nodes

const banner = document.querySelector('#page-banner');

// Get Node names
console.log(`#page-banner is nodeName: ${banner.nodeName}`) // #page-banner is nodeName: DIV

// Check for Child nodes
console.log(`#page-banner is hasChildNodes?: ${banner.hasChildNodes()}`) // #page-banner is hasChildNodes?: true

// Cloned Node with child nodes.
const clonedBanner = banner.cloneNode(true);
console.log(clonedBanner);

Traversing the DOM

const bookList = document.querySelector('#book-list');
console.log(bookList);

// Parent nodes
console.log('ParentNode is: ', bookList.parentNode)
console.log('ParentNode is: ', bookList.parentElement)
console.log('ParentNode is: ', bookList.parentElement.parentElement)

// Child Nodes
console.log('ChildNode is: ', bookList.childNodes)
console.log('ChildNode is: ', bookList.children)

// Siblings
console.log('Next sibling is: ', bookList.nextSibling)
console.log('Previous sibling is: ', bookList.nextElementSibling)
console.log('Next sibling is: ', bookList.previousSibling)
console.log('Previous sibling is: ', bookList.previousElementSibling)

// A more complex example combining some selectors.
bookList.previousElementSibling.querySelector('p').innerHTML += '<br /> Too cool for everyone else!'

Events

Using the addEventListener,

const h2 = document.querySelector('#book-list h2');

h2.addEventListener('click', function(e) {
    console.log('Event clicked', e.target)
})

// Delete li element example
const btns = document.querySelectorAll('#book-list .delete');

btns.forEach(btn => {
    btn.addEventListener('click', function(e) {
        const li = e.target.parentElement;
        console.log(li); // <li></li>
        console.log(li.parentNode) // <ul></ul>
        li.parentNode.removeChild(li);
    })
})

// Prevent default navigation when clicking a link.
const link = document.querySelector('#page-banner a');

link.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('Navigation to', e.target.textContent, 'was prevented')
})

// A beter way using event bubbeling
const list = document.querySelector('#book-list ul');
list.addEventListener('click', function(e) {
    if(e.target.className === 'delete') {
        const li = e.target.parentElement;
        list.removeChild(li);
    }
})

Forms


Selecting a form.

 document.forms['add-book'] // <form id="add-book"></form>

Create and add element to DOM

// add book-list form

const addForm = document.forms["add-book"];
const list = document.querySelector("#book-list ul");

addForm.addEventListener("submit", function(e) {
  e.preventDefault();

  const value = addForm.querySelector('input[type="text"').value;

  // create elements
  const li = document.createElement("li");
  const bookName = document.createElement("span");
  const deleteBtn = document.createElement("span");

  // append to document
  li.appendChild(bookName);
  li.appendChild(deleteBtn);
  list.appendChild(li);

  // Add text content
  bookName.textContent = value;
  deleteBtn.textContent = "delete";

  // add classes
  bookName.classList.add("name");
  deleteBtn.classList.add("delete");
});

Attributes

const book = document.querySelector('li:first-child .name')

// Get attribute name
item.getAttribute('class') // "name"

// set attribute value
item.setAttribute('class', 'newClass')

// check if element has any attributes
item.hasAttributes() // true

// check for specific attribute
item.hasAttribute('class') // true

// remove an attribute
item.removeAttribute('class')

Checkboxes & Change Events

// hide elements
const hideBox = document.querySelector("#hide");
hideBox.addEventListener("change", function(e) {
  if (hideBox.checked) {
    list.style.display = "none";
  } else {
    list.style.display = "initial";
  }
});

Create a Search Filter

// filter elements
const searchbar = document.forms["search-books"].querySelector("input");
searchbar.addEventListener("keyup", function(e) {
  const term = e.target.value.toLowerCase();
  const books = list.getElementsByTagName("li");

  Array.from(books).forEach(book => {
    const title = book.firstElementChild.textContent;
    title.toLocaleLowerCase().includes(term)
      ? (book.style.display = "block")
      : (book.style.display = "none");
  });
});

Add remove classes based on active tabs

const tabs = document.querySelector(".tabs");
const panels = document.querySelectorAll(".panel");
tabs.addEventListener("click", e => {
  if (e.target.tagName === "LI") {
    const targetPanel = document.querySelector(e.target.dataset.target);
    Array.from(panels).forEach(panel => {
      panel === targetPanel
        ? panel.classList.add("active")
        : panel.classList.remove("active");
    });
  }
});


Small App Example



Thanks for reading!