Thao tác DOM trong javascript là yếu tố quan trọng khi tạo ứng dụng web bằng HTML và JavaScript. Đó là quá trình tương tác với API DOM để thay đổi hoặc sửa đổi tài liệu HTML sẽ được hiển thị trong trình duyệt web. Tài liệu HTML này có thể được thay đổi để thêm hoặc xóa các phần tử, cập nhật các phần tử hiện có, sắp xếp lại các phần tử hiện có, v.v.
Bằng cách thao tác với DOM, chúng ta có thể tạo các ứng dụng web cập nhật dữ liệu trong trang web mà không cần làm mới trang và có thể thay đổi bố cục của trang mà không cần làm mới. Xuyên suốt tài liệu, các mục có thể bị xóa, di chuyển hoặc sắp xếp lại
Định nghĩa DOM và các khái niệm cơ bản
DOM trong thao tác dom trong javascript là viết tắt của Document Object Model. Mô hình Đối tượng Tài liệu [DOM] là một cấu trúc dạng cây minh họa mối quan hệ phân cấp giữa các phần tử HTML khác nhau. Có thể dễ dàng giải thích nó là một cây các nút do trình duyệt tạo ra. Mỗi nút có các thuộc tính và phương thức duy nhất có thể thay đổi bằng JavaScript
Một biểu diễn trực quan của cây DOM được hiển thị trong hình bên dưới
- Tài liệu là cốt lõi/nền tảng của DOM
- Phần tử gốc HTML là phần tử con của đối tượng tài liệu
- Các phần tử Body và Head là phần tử con của phần tử HTML và là anh em với nhau
- Phần tử tiêu đề là cha của nút văn bản. "my text" và phần tử con của phần tử head
- thẻ và thẻ h1 là con của phần tử body và là anh chị em với nhau
- Thuộc tính href là phần tử con của thẻ a[anchor]
DOM được gọi là API lập trình cho các tài liệu XML và HTML. DOM xác định cấu trúc logic của tài liệu và các phương thức truy cập và thay đổi chúng được chỉ định bởi DOM
Một số điểm cần lưu ý
- Một nút có thể có nhiều nút con
- Anh chị em là các nút có cùng cha mẹ như anh chị em
- Ngoại trừ nút trên cùng không có nút cha, mỗi nút có đúng một nút cha
Cách chọn phần tử trong DOM
Để thay đổi hoặc sửa đổi một phần tử trong DOM, bạn cần chọn phần tử cụ thể đó. Do đó, JavaScript có sáu phương thức để chọn một phần tử từ tài liệu trong thao tác dom trong javascript
- getElementById. trả về một phần tử có id khớp với một chuỗi đã truyền. Vì id của các phần tử là duy nhất nên đây là cách nhanh nhất để chọn một phần tử
- getElementsByTagName. trả về một tập hợp tất cả các thành phần có trong tài liệu có tên thẻ đã chỉ định, theo thứ tự xuất hiện của chúng trong tài liệu
- getElementsByClassName. trả về một HTMLCollection các phần tử khớp với tên lớp đã truyền. Bỏ qua các tên lớp được phân tách bằng khoảng trắng, chúng ta có thể tìm kiếm nhiều tên lớp
- getElementsByName. trả về Bộ sưu tập NodeList gồm các phần tử khớp với giá trị của thuộc tính tên với chuỗi đã truyền
- bộ chọn truy vấn. trả về phần tử đầu tiên trong tài liệu khớp với bộ chọn đã cho. Nó chỉ trả về phần tử khớp với một trong các bộ chọn CSS đã chỉ định hoặc một nhóm bộ chọn
- truy vấnSelectorAll. trả về một NodeList tĩnh gồm các phần tử khớp với một hoặc một nhóm bộ chọn. Nếu không có phần tử nào phù hợp, một NodeList trống sẽ được trả về
Cách duyệt và di chuyển xung quanh DOM
Với HTML DOM, chúng ta có thể điều hướng qua các nút cây và truy cập chúng bằng cách sử dụng các mối quan hệ nút mà chúng ta đã thảo luận trước đó về cha mẹ, con cái, anh chị em, v.v.
Trong phần này, chúng ta sẽ tìm hiểu cách lấy phần tử cha, phần tử con của phần tử và phần tử anh em của phần tử
Lấy phần tử cha
Để lấy nút cha của một nút cụ thể trong cây DOM, chúng ta có thể sử dụng thuộc tính parentNode. Ví dụ,
let parent = node.parentNode;
ParentNode là một đối tượng chỉ đọc. Không có cha mẹ cho các nút Tài liệu và Đoạn văn bản. Kết quả là parentNode luôn rỗng. ParentNode của một nút mới được tạo chưa được kết nối với cây DOM cũng sẽ là null
Nhận các phần tử con
Để lấy tất cả các phần tử con, hãy sử dụng thuộc tính firstChild trả về phần tử con đầu tiên của một phần tử được chỉ định
let firstChild = parentElement.firstChild;
Để lấy phần tử con cuối cùng, hãy sử dụng thuộc tính lastChild trả về nút phần tử đầu tiên, nút văn bản hoặc nút nhận xét
let lastChild = parentElement.lastChild;
Để lấy tất cả các phần tử con, hãy sử dụng thuộc tính childNodes trả về một NodeList trực tiếp gồm các phần tử con của một phần tử được chỉ định
let children = parentElement.childNodes;
Nhận anh chị em của một phần tử
Để lấy anh chị em tiếp theo, hãy sử dụng thuộc tính nextElementSibling
let nextSibling = currentNode.nextElementSibling;
Để lấy các anh chị em trước đó, hãy sử dụng thuộc tính previousElementSibling
let current = document.querySelector['.current']; let prevSibling = currentNode.previousElementSibling;
Cách thao tác các phần tử trong DOM
Tạo một phần tử mới
Tài liệu. createElement[] trả về một Nút mới với loại Phần tử. Nó lấy tên thẻ HTML làm tham số
let div = document.createElement['div'];
Nhận và đặt nội dung văn bản của một nút
Thuộc tính textContent trả về kết nối của textContent của tất cả các nút con và không bao gồm các nhận xét
let text = node.textContent;
Nhận và đặt nội dung HTML của một phần tử
InternalHTML là thuộc tính của Phần tử cho phép chúng tôi lấy hoặc đặt đánh dấu HTML có trong phần tử
________số 8_______Nối một nút vào danh sách các nút con của một nút cha cụ thể
Phương thức appendChild[] cho phép chúng ta chèn một nút vào cuối danh sách các nút con của một nút cha cụ thể
parentNode.appendChild[childNode];
Chèn một phần tử trước nút hiện có làm nút con của nút gốc được chỉ định
Phương thức JavaScript insertB Before[] nhận hai tham số, newNode và existingNode. insertB Before[] trả về nút con được chèn
0let firstChild = parentElement.firstChild;
Thay thế phần tử con bằng phần tử mới
Phương thức JavaScript replaceChild[] nhận hai tham số để thay thế phần tử đầu tiên của chúng ta bằng phần tử mới được tạo
1let firstChild = parentElement.firstChild;
Xóa các phần tử con của một nút
Phương thức JavaScript removeChild[] chỉ nhận một tham số i. e phần tử bạn muốn xóa
2let firstChild = parentElement.firstChild;
Sao chép một phần tử và tất cả các hậu duệ của nó
Phương pháp này cho phép chúng ta sao chép một phần tử. Phương thức cloneNode[] lấy một tham số sâu không bắt buộc. Nếu deep là đúng, thì nút ban đầu và tất cả các nút con của nó đã được sao chép, ngược lại là sai
3let firstChild = parentElement.firstChild;
Làm việc với Sự kiện
Dưới đây là một số sự kiện được sử dụng trong thao tác dom trong javascript
- Xử lý sự kiện. bao gồm thuộc tính xử lý sự kiện HTML, thuộc tính xử lý sự kiện của phần tử và addEventListener[]
- Sự kiện tải trang. bao gồm DOMContentLoaded, load, beforeunload và unload
- tải sự kiện. bao gồm các tài nguyên phụ thuộc như tệp JavaScript, tệp CSS và hình ảnh
- dỡ bỏ sự kiện. Sự kiện dỡ tải được kích hoạt sau trước sự kiện dỡ tải và sự kiện ẩn trang
- sự kiện chuột. bao gồm mousedown, mouseup, và click
- sự kiện bàn phím. bao gồm keydown, keypress, và keyup
- Cuộn sự kiện. bao gồm các thuộc tính scrollX và scrollY trả về số pixel mà tài liệu hiện đang được cuộn theo chiều ngang và chiều dọc
Thao tác kiểu của phần tử
thuộc tính phong cách
Thuộc tính style trả về đối tượng CSSStyleDeclaration chỉ đọc bao gồm danh sách các thuộc tính CSS
4let firstChild = parentElement.firstChild;
getComputingStyle[]
Phương thức getComputingStyle[] trả về đối tượng chứa kiểu được tính toán của một phần tử
4let firstChild = parentElement.firstChild;
thuộc tính className
Thuộc tính className trả về danh sách các lớp CSS của phần tử được phân tách bằng dấu cách dưới dạng chuỗi
thuộc tính classList
ClassList trả về một bộ sưu tập các lớp CSS trực tiếp. Nó là một thuộc tính chỉ đọc của một phần tử
6let firstChild = parentElement.firstChild;
Xử lý sự kiện trong DOM
Kể từ khi bắt đầu có ngôn ngữ, việc xử lý sự kiện đã là một phần của thao tác dom trong javascript. Chúng tương ứng với các hành động cụ thể, do người dùng bắt chước trong trang web, chẳng hạn như di chuyển chuột qua liên kết, nhấp vào liên kết hoặc gửi biểu mẫu. Nhờ xử lý sự kiện, các tập lệnh của chúng tôi tương tác nhiều hơn và có thể thực hiện một số hành động nhất định tùy thuộc vào người dùng
DOM của các trình duyệt web hiện đại như NS6+, IE5+ và Firefox cung cấp các phương pháp mở rộng và tính linh hoạt để ghi lại các sự kiện