Việc phân biệt đối tượng tác động của Javascript là rất quan trọng. Trong bài viết này, Code Tốt xin chia sẻ cách chúng ta phân biệt và sắp xếp các đối tượng này.
Javascript DOM Element
Javascript DOM Element là các element mà bạn có thể gọi ra được trên trình duyệt thông qua cú pháp document.get… với một trong các tình huống sau đây:
document.getElementById
Câu này sẽ return về 1 Object duy nhất (vì đối chiếu với CSS, trên website chỉ nên có 1 ID duy nhất)
Các câu lệnh sau thì sẽ return về tập hợp các Object:
document.getElementsByClassName
Tìm các element có class tương ứng.
document.getElementsByTagName
Tìm các element có <tag> tương ứng, ví dụ <p> hoặc <a>
Các câu lệnh tương tự khác cũng có thể sử dụng:
document.querySelector
Tìm các element nhưng sẽ chỉ trả về element đầu tiên elem[0]
document.querySelectorAll
Tìm tất cả các element và trả về một danh sách
Hình thức query dạng này cũng rất phong phú, bạn có thể gọi:
document.querySelectorAll('.class')
document.querySelectorAll('[data-attribute]')
document.querySelectorAll('[data-attribute="sample"]')
Bạn có thể tham khảo danh sách các cách gọi DOM Elements trong Javascript ở đây.
jQuery Object
Khác với Javascript DOM Element, jQuery Object có cách thức gọi đơn giản hơn nhiều:
.find()
Giá trị bên trong có thể là .class, #id hoặc [data-attribute].
Chuyển đổi 1 Javascript DOM Element sang jQuery Object
Cách thức không quá phức tạp, ví dụ ta tìm thuộc tính [data-modal="modal-class-name"] của <button class="button-click"> để gọi modal ra bằng jQuery API như sau:
// Modal lúc này chưa là jQuery Object
var modal = document.querySelector('.button_click');
var modalName = modal.getAttribute('data-modal');
var $modal = $(modalName);
// Modal lúc này có thể nhận API của jQuery
$modal.fadeIn();
Phân biệt Javascript DOM Elements và jQuery Objects
Có một điều mà rất nhiều developer dường như bỏ qua và cũng sẽ dễ mắc phải, đó là việc xác định đâu là DOM Elements và đâu là jQuery Object.
Chẳng hạn, bạn có thể nghĩ rằng document.getElementByID(‘#sample’) có thể addClass() nếu không check kĩ gán biến var ban đầu.
Vậy làm thế nào bạn có thể xử lý tình huống này?
Cách tốt nhất, là ngay khi bạn và các thành viên trong nhóm thực hiện đặt biến var, chúng ta nên quy ước:
- Nếu là DOM Element, tên sẽ có định dạng bình thường.
Ví dụ:var modal = document.querySelector('.modal'); - Nếu là jQuery Object, tên sẽ có thêm kí tự $ ở trước.
Ví dụ:var $modal = $el.find('.modal');
Nếu quy ước đó được mọi người thực thi, việc xác định các thuộc tính tác động vào sẽ rất dễ dàng mà không cần kiểm tra var đang là loại gì, DOM hay Object nữa.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
