Hướng dẫn JavaScript DOM với ví dụ

Mục lục:

Anonim

DOM trong JavaScript là gì?

JavaScript có thể truy cập tất cả các phần tử trong một trang web bằng cách sử dụng Mô hình đối tượng tài liệu (DOM). Trên thực tế, trình duyệt web tạo ra một DOM của trang web khi trang được tải. Mô hình DOM được tạo dưới dạng một cây gồm các đối tượng như sau:

Cách sử dụng DOM và Sự kiện

Sử dụng DOM, JavaScript có thể thực hiện nhiều tác vụ. Nó có thể tạo ra các yếu tố và thuộc tính mới, thay đổi các yếu tố và thuộc tính hiện có và thậm chí loại bỏ các yếu tố và thuộc tính hiện có. JavaScript cũng có thể phản ứng với các sự kiện hiện có và tạo các sự kiện mới trong trang.

Ví dụ getElementById, innerHTML

  1. getElementById: Để truy cập các phần tử và thuộc tính có id được đặt.
  2. innerHTML: Để truy cập nội dung của một phần tử.

Hãy tự mình thử Ví dụ này:

 DOM !!! 

Chào mừng


Đây là thông báo chào mừng.



Công nghệ


Đây là phần công nghệ.

Ví dụ về trình xử lý sự kiện

  1. createElement: Để tạo phần tử mới
  2. removeChild: Xóa một phần tử
  3. Bạn có thể thêm một trình xử lý sự kiện vào một phần tử cụ thể như sau:
 document.getElementById(id).onclick=function(){lines of code to be executed}

HOẶC LÀ

document.getElementById(id).addEventListener("click", functionname)

Hãy tự mình thử Ví dụ này:

 DOM !!!