Hướng dẫn what is the type of html element in typescript? - loại phần tử html trong bản thảo là gì?
Thao tác Dom
Một cuộc thám hiểm vào loại ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1
Trong hơn 20 năm kể từ khi tiêu chuẩn hóa, JavaScript đã đi một chặng đường rất dài. Mặc dù vào năm 2020, JavaScript có thể được sử dụng trên các máy chủ, trong khoa học dữ liệu và thậm chí trên các thiết bị IoT, điều quan trọng là phải nhớ trường hợp sử dụng phổ biến nhất của nó: trình duyệt web.
Các trang web được tạo thành từ các tài liệu HTML và/hoặc XML. Những tài liệu này là tĩnh, chúng không thay đổi. Mô hình đối tượng tài liệu [DOM] là giao diện lập trình được triển khai bởi các trình duyệt để làm cho các trang web tĩnh hoạt động. API DOM có thể được sử dụng để thay đổi cấu trúc tài liệu, kiểu dáng và nội dung. API mạnh đến mức vô số khung hình [JQuery, React, Angular, v.v.] đã được phát triển xung quanh nó để làm cho các trang web động thậm chí còn dễ phát triển hơn.
TypeScript là một superset được đánh máy của JavaScript và nó vận chuyển các định nghĩa loại cho API DOM. Các định nghĩa này có sẵn trong bất kỳ dự án TypeScript mặc định nào. Trong số hơn 20.000 dòng định nghĩa trong lib.dom.d.ts, người ta nổi bật giữa những người còn lại:
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1. Loại này là xương sống để thao tác DOM với TypeScript.
Bạn có thể khám phá mã nguồn cho các định nghĩa kiểu DOM
Ví dụ cơ bản
Cho một tệp chỉ mục đơn giản hóa.html:
html
TypeScript Dom Manipulation
Hãy cùng khám phá một tập lệnh TypeScript thêm phần tử
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
3 vào phần tử ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
4.ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
Sau khi biên dịch và chạy trang index.html, HTML kết quả sẽ là:
html
Hello, World!
Giao diện ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
5
Dòng đầu tiên của mã TypeScript sử dụng biến toàn cầu
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
6. Kiểm tra biến cho thấy nó được xác định bởi giao diện ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
5 từ tệp lib.dom.d.ts. Cắt mã chứa các cuộc gọi đến hai phương thức, ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
8 và ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
9.html
Hello, World!
0
Định nghĩa cho phương pháp này như sau:
ts
getElementById[elementId: string]: HTMLElement | null;
Vượt qua nó một chuỗi ID phần tử và nó sẽ trả về
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1 hoặc html
Hello, World!
2. Phương pháp này giới thiệu một trong những loại quan trọng nhất, ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1. Nó đóng vai trò là giao diện cơ sở cho mọi giao diện phần tử khác. Ví dụ: biến html
Hello, World!
4 trong ví dụ mã là loại html
Hello, World!
5. Cũng lưu ý rằng phương pháp này có thể trả về html
Hello, World!
2. Điều này là do phương pháp có thể là một số tiền thời gian nhất định nếu nó có thể thực sự tìm thấy phần tử được chỉ định hay không. Trong dòng cuối cùng của đoạn mã, toán tử chuỗi tùy chọn mới được sử dụng để gọi html
Hello, World!
7.html
Hello, World!
8
Định nghĩa cho phương pháp này là [tôi đã bỏ qua định nghĩa không dùng nữa]:
ts
createElement[tagName: K, options?: ElementCreationOptions]: HTMLElementTagNameMap[K];
createElement[tagName: string, options?: ElementCreationOptions]: HTMLElement;
Đây là một định nghĩa chức năng quá tải. Quá tải thứ hai là đơn giản nhất và hoạt động rất giống phương pháp
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
8. Vượt qua bất kỳ ts
getElementById[elementId: string]: HTMLElement | null;
0 nào và nó sẽ trả lại một htmlelement tiêu chuẩn. Định nghĩa này là những gì cho phép các nhà phát triển tạo các thẻ phần tử HTML độc đáo.Ví dụ
ts
getElementById[elementId: string]: HTMLElement | null;
1 trả về phần tử ts
getElementById[elementId: string]: HTMLElement | null;
2, rõ ràng không phải là một phần tử được chỉ định bởi đặc tả HTML.Đối với những người quan tâm, bạn có thể tương tác với các thành phần thẻ tùy chỉnh bằng cách sử dụng
ts
getElementById[elementId: string]: HTMLElement | null;
3
Đối với định nghĩa đầu tiên của
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
9, nó đang sử dụng một số mẫu chung nâng cao. Nó được hiểu rõ nhất được chia thành các khối, bắt đầu với biểu thức chung: ts
getElementById[elementId: string]: HTMLElement | null;
5. Biểu thức này xác định một tham số chung ts
getElementById[elementId: string]: HTMLElement | null;
6 bị ràng buộc với các khóa của giao diện ts
getElementById[elementId: string]: HTMLElement | null;
7. Giao diện bản đồ chứa mọi tên thẻ HTML được chỉ định và giao diện loại tương ứng của nó. Ví dụ: đây là 5 giá trị được ánh xạ đầu tiên:ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
Một số yếu tố không thể hiện các thuộc tính duy nhất và vì vậy chúng chỉ trả lại
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1, nhưng các loại khác có các thuộc tính và phương thức duy nhất để chúng trả về giao diện cụ thể của chúng [sẽ mở rộng từ hoặc thực hiện ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1].Bây giờ, trong phần còn lại của định nghĩa
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
9: ts
createElement[tagName: K, options?: ElementCreationOptions]: HTMLElementTagNameMap[K];
createElement[tagName: string, options?: ElementCreationOptions]: HTMLElement;
1. Đối số đầu tiên ts
createElement[tagName: K, options?: ElementCreationOptions]: HTMLElementTagNameMap[K];
createElement[tagName: string, options?: ElementCreationOptions]: HTMLElement;
2 được định nghĩa là tham số chung ts
getElementById[elementId: string]: HTMLElement | null;
6. Trình thông dịch TypeScript đủ thông minh để suy ra tham số chung từ đối số này. Điều này có nghĩa là nhà phát triển không thực sự phải chỉ định tham số chung khi sử dụng phương thức; Bất kỳ giá trị nào được chuyển cho đối số ts
createElement[tagName: K, options?: ElementCreationOptions]: HTMLElementTagNameMap[K];
createElement[tagName: string, options?: ElementCreationOptions]: HTMLElement;
2 sẽ được suy ra là ts
getElementById[elementId: string]: HTMLElement | null;
6 và do đó có thể được sử dụng trong suốt phần còn lại của định nghĩa. Đó chính xác là những gì xảy ra; Giá trị trả về ts
createElement[tagName: K, options?: ElementCreationOptions]: HTMLElementTagNameMap[K];
createElement[tagName: string, options?: ElementCreationOptions]: HTMLElement;
6 lấy đối số ts
createElement[tagName: K, options?: ElementCreationOptions]: HTMLElementTagNameMap[K];
createElement[tagName: string, options?: ElementCreationOptions]: HTMLElement;
2 và sử dụng nó để trả về loại tương ứng. Định nghĩa này là cách biến html
Hello, World!
4 từ đoạn mã có một loại html
Hello, World!
5. Và nếu mã là ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
0, thì đó sẽ là một yếu tố của loại ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
1.Giao diện ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2
Hàm
ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
3 trả về ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1. Giao diện ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1 mở rộng giao diện ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
6 mở rộng giao diện ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2. Phần mở rộng nguyên mẫu này cho phép tất cả ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
8 sử dụng một tập hợp con của các phương thức tiêu chuẩn. Trong đoạn mã, chúng tôi sử dụng một thuộc tính được xác định trên giao diện ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2 để nối phần tử html
Hello, World!
4 mới vào trang web.ts
appendChild[newChild: T]: T;
1
Dòng cuối cùng của đoạn mã là
ts
appendChild[newChild: T]: T;
2. Phần trước đó, ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
3, chi tiết rằng toán tử chuỗi tùy chọn được sử dụng ở đây vì ts
appendChild[newChild: T]: T;
4 có khả năng có thể không có thời gian chạy. Phương thức html
Hello, World!
7 được xác định bởi:ts
appendChild[newChild: T]: T;
Phương pháp này hoạt động tương tự như phương thức
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
9 vì tham số chung ts
appendChild[newChild: T]: T;
7 được suy ra từ đối số ts
appendChild[newChild: T]: T;
8. ts
appendChild[newChild: T]: T;
7 bị giới hạn trong giao diện cơ sở khác ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2.Sự khác biệt giữa tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
1 và tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
2
Trước đây, tài liệu này chi tiết giao diện
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1 kéo dài từ ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
6 kéo dài từ ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2. Trong API DOM có một khái niệm về các yếu tố trẻ em. Ví dụ: trong HTML sau, các thẻ html
Hello, World!
4 là con của phần tử tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
7tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
Sau khi nắm bắt phần tử
tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
7, tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
1 Prop sẽ trả về danh sách tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
0 chứa tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
1. Thuộc tính tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
2 sẽ trả về một danh sách các nút tương tự. Mỗi thẻ html
Hello, World!
4 vẫn sẽ thuộc loại tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
1, nhưng tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
3 có thể chứa các nút HTML bổ sung mà danh sách tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
0 không thể.Sửa đổi HTML bằng cách xóa một trong các thẻ
html
Hello, World!
4, nhưng giữ văn bản.tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
Xem làm thế nào cả hai danh sách thay đổi.
tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
1 Bây giờ chỉ chứa phần tử ts
/**
* Returns the first element that is a descendant of node that matches selectors.
*/
querySelector[selectors: K]: HTMLElementTagNameMap[K] | null;
querySelector[selectors: K]: SVGElementTagNameMap[K] | null;
querySelector[selectors: string]: E | null;
/**
* Returns all element descendants of node that match selectors.
*/
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: string]: NodeListOf;
0 và tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
2 chứa nút ts
/**
* Returns the first element that is a descendant of node that matches selectors.
*/
querySelector[selectors: K]: HTMLElementTagNameMap[K] | null;
querySelector[selectors: K]: SVGElementTagNameMap[K] | null;
querySelector[selectors: string]: E | null;
/**
* Returns all element descendants of node that match selectors.
*/
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: string]: NodeListOf;
2 thay vì hai nút html
Hello, World!
4. Phần ts
/**
* Returns the first element that is a descendant of node that matches selectors.
*/
querySelector[selectors: K]: HTMLElementTagNameMap[K] | null;
querySelector[selectors: K]: SVGElementTagNameMap[K] | null;
querySelector[selectors: string]: E | null;
/**
* Returns all element descendants of node that match selectors.
*/
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: string]: NodeListOf;
2 của tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
3 là nghĩa đen ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2 chứa văn bản ts
/**
* Returns the first element that is a descendant of node that matches selectors.
*/
querySelector[selectors: K]: HTMLElementTagNameMap[K] | null;
querySelector[selectors: K]: SVGElementTagNameMap[K] | null;
querySelector[selectors: string]: E | null;
/**
* Returns all element descendants of node that match selectors.
*/
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: string]: NodeListOf;
7. Danh sách tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
1 không chứa ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2 này vì nó không được coi là ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1.Phương pháp ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
01 và ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
02
Cả hai phương pháp này là các công cụ tuyệt vời để có được danh sách các yếu tố DOM phù hợp với một bộ ràng buộc độc đáo hơn. Chúng được định nghĩa trong lib.dom.d.ts là:
ts
/**
* Returns the first element that is a descendant of node that matches selectors.
*/
querySelector[selectors: K]: HTMLElementTagNameMap[K] | null;
querySelector[selectors: K]: SVGElementTagNameMap[K] | null;
querySelector[selectors: string]: E | null;
/**
* Returns all element descendants of node that match selectors.
*/
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: K]: NodeListOf;
querySelectorAll[selectors: string]: NodeListOf;
Định nghĩa
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
02 tương tự như ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
04, ngoại trừ nó trả về một loại mới: ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
05. Loại trả lại này về cơ bản là một triển khai tùy chỉnh của phần tử danh sách JavaScript tiêu chuẩn. Có thể cho rằng, việc thay thế ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
06 bằng ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
07 sẽ dẫn đến trải nghiệm người dùng rất giống nhau. ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
05 chỉ thực hiện các thuộc tính và phương pháp sau: ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
09, ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
10, ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
11 và lập chỉ mục số. Ngoài ra, phương thức này trả về một danh sách các phần tử, không phải các nút, đó là những gì tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
3 đã trở lại từ phương thức ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
13. Mặc dù điều này có thể xuất hiện dưới dạng sự khác biệt, hãy lưu ý rằng giao diện ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
6 kéo dài từ ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2.Để xem các phương thức này trong hành động sửa đổi mã hiện có thành:
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
0Quan tâm đến việc học thêm?
Phần tốt nhất về định nghĩa loại lib.dom.d.ts là chúng phản ánh các loại được chú thích trong trang web tài liệu Mạng lưới phát triển Mozilla [MDN]. Ví dụ: giao diện
ts
// 1. Select the div element using the id property
const app = document.getElementById["app"];
// 2. Create a new element programmatically
const p = document.createElement["p"];
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild[p];
1 được ghi lại bởi trang HTMLelement này trên MDN. Các trang này liệt kê tất cả các thuộc tính, phương thức có sẵn và đôi khi thậm chí các ví dụ. Một khía cạnh tuyệt vời khác của các trang là chúng cung cấp các liên kết đến các tài liệu tiêu chuẩn tương ứng. Dưới đây là liên kết đến khuyến nghị W3C cho HTMLelement.Sources:
- Tiêu chuẩn ECMA-262
- Giới thiệu về DOM
Phần tử loại trong TypeScript là gì?
Phần tử là lớp cơ sở chung nhất mà từ đó tất cả các đối tượng trong một tài liệu kế thừa. Nó chỉ có các phương pháp và thuộc tính chung cho tất cả các loại yếu tố. Các lớp cụ thể hơn kế thừa từ phần tử.the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
Phần tử loại trong JavaScript là gì?
Định nghĩa và cách sử dụng. Thuộc tính loại đặt hoặc trả về giá trị của thuộc tính loại của một phần tử. Thuộc tính loại chỉ định loại phương tiện Internet [trước đây được gọi là loại MIME] của đối tượng.The type property sets or returns the value of the type attribute of an element. The type attribute specifies the Internet media type [formerly known as MIME type] of the object.
Phần tử nào là phần tử có ý nghĩa trong HTML?
Phần tử là phần tử gốc và nó xác định toàn bộ tài liệu HTML.Nó có thẻ bắt đầu và thẻ kết thúc.Sau đó, bên trong phần tử có một yếu tố: đầu tiên tôi hướng đến đoạn đầu tiên của tôi.
element is the root element and it defines the whole HTML document. It has a start tag and an end tag . Then, inside the element there is a element:
My First Heading
My first paragraph.