dom-trong-javascript-wolfactive-949x475
17/04/2020

DOM trong JS và cách thay thế Selector trong jQuery

Trong bài trước mình đã đề cập đến biến và kiểu dữ liệu trong JavaScript. Thì bài này minh sẽ đề cập đến DOM trong JavaScript và cách thay thế CSS Selector trong jQuery, các bạn sẽ có nhiều lựa chọn hơn trong việc lập trình mà không quá  phụ thuộc vào jQuery.

DOM trong JavaScript

Trước hết mình sẽ giải thích DOM là gì? Thực ra các bạn có thể hiểu đơn giản rằng để thao tác một trong các thẻ ở khung html . Thì trước hết chúng ta nên chọn thẻ đó để có thể thao tác bằng cách thông qua việc DOM. Nghĩa là các bạn chọn chính xác thẻ muốn thao tác để xử lý. Mình sẽ ví dụ thông qua 1 project đơn giản như sau: dom-trong-javascript-mau

Ở đây mình làm input số lượng hàng trong các web thương mại online. Mình sử dụng input type="number  nhưng mình muốn style lại đẹp và không sử dụng giao diện default của browser nên mình tạo 2 nút tăng và giảm sản phẩm bằng JavaScript. Ở đây như các bạn đã thấy mình DOM tới 3 thẻ tag trên khung html, để xử lý sau đó mình dùng if else để check điều kiện khi value của input là 1 thì khi nhấn button minus sẽ không giảm value của input mà ngược lại nhấn button plus thì value của input sẽ tăng lên. Vậy DOM rất tiện lợi như vậy tại sao đa mọi người lại phải jQuery để xử những tac vụ như thế này mặc dù jQuery hiện tại đã không còn được hỗ trợ ra phiên bản mới? Lý do một phần trong đó bởi CSS Slector mà jQuery hỗ trợ rất tiện trong việc xử lý DOM. Sau đây mình sẽ đề cập tới cách để dùng JavaScript thay thế cho vấn đề đó.

Cách thay thế CSS Selector trong jQuery

Theo như mọi người đã biết về CSS Selector của jQuery nếu mình không DOM tới input bằng id mình có thể DOM tới theo cách như sau.

 jQuery(document).ready({var input = jQuery('.product__quality input.input').val()});

Như các bạn đã thấy chỉ vậy chúng ta đã lấy được value của input trong khung html vậy JavaScript thì sẽ làm như sau:

var input = document.querySelector('.product__quality input.input').value;

Đấy vậy là chúng ta đã CSS Select thành công trong JavaScript. Mình rất mong nhận được sự góp ý từ các bạn.

Vui lòng chọn size trước khi đặt hàng (*)