Bài viết này là tổng quan về một số phương thức DOM cấp 1 mạnh mẽ, cơ bản và cách sử dụng chúng từ JavaScript. Bạn sẽ tìm hiểu cách tạo, truy cập, kiểm soát và xóa các phần tử HTML một cách linh hoạt. Các phương thức DOM được trình bày ở đây không dành riêng cho HTML; . Các minh họa được cung cấp ở đây sẽ hoạt động tốt trong mọi trình duyệt hiện đại
Ghi chú. Các phương thức DOM được trình bày ở đây là một phần của đặc tả cấp 1 Mô hình Đối tượng Tài liệu [Lõi]. DOM cấp 1 bao gồm cả các phương thức để truy cập và thao tác tài liệu chung [DOM 1 Core] cũng như các phương thức dành riêng cho tài liệu HTML [DOM 1 HTML]
Trong ví dụ này, chúng tôi thêm một bảng mới vào trang khi nhấp vào nút
HTML
JavaScript
function generateTable[] {
// creates a element and a element
const tbl = document.createElement["table"];
const tblBody = document.createElement["tbody"];
// creating all cells
for [let i = 0; i
cell is row 0 column 0
cell is row 0 column 1
cell is row 1 column 0
cell is row 1 column 1
Đây là cây đối tượng DOM được tạo bởi mã cho phần tử
table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
3 và các phần tử con của nóBạn có thể xây dựng bảng này và các phần tử con bên trong của nó bằng cách chỉ sử dụng một vài phương thức DOM. Hãy nhớ ghi nhớ mô hình cây cho các cấu trúc bạn định tạo; . Trong cây
table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
3 của Hình 1, phần tử table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
3 có một con. phần tử table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
4. table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
4 có hai con. Mỗi đứa con của table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
4 [table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
6] có hai con [table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
9]. Cuối cùng, mỗi table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
9 có một con. một nút văn bảnTrong ví dụ này, chúng tôi thay đổi màu nền của đoạn văn khi nhấp vào nút
HTML
hi
hello
JavaScript
function generateTable[] {
// creates a element and a element
const tbl = document.createElement["table"];
const tblBody = document.createElement["tbody"];
// creating all cells
for [let i = 0; i
hi
hello
1function generateTable[] {
// creates a element and a element
const tbl = document.createElement["table"];
const tblBody = document.createElement["tbody"];
// creating all cells
for [let i = 0; i
hi
hello
2 để lấy danh sách các nút con của myCell. Danh sách
hi
hello
2 bao gồm tất cả các nút con, bất kể tên hoặc loại của chúng là gì. Giống như
hi
hello
4, nó trả về một danh sách các nútSự khác biệt là [a]
hi
hello
4 chỉ trả về các phần tử của tên thẻ được chỉ định; Khi bạn có danh sách được trả về, hãy sử dụng phương pháp
hi
hello
7 để truy xuất mục con mong muốn. Ví dụ này lưu trữ trong myCellText nút văn bản của ô thứ hai trong hàng thứ hai của bảngSau đó, để hiển thị kết quả trong ví dụ này, nó tạo một nút văn bản mới có nội dung là dữ liệu của
hi
hello
8 và nối thêm nó dưới dạng phần tử con của phần tử row.appendChild[cell];
4
Ghi chú. Nếu đối tượng của bạn là nút văn bản, bạn có thể sử dụng thuộc tính dữ liệu và truy xuất nội dung văn bản của nút
table {
margin: 1rem auto;
}
td {
padding: 0.5rem;
}
0Ở cuối sample1, có một cuộc gọi đến
hi
hello
1 trên đối tượng function generateTable[] {
// creates a element and a element
const tbl = document.createElement["table"];
const tblBody = document.createElement["tbody"];
// creating all cells
for [let i = 0; i . . .
Chủ Đề