Giới thiệu

Trong hai phần trước của loạt bài Hiểu về chuỗi DOM, chúng tôi đã học cách Làm thế nào để truy cập các phần tử trong DOM và cách thực hiện DOM. Sử dụng kiến ​​thức này, nhà phát triển có thể sử dụng các lớp, thẻ, id và bộ chọn để tìm bất kỳ nút nào trong DOM và sử dụng thuộc tính  parent, child, và sibling để tìm các nút tương đối.

Bước tiếp theo để trở nên hoàn thiện hơn với DOM là tìm hiểu cách thêm, thay đổi, thay thế và xóa các nút. Một ứng dụng danh sách công việc phải làm là một ví dụ thực tế về một chương trình JavaScript mà bạn sẽ cần để có thể tạo, sửa đổi và loại bỏ các phần tử trong DOM.

Trong hướng dẫn này, chúng ta sẽ xem xét cách tạo các nút mới và chèn chúng vào DOM, thay thế các nút hiện có và loại bỏ các nút.

Tạo các node mới

Trong một trang web tĩnh, các phần tử được thêm vào trang bằng cách viết HTML trực tiếp trong tệp .html. Trong ứng dụng web động, các yếu tố và văn bản thường được thêm bằng JavaScript. Các phương thức createElement () và createTextNode () được sử dụng để tạo các nút mới trong DOM.

 
Để bắt đầu, hãy tạo một tệp index.html và lưu nó vào một thư mục dự án mới.
index.html

Learning the DOM

Document Object Model

 
Nhấp chuột phải vào bất kỳ đâu trên trang và chọn "Kiểm tra" để mở Công cụ Developer Tools, sau đó điều hướng đến Console.
 
Chúng ta sẽ sử dụng hàm createElement () trên đối tượng tài liệu để tạo một phần tử p mới.
const paragraph = document.createElement('p');
Chúng tôi đã tạo một phần tử p mới mà chúng tôi có thể thử nghiệm trong Console.
console.log(paragraph)

 

Output

 

Biến đoạn đầu ra một phần tử p rỗng, không phải là rất hữu ích mà không có bất kỳ văn bản nào. Để thêm văn bản vào phần tử, chúng ta sẽ thiết lập thuộc tính textContent.

 

paragraph.textContent = "I'm a brand new paragraph.";
console.log(paragraph)
Output

I'm a brand new paragraph.

 
Một sự kết hợp của createElement () và textContent tạo ra một nút phần tử hoàn chỉnh. Một phương pháp thay thế thiết lập nội dung của phần tử là với thuộc tính innerHTML, cho phép bạn thêm HTML cũng như văn bản vào một phần tử.
paragraph.innerHTML = "I'm a paragraph with bold text.";

 


Chú thích:
Trong khi điều này sẽ làm việc và là một phương pháp phổ biến của việc thêm nội
dung vào một phần tử, có thể có một rủi ro cross-site scripting (XSS) liên quan
đến việc sử dụng phương thức innerHTML, vì JavaScript nội tuyến có thể được thêm
vào một phần tử. Do đó, chúng tôi khuyên bạn nên sử dụng textContent thay vào đó,
sẽ loại bỏ các thẻ HTML.
Cũng có thể tạo một nút văn bản với phương thức createTextNode ().
const text = document.createTextNode("I'm a new text node.");
console.log(text)

 

Output
"I'm a new text node."
Với các phương pháp này, chúng tôi đã tạo các phần tử và nút văn bản mới, nhưng chúng không hiển thị trên giao diện người dùng của trang web cho đến khi chúng được chèn vào tài liệu.

Chèn các node vào DOM

Để xem các nút văn bản và phần tử mới mà chúng tôi tạo trên giao diện người dùng, chúng tôi sẽ cần chèn chúng vào tài liệu. Các phương thức appendChild () và insertBefore () được sử dụng để thêm các mục vào đầu, giữa hoặc cuối của phần tử cha và replaceChild () được sử dụng để thay thế một nút cũ bằng một nút mới.

Để thực hành các phương thức này, hãy tạo list trong HTML:
//todo.html
  • Buy groceries
  • Feed the cat
  • Do laundry
Khi bạn tải trang của mình trong trình duyệt, trang sẽ trông như sau:

 

 

Để thêm một mục mới vào cuối list, chúng ta phải tạo phần tử và thêm văn bản vào phần đầu tiên, như chúng ta đã làm trong phần "Tạo node mới" ở trên.
// To-do list ul element
const todoList = document.querySelector('ul');

// Create new to-do
const newTodo = document.createElement('li');
newTodo.textContent = 'Do homework';
 
Bây giờ chúng ta có một phần tử hoàn chỉnh cho việc cần làm mới của chúng ta, chúng ta có thể thêm nó vào cuối list với appendChild ().
// Add new todo to the end of the list
todoList.appendChild(newTodo);

 Bạn có thể thấy phần tử li mới đã được thêm vào cuối ul.

 //todo.html
  • Buy groceries
  • Feed the cat
  • Do laundry
  • Do homework

 

Có lẽ chúng ta có một nhiệm vụ ưu tiên cao hơn để làm, và chúng tôi muốn thêm nó vào đầu danh sách. Chúng ta sẽ phải tạo một phần tử khác, vì createElement () chỉ tạo ra một phần tử và không thể được tái sử dụng.

// Create new to-do
const anotherTodo = document.createElement('li');
anotherTodo.textContent = 'Pay bills';

Chúng ta có thể thêm nó vào đầu danh sách bằng cách sử dụng insertBefore (). Phương thức này lấy hai đối số - đầu tiên là nút con mới được thêm vào và nút thứ hai là nút sibling sẽ ngay lập tức theo nút mới. Nói cách khác, bạn đang chèn nút mới trước nút sibling tiếp theo. Điều này sẽ trông tương tự như mã giả sau:

 

parentNode.insertBefore(newNode, nextSibling);
Đối với ví dụ danh sách công việc của chúng tôi, chúng tôi sẽ thêm phần tử anotherTodo mới trước phần tử con đầu tiên của danh sách, hiện là mục danh sách Buy groceries tạp phẩm.
// Add new to-do to the beginning of the list
todoList.insertBefore(anotherTodo, todoList.firstElementChild);
//todo.html
  • Pay bills
  • Buy groceries
  • Feed the cat
  • Do laundry
  • Do homework

 
Nút mới đã được thêm thành công vào đầu danh sách. Bây giờ chúng ta biết cách thêm một nút vào một phần tử cha. Điều tiếp theo chúng ta có thể làm là thay thế một nút hiện có bằng một nút mới. Chúng tôi sẽ sửa đổi việc cần làm hiện có để chứng minh cách thay thế một nút. Bước đầu tiên để tạo một phần tử mới vẫn giữ nguyên.
const modifiedTodo = document.createElement('li');
modifiedTodo.textContent = 'Feed the dog';

Giống như insertBefore (), replaceChild () nhận hai đối số - nút mới và nút được thay thế, như được hiển thị trong mã giả bên dưới.

parentNode.replaceChild(newNode, oldNode);
 
Chúng tôi sẽ thay thế phần tử con thứ ba của list bằng công việc cần sửa đổi.
// Replace existing to-do with modified to-do
todoList.replaceChild(modifiedTodo, todoList.children[2]);

 

//todo.html
  • Pay bills
  • Buy groceries
  • Feed the dog
  • Do laundry
  • Do homework

 
Với sự kết hợp của appendChild (), insertBefore () và replaceChild (), bạn có thể chèn các nút và các phần tử vào bất kỳ đâu trong DOM.

 Xóa các nút khỏi DOM

Bây giờ chúng ta biết cách tạo các phần tử, thêm chúng vào DOM và sửa đổi các phần tử hiện có. Bước cuối cùng là tìm hiểu cách xóa các nút hiện có khỏi DOM. Các nút con có thể được loại bỏ khỏi một nút cha với removeChild (), và một node có thể được remove với remove ().

Sử dụng ví dụ cần làm ở trên, chúng tôi sẽ muốn xóa các mục sau khi chúng được hoàn thành. Nếu bạn đã hoàn thành bài tập ở nhà, bạn có thể xóa mục Do homework, điều này sẽ xảy ra với tên con cuối cùng của danh sách, với removeChild ().

todoList.removeChild(todoList.lastElementChild);
//todo.html
  • Pay bills
  • Buy groceries
  • Feed the dog
  • Do laundry

 

 
Một phương pháp khác có thể là loại bỏ chính nút, bằng cách sử dụng phương thức remove () trực tiếp trên nút.
// Remove second element child from todoList
todoList.children[1].remove();
//todo.html
  • Pay bills
  • Feed the dog
  • Do laundry

 
Giữa removeChild () và remove (), bạn có thể xóa bất kỳ nút nào khỏi DOM. Một phương pháp khác mà bạn có thể thấy để loại bỏ các phần tử con từ DOM là thiết lập thuộc tính innerHTML của một phần tử cha thành một chuỗi rỗng (""). Đây không phải là phương thức ưa thích vì nó ít rõ ràng hơn, nhưng bạn có thể thấy nó trong mã hiện có.

 Phần kết luận

 
Trong hướng dẫn này, chúng tôi đã học cách sử dụng JavaScript để tạo các nút và các phần tử mới và chèn chúng vào DOM, và thay thế và loại bỏ các nút và phần tử hiện có. Tại điểm này trong phần Hiểu chuỗi DOM, bạn biết cách truy cập bất kỳ phần tử nào trong DOM, đi qua bất kỳ nút nào trong DOM và sửa đổi chính DOM đó. Bây giờ bạn có thể cảm thấy tự tin khi tạo các ứng dụng web cơ bản với JavaScript.

 Bài dịch từ nguồn https://www.digitalocean.com/community/tutorials/how-to-make-changes-to-the-dom

Xin cảm ơn các bạn đã theo dõi bài viết của Nguyên Vũ.