Javascript có thao túng dom không?

Đị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
let firstChild = parentElement.firstChild; 
0
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



let firstChild = parentElement.firstChild; 
1
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
let firstChild = parentElement.firstChild; 
2
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
let firstChild = parentElement.firstChild; 
3

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

let firstChild = parentElement.firstChild; 
4
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ử
let firstChild = parentElement.firstChild; 
4
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ử
let firstChild = parentElement.firstChild; 
6

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

JavaScript tương tác với DOM như thế nào?

Có thể thao tác DOM mà không cần JavaScript không?

DOM có thể được thao tác như thế nào?