JavaScript Refactors

dom-selection-manipulation.js

// Refactor to use `querySelector()` instead

document.getElementsByClassName("message")[0].innerHTML = 'Hello World'

// Solution
//   `querySelector()` will select the first item it finds

document.querySelector(".message").innerHTML

// ---

// Refactor to use `querySelectorAll()` instead

document.getElementsByTagName("span")

// Solution
//   `querySelectorAll()` will select the all matching items it finds
//   Using `querySelector()` and `querySelectorAll()` is common practice since jQuery made selection by CSS query popular

document.querySelectorAll("span")

// ---

// Refactor to use `.classList` instead

var messageDiv = document.querySelector('.message');
messageDiv.setAttribute("class", "message end-message");

// Solution
//  Using `.classList` we can ensure we are not overridding any prior `class` on the element

var messageDiv = document.querySelector('.message');
messageDiv.classList.add("message", "end-message");

ternary.js

// Refactor the following to use a ternary operator instead

if (message) {
  document.getElementsByClassName("message")[0].innerHTML = message
} else {
  document.getElementsByClassName("message")[0].innerHTML = "Current Player: " + currentPlayer
}

// Solution

document.getElementsByClassName("message")[0].innerHTML = message ? message : "Current Player: " + currentPlayer