Phân biệt Javascript DOM Element và jQuery Object

Rate this post

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.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...