manipulando a dom

dom.js

// document.getElementById("id")
let divContainerPiano = document.getElementById("piano-container");
console.log(divContainerPiano);

// document.getElementsByTagName("tagName")
let allLiTag = document.getElementsByTagName("li");
console.log(allLiTag);

// // document.createElement("name")
const newH1 = document.createElement("h1");
newH1.textContent = "Olá, Teclado!";
newH1.style.color = "#FFF";
newH1.style.textAlign = "center";

const divPiano = document.getElementById("piano");
const divPianoContainer = document.getElementById("piano-container");

divPiano.insertBefore(newH1, divPianoContainer);

// document.querySelector("seletor css")
const head = document.querySelector("head");
console.log(head);

const divPiano = document.querySelector("#piano");
console.log(divPiano);

const audios = document.querySelector(".audios");
console.log(audios);

const noExist = document.querySelector("noExist");
console.log(noExist); // undefined

// document.querySelectorAll(seletor css)
const allLis = document.querySelectorAll("li");
console.log(allLis);

const divsWithClassWhite = document.querySelectorAll(".white");
console.log(divsWithClassWhite);

const noExists = document.querySelectorAll("noExists");
console.log(noExists); // NodeList []