Một cuộc thám hiểm vào loại ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
<!DOCTYPEhtml>
<htmllang="en">
<head><title>TypeScript Dom Manipulation</title></head>
<body>
<divid="app"></div>
<!-- Assume index.js is the compiled output of index.ts -->
<scriptsrc="index.js"></script>
</body>
</html>
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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
<divid="app">
<p>Hello, World!</p>
</div>
Giao diện ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
// 1. Select the div element using the id property
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
<divid="app">
<p>Hello, World!</p>
</div>
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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
<divid="app">
<p>Hello, World!</p>
</div>
4 trong ví dụ mã là loại
html
<divid="app">
<p>Hello, World!</p>
</div>
5. Cũng lưu ý rằng phương pháp này có thể trả về
html
<divid="app">
<p>Hello, World!</p>
</div>
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
<divid="app">
<p>Hello, World!</p>
</div>
7.
html<div id="app"> <p>Hello, World!</p></div>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):
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ố
// 1. Select the div element using the id property
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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 propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);01 và ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new <p></p> element programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.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.
// 1. Select the div element using the id property
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
interfaceHTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
...
}
6 kéo dài từ
ts
interfaceHTMLElementTagNameMap {
"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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = document.createElement("p");
// 3. Add the text content
p.textContent = "Hello, World!";
// 4. Append the p element to the div element
app?.appendChild(p);
0
Quan 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
constapp = document.getElementById("app");
// 2. Create a new <p></p> element programmatically
constp = 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
Tôi có thể sử dụng HTML trong TypeScript không?
Chạy ứng dụng Web TypeScript của bạn HTML trong trình duyệt để chạy ứng dụng web TypeScript đơn giản đầu tiên của bạn! Tùy chọn: Mở Greeter. TS trong Visual Studio, hoặc sao chép mã vào sân chơi TypeScript.html in the browser to run your first simple TypeScript web application! Optional: Open greeter. ts in Visual Studio, or copy the code into the TypeScript playground.
Loại phần tử HTML trong TypeScript là gì?
Loại htmlelement Theo TypeScriptlang.org, HTMLelement là một xương sống cho thao tác DOM trong TypeScript. Trực tiếp từ mã nguồn TypeScript: bất kỳ phần tử HTML nào. Một số yếu tố trực tiếp thực hiện giao diện này, trong khi các yếu tố khác thực hiện nó thông qua một giao diện kế thừa nó.Any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.”
Tôi có thể sử dụng tài liệu GetEuityByid trong TypeScript không?
Để sử dụng tài liệu.phương thức getEuityById () trong TypeScript: Sử dụng xác nhận loại để nhập chính xác phần tử đã chọn.Sử dụng bảo vệ loại để đảm bảo biến không lưu trữ giá trị null.Use a type assertion to type the selected element correctly. Use a type guard to make sure the variable does not store a null value.
Lib dom d ts là gì?
Một tập tin khai báo đặc biệt lib.d.TS vận chuyển với mỗi lần cài đặt TypeScript.Tệp này chứa các khai báo xung quanh cho các cấu trúc JavaScript phổ biến khác nhau có trong JavaScript Runtimes và DOM. lib. d. ts ships with every installation of TypeScript. This file contains the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM.
