Bạn hãy xem những lời giải thích trong code dưới đây và hãy chạy lại code để thực nghiệm nghé.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://saophaixoan.net</title>
</head>
<body>
<h1 id="id1">Thực hành lấy 1 phần tử trong cây DOM để tương tác</h1>
<script>
//1. khai báo biến để nhận phần tử html
var objH1_01 = document.getElementById("id1"); // lấy theo ID
//2. Ghi log ra để xem kết quả
console.log(objH1_01); //lệnh này xem nội dung thẻ ở dạng html
console.dir(objH1_01); // lệnh này xem cấu trúc đối tượng dạng cây gồm các thuộc tính và phương thức.
//3: Cách khác để lấy 1 phần tử
// dùng querySelector: cách chọn giống cách viết trong css
var objH1_02 = document.querySelector('h1');
var objH1_03 = document.querySelector('#id1');
console.log("Lấy node theo cách dùng querySelector");
console.dir(objH1_02);
console.dir(objH1_03);
</script>
</body>
</html>