Nội dung
- Tạo nút mới - Chèn các node vào DOM - Xóa các node khỏi DOM - Kết luận

Thứ ba, 26/12/2017 | 00:00 GMT+7

Cách thực hiện thay đổi đối với DOM

Trong hai phần trước của loạt bài Tìm hiểu về DOM , ta đã tìm hiểu Cách Truy cập các Phần tử trong DOM và Cách Duyệt qua 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 các thuộc tính cha, con và anh chị em để tìm các node tương đối.

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

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

Tạo nút 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 trực tiếp HTML trong file .html . Trong một ứng dụng web động, các phần tử và văn bản thường được thêm bằng JavaScript. Phương thức createElement() và createTextNode() được sử dụng để tạo các node mới trong DOM.

Thuộc tính / Phương pháp	Sự miêu tả
`createElement()`	Tạo một nút phần tử mới
`createTextNode()`	Tạo một nút văn bản mới
`node.textContent`	Lấy hoặc đặt nội dung văn bản của một nút phần tử
`node.innerHTML`	Lấy hoặc đặt nội dung HTML của một phần tử

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

index.html

<!DOCTYPE html> <html lang="en">    <head>     <title>Learning the DOM</title>   </head>    <body>     <h1>Document Object Model</h1>   </body>  </html>

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ụ dành cho nhà phát triển, sau đó chuyển đến Control panel .

Ta sẽ sử dụng createElement() trên đối tượng document để tạo một phần tử p mới.

const paragraph = document.createElement('p');

Ta đã tạo một phần tử p mới mà ta có thể thử nghiệm trong Control panel .

console.log(paragraph)

Output
<p></p>

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

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

Output
<p>I'm a brand new paragraph.</p>

Sự kết hợp giữ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ế để cài đặt nội dung của phần tử là với innerHTML 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 <strong>bold</strong> text.";

Ghi chú:
Mặc dù điều này sẽ hoạt động và là một phương pháp phổ biến để thêm nội dung vào một phần tử, nhưng có thể có rủi ro tạo script trên nhiều trang web (XSS) liên quan đến việc sử dụng phương pháp innerHTML , vì JavaScript nội tuyến có thể được thêm vào một phần tử. Do đó, bạn nên sử dụng textContent để thay thế, nó sẽ loại bỏ các thẻ HTML.

Cũng có thể tạo một nút văn bản bằng phương 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, ta đã 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 user 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 node và phần tử văn bản mới mà ta tạo trên giao diện user , ta cần chèn chúng vào document . 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ử mẹ và replaceChild() được sử dụng để thay thế một nút cũ bằng một nút mới.

Thuộc tính / Phương pháp	Sự miêu tả
`node.appendChild()`	Thêm một nút làm nút con cuối cùng của phần tử mẹ
`node.insertBefore()`	Chèn một nút vào phần tử mẹ trước một nút anh em được chỉ định
`node.replaceChild()`	Thay thế một nút hiện có bằng một nút mới

Để thực hành các phương pháp này, hãy tạo một danh sách việc cần làm trong HTML:

todo.html

<ul>   <li>Buy groceries</li>   <li>Feed the cat</li>   <li>Do laundry</li> </ul>

Khi bạn tải trang của bạn trong trình duyệt, nó sẽ giống như sau:

Ảnh chụp màn hình DOM 1

Để thêm một mục mới vào cuối danh sách việc cần làm, trước tiên ta phải tạo phần tử và thêm văn bản vào đó, như ta đã làm trong phần “Tạo nút 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ờ ta đã có một phần tử hoàn chỉnh cho việc cần làm mới của bạn , ta có thể thêm nó vào cuối danh sách bằng 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 phần cuối của ul .

todo.html

<ul>   <li>Buy groceries</li>   <li>Feed the cat</li>   <li>Do laundry</li>   <li>Do homework</li> </ul>

Ảnh chụp màn hình DOM 2

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

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

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

parentNode.insertBefore(newNode, nextSibling);

Đối với ví dụ về danh sách việc cần làm của ta , ta 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 .

// Add new to-do to the beginning of the list 
todoList.insertBefore(anotherTodo, todoList.firstElementChild);

todo.html

<ul>   <li>Pay bills</li>   <li>Buy groceries</li>   <li>Feed the cat</li>   <li>Do laundry</li>   <li>Do homework</li> </ul>

Ảnh chụp màn hình DOM 3

Nút mới đã được thêm thành công vào đầu danh sách. Bây giờ ta biết cách thêm một nút vào phần tử cha. Điều tiếp theo ta có thể cần làm là thay thế một nút hiện có bằng một nút mới.

Ta sẽ sửa đổi việc cần làm hiện có để trình bày cách thay thế một nút. Bước đầu tiên của việc tạo một phần tử mới vẫn như cũ.

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ư trong mã giả bên dưới.

parentNode.replaceChild(newNode, oldNode);

Ta sẽ thay thế phần tử con thứ ba của danh sách bằng việc cần làm đã sửa đổi.

// Replace existing to-do with modified to-do 
todoList.replaceChild(modifiedTodo, todoList.children[2]);

todo.html

<ul>   <li>Pay bills</li>   <li>Buy groceries</li>   <li>Feed the dog</li>   <li>Do laundry</li>   <li>Do homework</li> </ul>

Ảnh chụp màn hình DOM 4

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

Xóa các node khỏi DOM

Bây giờ 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 node hiện có khỏi DOM. Các node con có thể bị xóa khỏi nút cha bằng removeChild() và bản thân một nút có thể bị xóa bằng remove() .

phương pháp	Sự miêu tả
`node.removeChild()`	Xóa nút con
`node.remove()`	Xóa nút

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

todoList.removeChild(todoList.lastElementChild);

todo.html

<ul>   <li>Pay bills</li>   <li>Buy groceries</li>   <li>Feed the dog</li>   <li>Do laundry</li> </ul>

Ảnh chụp màn hình DOM 5

Một phương pháp khác có thể là loại bỏ chính nút, 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

<ul>   <li>Pay bills</li>   <li>Feed the dog</li>   <li>Do laundry</li> </ul>

Ảnh chụp màn hình DOM 6

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 để xóa các phần tử con khỏi DOM là đặt innerHTML tính innerHTML của một phần tử mẹ thành một chuỗi rỗng ( "" ). Đây không phải là phương pháp ư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ó.

Kết luận

Trong hướng dẫn này, ta đã học cách sử dụng JavaScript để tạo các node và phần tử mới và chèn chúng vào DOM, đồng thời thay thế và xóa các node và phần tử hiện có.

Tại thời điểm này trong loạt bài Hiểu về DOM, bạn đã biết cách truy cập vào 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. Như vậy, bạn có thể cảm thấy tự tin trong việc tạo các ứng dụng web front-end cơ bản với JavaScript.

Tags:

Các tin liên quan