Lightrun Answers được thiết kế để giảm bớt việc googling liên tục đi kèm với việc gỡ lỗi các thư viện bên thứ 3. Nó thu thập các liên kết đến tất cả các địa điểm mà bạn có thể đang xem trong khi tìm kiếm một lỗi nghiêm trọng
Và, nếu cuối cùng bạn vẫn gặp khó khăn, chúng tôi rất sẵn lòng nhận cuộc gọi để xem chúng tôi có thể trợ giúp như thế nào
Nói chuyện với chuyên gia về Lightrun Answers
Cách chính xác là sử dụng tsc
và biên dịch các tệp TS của bạn thành JS rồi sử dụng chúng trong html
Nhưng nếu bạn thực sự, thực sự muốn thực hiện việc biên dịch trong trình duyệt, thì có một babel-standalone
có thể được sử dụng chính xác cho việc đó. Chỉ cần nhớ rằng nó rất kém hiệu quả và không nên được sử dụng trên các trang web sản xuất
mục lục. html
Trong hơn 20 năm kể từ khi được tiêu chuẩn hóa, JavaScript đã đi được 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, nhưng điều quan trọng cần nhớ là 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. Các 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à một giao diện lập trình được các trình duyệt triển khai để 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, kiểu và nội dung tài liệu. API mạnh đến mức vô số khung giao diện người dùng [jQuery, React, Angular, v.v. ] đã được phát triển xung quanh nó để làm cho các trang web động dễ phát triển hơn
TypeScript là một siêu tập hợp đã nhập của JavaScript và nó cung cấp các định nghĩa loại cho API DOM. Các định nghĩa này luôn 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. nhà thờ. d. ts, một cái nổi bật trong số những cá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
Đưa ra một chỉ số đơn giản hóa. tệp 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];
4ts
// 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 chỉ mục. trang 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ụ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];
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ừ lib. nhà thờ. d. tập tin ts. Đoạn mã chứa lệnh 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];
9html
Hello, World!
0
Định nghĩa cho phương pháp này như sau
ts
getElementById[elementId: string]: HTMLElement | null;
Truyền cho 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ã có kiểu html
Hello, World!
5. Ngoài ra, hãy lưu ý rằng phương thức này có thể trả về html
Hello, World!
2. Điều này là do phương thức không thể chắc chắn trước thời gian chạy nếu nó thực sự có thể tìm thấy phần tử đã chỉ định hay không. Ở dòng cuối cùng của đoạn mã, toán tử xâu chuỗi tùy chọn mới được sử dụng để gọi html
Hello, World!
7html
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 với 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ượt qua nó bất kỳ ts
getElementById[elementId: string]: HTMLElement | null;
0 và nó sẽ trả về một HTMLElement tiêu chuẩn. Định nghĩa này cho phép các nhà phát triển tạo các thẻ phần tử HTML duy nhấtVí 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à 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 yếu tố 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 là chia nhỏ thành nhiều phần, bắt đầu bằng 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ênts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
Một số phần tử không thể hiện các thuộc tính duy nhất và do đó chúng chỉ 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, 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 hoặc triển khai 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]Bây giờ, 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; . Đó chính xác là những gì xảy ra; . Định nghĩa này là cách biến html
Hello, World!
4 từ đoạn mã nhận đượ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ì nó sẽ là một phần tử kiểu ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
1Giao 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ề mộ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. 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. Tiện ích 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ác phương pháp tiêu chuẩn. Trong đoạn mã, chúng tôi sử dụng 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 thêm phần tử html
Hello, World!
4 mới vào trang webts
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 , nêu chi tiết rằng toán tử xâu chuỗi tùy chọn được sử dụng ở đây vì ________ 56 _______4 có thể có giá trị rỗng trong thời gian chạy. Phương pháp html
Hello, World!
7 được xác định bởits
appendChild[newChild: T]: T;
Phương thức 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ị ràng buộc với một giao diện cơ sở khác ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2Sự 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 trình bày chi tiết về 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 DOM API có khái niệm về phần tử con. 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, phần tử tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[2] [p, p]
div.childNodes;
// NodeList[2] [p, p]
1 sẽ trả về một danh sách tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
0 có chứa phần tử 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ự như tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
3. Mỗi thẻ html
Hello, World!
4 sẽ vẫn 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 thẻ 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ữ nguyên văn bảntsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
Xem cách 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 hiện 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 một 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à ts
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
2 có 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];
1Các 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 đều là những công cụ tuyệt vời để lấy danh sách các phần tử dom phù hợp với một tập hợp các ràng buộc độc đáo hơn. Chúng được định nghĩa trong lib. nhà thờ. d. ts như
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ả về này về cơ bản là 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, 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 thức 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ì mà tsx
;
const div = document.getElementsByTagName["div"][0];
div.children;
// HTMLCollection[1] [p]
div.childNodes;
// NodeList[2] [p, text]
3 đã trả về 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ó vẻ như là một 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 hoạt động, hãy 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 tìm hiểu thêm?
Phần tốt nhất về lib. nhà thờ. d. định nghĩa loại ts là chúng phản ánh các loại được chú thích trong trang web tài liệu của Mạng nhà 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 là cả 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 liên kết đến các tài liệu tiêu chuẩn tương ứng. Đây là liên kết đến
Làm cách nào để tải tệp HTML trong TypeScript?
TypeScript - Viết chương trình đầu tiên của bạn bằng HTML và TS .
Chạy lệnh tsc trên dấu nhắc lệnh để xác minh cài đặt TypeScript
Tải xuống và cài đặt mã VS IDE. .
Mở thư mục dự án trong mã VS
Tạo hai tệp [Một. .
trong kịch bản. .
Mở thiết bị đầu cuối mã VS chạy "tập lệnh tsc. .
Bây giờ bạn có thể sử dụng máy chủ Node để chạy tập lệnh
Tôi có thể sử dụng HTML trong TypeScript không?
Làm cách nào để chuyển đổi mã HTML sang TypeScript?
Giả sử bạn có một số tệp JavaScript cần được chuyển đổi thành TypeScript. .
thêm tsconfig. tệp json vào dự án
Tích hợp với một công cụ xây dựng
Thay đổi tất cả. tập tin js để. tập tin ts
Kiểm tra bất kỳ lỗi nào
Làm cách nào để nhập tệp HTML trong Angular?
Cách đưa tệp HTML vào AngularJS .
Sử dụng “chỉ thị ng-gộp” để đưa mã vào tệp bên ngoài 'Bảng. html'. Tuyên bố đã được đánh dấu in đậm trong đoạn mã dưới đây. .
Trong bộ điều khiển, một biến "hướng dẫn" được tạo như một phần của đối tượng $scope. Biến này chứa danh sách các cặp khóa-giá trị