NIIT - ICT HÀ NỘI

Kiến thức lập trình

DOM Selector trong JavaScript

  • Tác giả NIIT - ICT HANOI

  • Ngày đăng 17/ 06/ 2020

  • Bình luận 0 Bình luận

Để thao tác với DOM trong JavaScript thì chúng ta cũng phải nhắm được đến (select) DOM đấy đã đúng không nào.

Cũng giống như cô giáo muốn gọi học sinh lên bảng để trả bài thì phải bắt đầu dò danh sách và gọi tên học sinh đó.

Quá trình thao tác với DOM trong JavaScript cũng như vậy.

Bài hướng dẫn này mình sẽ hướng dẫn bạn sử dụng DOM Selector để thao tác với phần tử DOM cụ thể trong JavaScript.

 

DOM Selector trong JavaScript

 

DOM Selector trong JavaScript

 

#1. Cách select đến các DOM phổ biến hàng đầu

 

Các phần tử HTML hàng đầu có thể được truy câp / select trực tiếp bằng thuộc tính document. 

Ví dụ:

    + Để chọn đến phần tử <html> thì chúng ta có thể sử dụng thuộc tính document.documentElement

    + Để chọn đến phần tử <head> thì chúng ta có thể sử dụng document.head

    + Tương tự, phần tử <body> có thể truy cập bằng cách sử dụng document.body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Select Topmost Elements</title>
</head>
<body>
    <script>
    // In ra giá trị của thuộc tính lang trong phần tử html
    document.write(document.documentElement.getAttribute("lang")); // Kết quả: en
    document.write("<br>");
    
    // Thiết lập background cho phần tử body
    document.body.style.background = "yellow";
    
    // In ra tên của thẻ con đầu tiên nằm trong phần tử head
    document.write(document.head.firstElementChild.nodeName); // Kết quả: meta
    </script>
</body>
</html>

Nhưng, hãy cẩn thận. Nếu bạn sử dụng document.body trước thẻ <body> thì nó sẽ trả về null thay vì phần tử body.

Bởi vì, tại thời điểm script được thực thi, thẻ <body> chưa được trình duyệt phân tích.

Có nghĩa là, tại thời điểm bạn gọi đến body thì nó chưa tồn tại. Vì thế nó sẽ trả về null.

Hãy thử chạy ví dụ sau để hiểu rõ vấn đề này hơn:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Document.body Demo</title>
    <script>
    alert("From HEAD: " + document.body);
    // Kết quả: null (Vì phần tử <body> chưa được trình duyệt phân tích)
    </script>
</head>
<body>
    <script>
    alert("From BODY: " + document.body); // Kết quả: HTMLBodyElement
    </script>
</body>
</html>

 

#2. Cách select đến các DOM theo ID

 

Bạn có thể chọn một phần tử dựa trên ID duy nhất của nó bằng phương thức getElementById(). Đây là cách dễ nhất để tìm một phần tử HTML trong cây DOM.

Ví dụ sau đây chọn và tô sáng một phần tử có thuộc tính ID id = 'niithanoi'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chọn Phần tử DOM bằng ID với JS</title>
</head>
<body>
    <p id="niithanoi">Muốn học lập trình chất lượng cao thì đến NIIT - ICT Hà Nội</p>
    <p>Đây là một đoạn văn bản thông thường</p>

    <script>
    // Chọn phần tử có id là niithanoi
    var match = document.getElementById("niithanoi");
     
    // Thêm background cho phần tử vừa lấy được
    match.style.background = "red";
    </script>
</body>
</html>

Phương thức getElementbyID() sẽ trả về phần tử dưới dạng một đối tượng nếu tìm thấy phần tử phù hợp hoặc null nếu không tìm thấy phần tử phù hợp nào.

Lưu ý: Bất kỳ phần tử HTML nào cũng có thể có thuộc tính id. Giá trị của thuộc tính này phải là duy nhất trong một trang, tức là không có hai phần tử nào trong cùng một trang có thể có cùng một ID.

 

#3. Cách select đến các DOM theo tên class

 

Tương tự, bạn có thể sử dụng phương thức getElementsByClassName() để chọn tất cả các phần tử có tên class cụ thể.

Phương thức này trả về một đối tượng giống như mảng của tất cả các phần tử con có tất cả các tên lớp đã cho. Hãy xem ví dụ sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chọn phần tử DOM theo tên class</title>
</head>
<body>
    <p class="test">Đây là một đoạn văn bản</p>
    <div class="block test">Đây là một đoạn văn bản khác.</div>
    <p>Đây là một đoạn văn bản khác tiếp theo</p>    

    <script>
    // Chọn đến phần tử có class là test
    var matches = document.getElementsByClassName("test");
        
    // Hiển thị số lượng phần tử có class test
    document.write("Số phần tử có class test: " + matches.length);
     
    // In đậm text của phần tử đầu tiên chọn được
    matches[0].style.fontWeight = "bold";
        
    // In nghiêng phần tử cuối cùng chọn được
    matches[matches.length - 1].style.fontStyle = "italic";
        
    // Thêm background màu đỏ cho các phần tử bằng vòng lặp
    for(var e in matches) {  
        matches[e].style.background = "red";
    }
    </script>
</body>
</html>

 

#4. Cách select đến các DOM theo tên thẻ

 

Bạn cũng có thể chọn các phần tử HTML theo tên thẻ bằng phương thức getElementsByTagName(). Phương thức này cũng trả về một đối tượng giống như mảng của tất cả các phần tử con với tên thẻ đã cho.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chọn phần tử DOM theo tên thẻ</title>
</head>
<body>
    <p>Đây là một đoạn văn bản</p>
    <div class="test">Đây là một đoạn văn bản khác</div>
    <p>Đây lại là một đoạn văn bản khác nữa</p>   
 
    <script>
    // Chọn tất cả các phần tử p
    var matches = document.getElementsByTagName("p");
        
    // In ra số lượng phần tử p chọn được
    document.write("Number of selected elements: " + matches.length);
     
    // Thêm màu nền cho từng phần tử p bằng vòng lặp
    for(var e in matches) {  
        matches[e].style.background = "yellow";
    }
    </script>
</body>
</html>

 

#5. Cách select đến các DOM với CSS Selector

 

Bạn có thể sử dụng phương thức querySelectorAll() để chọn các phần tử phù hợp với CSS Selector được chỉ định.

CSS Selector cung cấp một cách rất mạnh mẽ và hiệu quả để chọn đến chính xác các phần tử HTM.

Hãy xem ví dụ bên dưới đây để hiểu thêm về làm này.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chọn phần tử DOM theo CSS Selector</title>
</head>
<body>
    <ul>
        <li>Lập trình giỏi</li>
        <li class="gach">Bạn gái xinh</li>
        <li>Máy tính xịn</li>
    </ul>
        
    <script>
    // Chọn đến tất cả phần tử li
    var matches = document.querySelectorAll("ul li");
     
    // In ra số lượng phần tử li chọn được
    document.write("Number of selected elements: " + matches.length + "<hr>")
     
    // In ra nội dung bên trong các thẻ li chọn được
    for(var e of matches) {  
        document.write(e.innerHTML + "<br />");
    }
     
    // Gạch đi phần tử đầu tiên có class là gach
    matches = document.querySelectorAll("ul li.gach");
    matches[0].style.textDecoration = "line-through";
    </script>
</body>
</html>

Lưu ý: Phương thức querySelectorAll() cũng hỗ trợ các pesudo class như: First-child , :last-child , :hover, v.v. Nhưng, đối với các phần tử giả CSS như ::before, ::after, ::first-line, vv phương thức này luôn trả về một danh sách trống.

Thực tế: Khi học lập trình web sâu hơn / làm web thực tế bạn sẽ học sử dụng thư viện jQuery để thao tác với DOM dễ dàng hơn rất nhiều. Trong bài viết ngắn này mình không có đủ thời gian để giới thiệu tới. Để học đầy đủ hơn thì bạn có thể tham gia các Khóa học Java Web Full stack hay Khóa học PHP Web Full stack tại NIIT.

 

Chúc mừng bạn đã biết thêm về DOM Selector trong JavaScript

 

Như vậy là qua bài viết này, bạn đã hiểu về DOM Selector trong JavaScript. Hiểu cơ bản cách nhắm đến các phần tử DOM theo 5 cách.

Những bài tiếp theo chúng ta sẽ học cách thao tác thêm style, lấy / thiết lập các thuộc tính, ... cho phần tử DOM select được đó.

Chúc bạn học tốt.

 

---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI

Dạy học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!

Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT: 02435574074 - 0914939543 - 0353655150 

Email: hello@niithanoi.edu.vn

Website: https://niithanoi.edu.vn

Fanpage: https://facebook.com/NIIT.ICT/

 

#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python

Tags
Bài viết liên quan
11/06/2020
  • 0
Chi tiết
DOM là gì?

Trong những bài tiếp theo bạn sẽ được học về cách sử dụng JavaScript để thao tác với các phần tử DOM. Nhưng trước tiên,...

Xem thêm
 
Chat với chúng tôi