Cách lấy phần tử html trong nút js

Question

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

Nội dung chính Show

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 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);12
html

Hello, World!
51
Sự khác biệt giữa 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);61 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);62
Các 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 tìm hiểu thêm?
Làm cách nào để kết nối Nodejs với HTML?
Làm cách nào bạn có thể truy cập các phần tử HTML bằng JavaScript?

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
 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 chỉ mục. trang 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ụ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);

9

html

Hello, World!
0

Định nghĩa cho phương pháp này như sau

html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">

2

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
 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ã có kiểu

html
 id="app">
  
Hello, World!

5. Ngoài ra, hãy lưu ý rằng phương thức này có thể trả về

html
 id="app">
  
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
 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
// 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

Đâ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ỳ

html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">

20 nào 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ụ:

html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">

21 trả về phần tử

html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">

22, 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
html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">
  
23

Đố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.

html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">

25. Biểu thức này xác định một tham số chung

html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">

26 bị ràng buộc với các phím của giao diện

html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">

27. 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
// 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ột số phần tử không thể hiện các thuộc tính duy nhất và vì vậy 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
// 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. Đối số đầu tiê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);

12 được định nghĩa là tham số chung

html
 html>
 lang="en">
  </span><span>TypeScript Dom Manipulation</span><span>
  
     id="app">
    
     src="index.js">

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

4 từ đoạn mã nhận được một loại

html
 id="app">
  
Hello, World!

5. Và nếu mã 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);

10, thì nó sẽ là một phần tử kiể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);

11

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);12

Hàm

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 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
// 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);

16 mở rộng 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);

12. Tiện ích mở rộng nguyên mẫu này cho phép tất 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);

18 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
// 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);

12 để nối thêm phần tử

html
 id="app">
  
Hello, World!

4 mới vào trang web

html

Hello, World!
51

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

html
 id="app">
  
Hello, World!

52. Phần trướ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 , chi tiết rằng toán tử xâu chuỗi tùy chọn được sử dụng ở đây vì ________ 554 có thể có giá trị rỗng trong thời gian chạy. Phương pháp

html
 id="app">
  
Hello, World!

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

html
 id="app">
  
Hello, World!

5

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

html
 id="app">
  
Hello, World!

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

html
 id="app">
  
Hello, World!

58.

html
 id="app">
  
Hello, World!

57 bị ràng buộc với một giao diện cơ sở khá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);

12

Sự khác biệt giữa 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);61 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);62

Trước đây, tài liệu này trình bà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
// 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);

16 kéo dài 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);

12. Trong DOM API có khái niệm về phần tử con. Ví dụ trong HTML sau, các thẻ

html
 id="app">
  
Hello, World!

4 là con của 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);

67

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

Sau khi nắm bắt 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);

67, 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);

61 sẽ trả về danh sách

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

60 có chứa 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);

61. Thuộc 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);

62 sẽ trả về một danh sách các nút 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);

63. Mỗi thẻ

html
 id="app">
  
Hello, World!

4 sẽ vẫn thuộc 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);

61, như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);

63 có thể chứa các nút HTML bổ sung mà danh sách

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

60 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ữ nguyên văn bả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);

6

Xem cách cả hai danh sách thay đổ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);

61 hiện chỉ chứa 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);

70 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);

62 chứa một 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);

72 thay vì hai nút

html
 id="app">
  
Hello, World!

4. Phầ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);

72 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);

63 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);

12 theo nghĩa đen có chứa văn bả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);

77. Danh sách

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

61 không chứ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);

12 này vì nó không được coi là 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

Các 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 đề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
// 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);

7

Đị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 kiểu 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à

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

63 đã 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
// 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);

16 mở rộng 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);

12

Để 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);

0

Quan 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 Khuyến nghị của W3C cho HTMLElement

Làm cách nào để kết nối Nodejs với HTML?

đường dẫn. join(__dirname, 'views', 'add-user. html'); Điều này sẽ đề cập đến vị trí tệp thực tế của mã html người dùng bổ sung. Với việc sử dụng mô-đun đường dẫn, nó sẽ hoạt động trên mọi loại hệ điều hành mà không gặp lỗi.

Làm cách nào bạn có thể truy cập các phần tử HTML bằng JavaScript?

Từ DOM, người dùng có thể truy cập các phần tử HTML theo năm cách khác nhau trong JavaScript. .

Nhận phần tử HTML theo Id

Nhận phần tử HTML theo className

Nhận phần tử HTML theo Tên

Nhận phần tử HTML theo tagName

Nhận phần tử HTML bằng CSS Selector

programming html

Cách lấy phần tử html trong nút js

Ví dụ cơ bản

html Hello, World!0

html Hello, World!8

html Hello, World!51

Quan tâm đến việc tìm hiểu thêm?

Làm cách nào để kết nối Nodejs với HTML?

Làm cách nào bạn có thể truy cập các phần tử HTML bằng JavaScript?

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

html

Hello, World!
51