<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Momentum</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="greeting" class="hello">
<div>
<div>
<h1>did you find me?</h1>
</div>
</div>
</div>
<script>
let a = document.querySelector("#greeting div div h1");
console.log(a);
a.innerText = "I got you!";
console.log(a);
</script>
</body>
</html>
Expected console result :
<h1>did you find me?</h1>
<h1>I got you!</h1>
Actual result :
<h1>I got you!</h1>
<h1>I got you!</h1>
Can you explain why first console result has changed?
