DOM element trong JavaScript - truy xuất (tìm) đến phần tử HTML bất kỳ bằng id và class

xuất bản

Thông báo:

Cảm ơn bạn đã theo dõi QuangNinhBay.Com trong suốt thời gian qua.
Trong thời gian tới website sẽ update để bạn có trải nghiệm mượt mà hơn. Nội dung về thiết kế website cũng như các thủ thuật sẽ được đội ngũ QuangNinhBay.Com Update thường xuyên hơn.
Xin cảm ơn!

Xin chào các bạn hôm nay chăm viết bài quá :)), mình tiếp tục chia sẻ đến mọi người một chút kiến thức nhỏ trong JavaScript mà mình biết nhé.

cụ thể trong bài viết này mình sẽ chia sẻ về DOM element trong JavaScript, truy xuất hay còn gọi lầ tìm đến phần tử HTML bất kỳ thông qua id và class nhé. ok lest go!

đầu tiên chúng ta hãy khởi tạo một file html cơ bản như demo dưới đây nhé:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sampleH1 {}
    </style>
</head>
<body>
    <!-- 
        DOM element: truy xuất (tìm) đến phần tử HTML bất kỳ
            - id
            - class
     -->
     <p id="sample" class="htl">QuangNinhBay.Com - Niềm Vui Là Chia Sẻ !</p>
     <div class="htl">Trần Tiến</div>
     <h1 id="sample2">abc xyz</h1>
     <h1 class="sampleH1">Dom JavaScript</h1>
     <h1>Lập trình Java</h1>
     </body>
</html>

Mình sẽ nói chi tiết bằng comment ở trên từng đoạn code trong code dưới đây nhé:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sampleH1 {}
    </style>
</head>
<body>
    <!-- 
        DOM element: truy xuất (tìm) đến phần tử HTML bất kỳ
            - id
            - class
     -->
     <p id="sample" class="htl">QuangNinhBay.Com - Niềm Vui Là Chia Sẻ !</p>
     <div class="htl">Trần Tiến</div>
     <h1 id="sample2">abc xyz</h1>
     <h1 class="sampleH1">Dom JavaScript</h1>
     <h1>Lập trình Java</h1>
     <script>
         //tìm phần tử HTML thông qua id là sample và gán giá trị vừa lấy được cho biến sample
         var sample = document.getElementById("sample");
         //log ra giá trị của sample (trả về 1 phần tử có id=sample)
         console.log(sample);
         // tìm phần tử HTML thông qua class là htl và gán giá trị vừa lấy được cho sample2
         var sample2 = document.getElementsByClassName("htl");
         //log ra giá trị của sample2 (trả về 1 mảng các phần tử có cùng tên class là htl)
         console.log(sample2);
         //log ra giá trị đầu tiên của mảng sample
         console.log(sample2[0]);
         //Vòng lặp for để lấy ra toàn bộ giá trị của mảng sample2
         for (let index = 0; index < sample2.length; index++) {
             console.log(sample2[index]);
         }
         //tìm phần tử HTML thông qua tên thẻ và gán giá trị trả về cho biến h1
         var h1 = document.getElementsByTagName("h1");
         //log ra giá trị của h1 (trả về 1 mảng các phần tử h1)
         console.log(h1);
         //log ra giá trị của thẻ h1 đầu tiên trong mảng
         console.log(h1[0]);
         /*
            tìm phần tử HTML thông qua cú pháp selector của css 
            (ở đây là lấy thẻ có class là sampleH2) và gán giá trị 
            cho sampleH2
        */
        var sampleH2 = document.querySelector(".sampleH1");
         //log ra giá trị của sampleH1 (dùng querrySelector sẽ chỉ trả ra thẻ h1 đầu tiên tìm thấy)
        console.log(sampleH2);
         /*
            tìm phần tử HTML thông qua cú pháp selector của css 
            (ở đây lấy ra toàn bộ thẻ h1) và gán giá trị 
            cho sample3
            querrySelectorAll sẽ trả ra 1 mảng các phần tử h1
        */
        var sample3 = document.querySelectorAll("h1");
        //log ra giá trị có index = 2 của mảng sample3
         console.log(h1[2]);
     </script>
</body>
</html>

chúc các bạn học tập và làm việc tràn đầy năng lượng nhé.

có thắc mắc gì comment phía dưới mình sẽ giải đáp nhé!