Nhập html vào bản thảo
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 Show
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 AnswersCách chính xác là sử dụng 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 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. 1. Loại này là xương sống để thao tác DOM với TypeScript
Ví dụ cơ bảnĐưa ra một chỉ số đơn giản hóa. tệp html
Hãy cùng khám phá một tập lệnh TypeScript thêm phần tử 3 vào phần tử 4
Sau khi biên dịch và chạy chỉ mục. trang html, HTML kết quả sẽ là
Giao diện ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a newelement programmaticallyconst p = document.createElement("p");// 3. Add the text contentp.textContent = "Hello, World!";// 4. Append the p element to the div elementapp?.appendChild(p);5Dòng đầu tiên của mã TypeScript sử dụng biến toàn cục 6. Kiểm tra biến cho thấy nó được xác định bởi giao diện 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, 8 và 9 htmlHello, World! Định nghĩa cho phương pháp này như sau
Truyền cho nó một chuỗi id phần tử và nó sẽ trả về 1 hoặc 2. Phương pháp này giới thiệu một trong những loại quan trọng nhất, 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 4 trong ví dụ mã có kiểu 5. Ngoài ra, hãy lưu ý rằng phương thức này có thể trả về 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 7 htmlHello, World! Định nghĩa cho phương pháp này là (Tôi đã bỏ qua định nghĩa không dùng nữa)
Đâ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 8. Vượt qua nó bất kỳ 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ất Ví dụ: 1 trả về phần tử 2, rõ ràng không phải là phần tử được chỉ định bởi đặc tả HTML
Đối với định nghĩa đầu tiên của 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. 5. Biểu thức này xác định một tham số chung 6 bị ràng buộc với các khóa của giao diện 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
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ề 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ừ 1) Bây giờ, phần còn lại của định nghĩa 9. 1. Đối số đầu tiên 2 được định nghĩa là tham số chung 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 4 từ đoạn mã nhận được một loại 5. Và nếu mã là 0, thì nó sẽ là một phần tử kiểu 1 Giao diện tsinterface HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; "address": HTMLElement; "applet": HTMLAppletElement; "area": HTMLAreaElement; ...}2Hàm 3 trả về một 1. Giao diện 1 mở rộng giao diện 6 mở rộng giao diện 2. Tiện ích mở rộng nguyên mẫu này cho phép tất cả 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 2 để nối thêm phần tử 4 mới vào trang web tsappendChild |