Tương tác với DOM trong Javascript

Hiểu một cách đơn giản, thì tương tác với DOM trong javascript nghĩa là dùng javascript để tác động lên hệ thống giao diện đang hiển thị của trang HTML hiện tại, như là thay đổi nội dung, định dạng, xử lý sự kiện...

Truy xuất thành phần HTML bằng javascript

Để có thể thay đổi nội dung, định dạng, hay xử lý sự kiện của các thành phần trên trang web, trước hết, chúng ta cần phải truy xuất hay chọn tới các thành phần đó.

Chọn thành phần html thông qua tên id: document.getElementById('tên_id');

Ví dụ: 

Chọn thành phần html thông qua tên class: document.getElementsByClassName('tên_class');

Ví dụ: 

Lưu ý: khi chọn bằng tên class, chúng ta sẽ được một mảng các phần tử phù hợp.

Chọn thành phần html thông qua tên thẻ: document.getElementsByTagName("tên_thẻ");

Ví dụ: 

Chọn thành phần html thông qua bộ chọn css: document.querySelectorAll("css_selector");

Ví dụ: 

Ở ví dụ này, chúng ta thu được kết quả là đối tượng NodeList gồm 4 thẻ a nằm trong class menu.

Có thể nói, đây là cách hoàn hảo nhất để chọn các thành phần html, vì nó linh hoạt.

Xử lý nội dung bằng javascript

Xử lý content của một thẻ đầy đủ: .innerHTML

Ví dụ, chỉnh sửa nội dung:

Khi này, đoạn nội dung của thẻ a đầu tiên đã bị sửa thành New product

Ví dụ, lấy ra nội dung:

Khi này, ta đã lấy nội dung bên trong của thẻ a đầu tiên và in ra cửa sổ console, chính là đoạn chữ Sản phẩm mới

Xử lý thuộc tính của thẻ: 

Sửa giá trị của thuộc tính: .setAttribute("attribute_name", value);

Ví dụ: 

Trong ví dụ này, giá trị href của thẻ a đầu tiên đã được sửa lại là #1

Lấy giá trị của thuộc tính: .getAttribute("attribute_name");

Ví dụ:

Xử lý giá trị ô nhập dữ liệu

Cú pháp: .value

Ví dụ, lấy giá trị của ô nhập liệu

Trong ví dụ này, chúng ta đã lấy được giá trị của ô nhập số lượng sản phẩm đặt hàng.

Lưu ý: .value thường áp dụng cho các ô nhập dữ liệu từ người dùng như thẻ input, select, textarea...

Xử lý định dạng bằng javascript

Lấy ra giá trị định dạng: .style.tên_định_dạng;

Ví dụ: 

Trong ví dụ này, chúng ta đã lấy được màu chữ của thẻ a đầu tiên

Gắn giá trị cho định dạng: .style.color = giá_trị;

Ví dụ: 

Xử lý sự kiện bằng javascript

Bắt sự kiện: .addEventListener( event, function(){ //todo_somethings } );

Ví dụ: Bắt sự kiện click (nhấn chuột)

Ngoài sự kiện click, chúng ta còn có thể bắt được các sự kiện như bên dưới:

- dbclick: Nhấn đúp chuột 2 lần liên tiếp

- change: khi thay đổi giá trị của thuộc tính value

- mouseover: Khi vừa rê chuột vào

- mouseout: Khi vừa rời chuột đi ra ngoài phần tử

- mousemove: Khi re con trỏ chuột bên trong phần tử

- keydown: Khi thành phần đang được focus mà chúng ta nhấn xuống phím bất kỳ, nếu chúng ta giữ phím không thả lên, thì sự kiện sẽ được bắt nhiều lần cách nhau một khoảng thời gian rất ngắn.

- keyup: Khi thành phần đang được focus mà chúng ta nhả lên phím bất kỳ

- keypress: Khi thành phần đang được focus mà chúng ta nhấn phím bất kỳ

- paste: Khi dán nội dung vào thành phần

- copy: Khi copy nội dung từ thành phần

- cut: Cắt nội dung từ thành phần

- focus: Khi thành phần được focus, hiểu đơn giản, nghĩa là thành phần đang được thao tác.

- blur: Thành phần bị mất focus, khi đang được thao tác rồi lại bị mất thao tác vì lý do nào đó, có thể do nhấn chuột ra ngoài phạm vi