JavaScript

Document Object Model

<div>
  <h1 id="main-heading">All about Dogs</h1>
  <h2>Dogs are an interesting species</h2>
  <p>
    Today, some dogs are used as pets, others are used to help humans do their work. They are a popular pet because they are usually playful, friendly, loyal and listen to humans. (Credit: Wikipedia)
  </p>
</div>

div {
  text-align: center;
}

img {
  width: 15rem;
}

p {
  text-align: left;
}

.details {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

let valueOfId = "";

const headingElement = document.getElementById(valueOfId);
console.dir(headingElement);


let valueOfId = "main-heading";

const headingElement = document.getElementById(valueOfId);
console.dir(headingElement);
