Hướng dẫn selector trong javascript
|
Để 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. Show 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 #1. Cách select đến các DOM phổ biến hàng đầuCá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ử thì chúng ta có thể sử dụng thuộc tính document.documentElement + Để chọn đến phần tử thì chúng ta có thể sử dụng document.head + Tương tự, phần tử có thể truy cập bằng cách sử dụng document.body Nhưng, hãy cẩn thận. Nếu bạn sử dụng document.body trước thẻ 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ẻ 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: #2. Cách select đến các DOM theo IDBạ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 Ví dụ sau đây chọn và tô sáng một phần tử có thuộc tính ID id = 'niithanoi'. 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 classTươ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: #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. #5. Cách select đến các DOM với CSS SelectorBạ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. 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 JavaScriptNhư 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: Website: https://niithanoi.edu.vn Fanpage: https://facebook.com/NIIT.ICT/ #niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python |
