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

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

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

onmouseout: 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.

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

onkeypress: 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

Tạo vào 2019-07-03 14:16:10, Cập nhật 1 năm trước
TuTriThuc.com TuTriThuc.com Theo dõi 1
Chia sẻ Tương tác với DOM trong Javascript tới bạn bè để mọi người cùng đọc nhé !
Bình luận
Top phản hồi
Đang tải bình luận bài viết Phản hồi bài viết Tương tác với DOM trong Javascript
Gửi đi
Bạn đang đọc bài viết Tương tác với DOM trong Javascript , hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !
34873
0.03450608253479