TUT: Tìm hiểu DOM HTML với JavaScript

DOM HTML - Làm thế nào để lấy 1 phần tử HTML vào biến?

JavaScript - JQuery 2020-09-02

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>