programming javascript

Tạo phần tử javascript

Trong hai phần trước của loạt bài Hiểu về chuỗi DOM, chúng tôi đã nghiên cứu 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 ý 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 cha, con và anh chị em để tìm các nút tương thích

Bước tiếp theo để trở nên hoàn thiện hơn với DOM là tìm hiểu cách bổ sung, 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ề chương trình JavaScript mà bạn 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 tôi sẽ xem xét cách tạo các nút mới và thêm chúng vào DOM, thay thế các nút hiện có và loại bỏ các nút

Create new node

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ố tố và ứng dụng văn bản thường được bổ sung 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 chỉ mục tệp. html và lưu nó vào một thư mục dự án mới

index.html

Học DOM

const paragraph = document.createElement['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 Công cụ, sau đó điều hướng đến Bảng điều khiển

Chúng ta sẽ sử dụng hàm createElement[] trên tài liệu đối tượng để tạo một phần tử mới

const paragraph = document.createElement['p'];

Chúng tôi đã tạo ra một phần tử mới mà chúng tôi có thể thử nghiệm trong Bảng điều khiển

console.log[paragraph]

Output

Giai đoạn đầu biến ra một phần tử trố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

console.log[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à thuộc tính bên trongHTML, cho phép bạn thêm HTML cũng như văn bản vào 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]

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 đưa vào tài liệu

Chèn các nút 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ẽ thêm chúng vào tài liệu. Các phương thức appendChild[] và insert Before[] đượ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 hiện các phương thức này, hãy tạo danh sách trong HTML

```
console.log[paragraph]
```
1
```
console.log[paragraph]
```
2
```
console.log[paragraph]
```
3

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

Để thêm một mục mới vào danh sách cuối cùng, chúng ta phải tạo phần tử và thêm văn bản vào phần đầu tiên, vì chúng ta đã làm trong phần "Tạo nút mới" ở trên

Bây giờ chúng ta có một phần tử hoàn chỉnh cho công việc cần làm mới của chúng ta, chúng ta có thể thêm nó vào danh sách cuối cùng với appendChild []

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

```
console.log[paragraph]
```
1
```
console.log[paragraph]
```
2
```
console.log[paragraph]
```
3
```
console.log[paragraph]
```
7

Có thể chúng tôi 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, bởi vì createElement[] chỉ tạo ra một phần tử và không thể tái sử dụng

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

Đối với ví dụ danh sách công việc của chúng tôi, chúng tôi sẽ bổ sung phần tử khácTodo new before phần tử con đầu tiên của danh sách, hiện tại là mục danh sách Mua tạp hóa tạp hóa

```
console.log[paragraph]
```
8
```
console.log[paragraph]
```
1
```
console.log[paragraph]
```
2
```
console.log[paragraph]
```
3
```
console.log[paragraph]
```
7

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 công việc cần làm để 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

Giống như insert Before [], 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

const paragraph = document.createElement['p'];

Chúng tôi sẽ thay thế phần tử con thứ ba của danh sách bằng công việc cần sửa đổi

const paragraph = document.createElement['p'];

```
console.log[paragraph]
```
8
```
console.log[paragraph]
```
1
```
Output
```
5
```
console.log[paragraph]
```
3
```
console.log[paragraph]
```
7

Với sự kết hợp của appendChild[], insertB Before[] 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ể bị loại bỏ khỏi một nút cha với removeChild[], và một nút có thể được loại bỏ 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 tại nhà, bạn có thể xóa mục Làm bài tập về nhà, đ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 []

const paragraph = document.createElement['p'];

3_______1_______1

```
console.log[paragraph]
```
8
```
console.log[paragraph]
```
1
```
Output
```
5
```
console.log[paragraph]
```
3

Một phương pháp khác có thể là loại bỏ nút chính, bằng cách sử dụng phương thức loại bỏ [] trực tiếp trên nút

const paragraph = document.createElement['p'];

```
console.log[paragraph]
```
8
```
Output
```
5
```
console.log[paragraph]
```
3

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 khỏi DOM là thiết lập thuộc tính bên trongHTML của một phần tử cha thành một chuỗi trố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à phần tử mới và đưa chúng vào DOM, đồng thời thay thế và loại bỏ các nút và phần tử hiện có. Tại thờ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 DOM chính đó. 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

Create new node

Chèn các nút vào DOM

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

Phần kết luận

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề