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.