document.querySelector

  • JavaScript can use CSS Selectors to reference an element on the page
  • The object you get represents an HTML element
  • You can access properties of the object to get information
  • You can overwrite some properties to make changes
  • You can call methods to get additional info
<div class="my-panel">
    <header>Panel Title</header>
</div>
const myPanelHeader = document.querySelector(".my-panel header");
const panelTitle = myPanelHeader.innerText;
myPanelHeader.innerText = panelTitle.toUpperCase();
myPanelHeader.parentElement.getAttribute("class");

8 / 12