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ì?

Question

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 propertyconst app = document.getElementById("app");// 2. Create a new
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.

Nội dung chính Show

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 propertyconst app = document.getElementById("app");// 2. Create a new
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
Ví dụ cơ bản
Giao diện ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new
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
html

Hello, World!
0
html

Hello, World!
8
Giao diện tsinterface HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; "address": HTMLElement; "applet": HTMLAppletElement; "area": HTMLAreaElement; ...}2
tsappendChild(newChild: T): T;1
Sự khác biệt giữa tsx

Hello, World

TypeScript!
;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(2) [p, p]div.childNodes;// NodeList(2) [p, p] (adsbygoogle = window.adsbygoogle || []).push({}); 1 và tsx

Hello, World

TypeScript!
;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(2) [p, p]div.childNodes;// NodeList(2) [p, p]2
Phương pháp ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new
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
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
Quan tâm đến việc học thêm?
Phần tử loại trong TypeScript là gì?
Phần tử loại trong JavaScript là gì?
Phần tử nào là phần tử có ý nghĩa trong HTML?
HTMLelement trong góc là gì?

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
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">

src="index.js">

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
 id="app">
  
Hello, World!

Giao diện ts// 1. Select the div element using the id propertyconst app = document.getElementById("app");// 2. Create a new
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
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
 id="app">
  
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
 id="app">
  
Hello, World!

4 trong ví dụ mã là loại

html
 id="app">
  
Hello, World!

5. Cũng lưu ý rằng phương pháp này có thể trả về

html
 id="app">
  
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
 id="app">
  
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<K extends keyof HTMLElementTagNameMap>(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<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;

1. Đối số đầu tiên

ts
createElement<K extends keyof HTMLElementTagNameMap>(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<K extends keyof HTMLElementTagNameMap>(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<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;

6 lấy đối số

ts
createElement<K extends keyof HTMLElementTagNameMap>(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
 id="app">
  
Hello, World!

4 từ đoạn mã có một loại

html
 id="app">
  
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 tsinterface 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
 id="app">
  
Hello, World!

4 mới vào trang web.

tsappendChild(newChild: T): T;1

Dòng cuối cùng của đoạn mã là

ts
appendChild<T extends Node>(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<T extends Node>(newChild: T): T;

4 có khả năng có thể không có thời gian chạy. Phương thức

html
 id="app">
  
Hello, World!

7 được xác định bởi:

ts
appendChild<T extends Node>(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<T extends Node>(newChild: T): T;

7 được suy ra từ đối số

ts
appendChild<T extends Node>(newChild: T): T;

8.

ts
appendChild<T extends Node>(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

Hello, World

TypeScript!
;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(2) [p, p]div.childNodes;// NodeList(2) [p, p] (adsbygoogle = window.adsbygoogle || []).push({}); 1 và tsx

Hello, World

TypeScript!
;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
 id="app">
  
Hello, World!

4 là con của phần tử

tsx
  
Hello, World
  
TypeScript!
;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

7

tsx
  
Hello, World
  
TypeScript!
;
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
  
Hello, World
 
TypeScript!
;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(2) [p, p]
div.childNodes;
// NodeList(2) [p, p]

7,

tsx
  
Hello, World
  
TypeScript!
;
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
  
Hello, World
  TypeScript!
;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

0 chứa

tsx
  
Hello, World
  TypeScript!
;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

1. Thuộc tính

tsx
  
Hello, World
  
TypeScript!
;
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
 id="app">
  
Hello, World!

4 vẫn sẽ thuộc loại

tsx
  
Hello, World
  TypeScript!
;
const div = document.getElementsByTagName("div")[0];
div.children;
// HTMLCollection(1) [p]
div.childNodes;
// NodeList(2) [p, text]

1, nhưng

tsx
  
Hello, World
  TypeScript!
;
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
  
Hello, World
  TypeScript!
;
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
 id="app">
  
Hello, World!

4, nhưng giữ văn bản.

tsx
  
Hello, World
  TypeScript!
;
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
  
Hello, World
 
TypeScript!
;
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<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

0 và

tsx
  
Hello, World
  
TypeScript!
;
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<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

2 thay vì hai nút

html
 id="app">
  
Hello, World!

4. Phần

ts
/**
 * Returns the first element that is a descendant of node that matches selectors.
 */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

2 của

tsx



  
Hello, World
  TypeScript!
;
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<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

7. Danh sách

tsx
  
Hello, World
  
TypeScript!
;
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 propertyconst app = document.getElementById("app");// 2. Create a new
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
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.
 */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;
/**
 * Returns all element descendants of node that match selectors.
 */
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

Đị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
  
Hello, World
 TypeScript!
;
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);

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
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

programming html HTML element TypeScript HTML JSX element

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

Ví dụ cơ bản

html Hello, World!0

html Hello, World!8

Giao diện tsinterface HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; "address": HTMLElement; "applet": HTMLAppletElement; "area": HTMLAreaElement; ...}2

tsappendChild(newChild: T): T;1

Quan tâm đến việc học thêm?

Phần tử loại trong TypeScript là gì?

Phần tử loại trong JavaScript là gì?

Phần tử nào là phần tử có ý nghĩa trong HTML?

My First Heading

HTMLelement trong góc là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

html

Hello, World!
0

html

Hello, World!
8