search

Thêm phần tử vào bộ sưu tập html

Ngày đăng: 06/02/2023
Trả lời: 0
Lượt xem: 166

Tuy nhiên, cả hai cách này đều bị hạn chế — chúng ta phải tạo phần tử HTML trong HTML của mình trước khi có thể hiển thị, ẩn hoặc thay đổi phần tử đó. Hãy mở rộng bộ công cụ của chúng tôi và tìm hiểu cách thực sự thêm và xóa các thành phần HTML khỏi tập lệnh của chúng tôi. Chúng tôi sẽ làm điều này bằng cách sử dụng các phương thức từ các đối tượng 

> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
  Show
  
​
> pElement.innerText;
"text"
4 và 
> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
5 (API Web). Ở cuối bài học này, chúng ta cũng sẽ liệt kê các liên kết đến các phương thức và thuộc tính bổ sung cũng có thể được sử dụng để thêm các thành phần HTML và nội dung văn bản

Bạn có thể tùy chọn mở DevTools của mình và thử mã mà chúng tôi trình bày trong bài học này

Tạo các phần tử mới

Để tạo các phần tử HTML mới, chúng ta sẽ sử dụng phương thức 

> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
6. Phương thức này có một tham số bắt buộc đối với tên thẻ HTML trong một chuỗi, chẳng hạn như 
> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
7, 
> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
8, 
> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
9, v.v. (Cũng có một tham số tùy chọn, nhưng chúng tôi sẽ không đề cập đến nó vì nó không hữu ích cho chúng tôi ngay bây giờ. ) Hãy xem xét một số ví dụ. Chúng tôi sẽ đặt những thứ này vào bảng điều khiển DevTools

> const pElement = document.createElement("p");
> pElement;

> Object.prototype.toString.call(pElement);
"[object HTMLParagraphElement]"

Có một số điều cần chú ý trong đoạn mã trên. Đầu tiên, phương thức 

> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
6 tạo các đối tượng phần tử HTML, cùng loại đối tượng mà chúng ta đã làm việc cho đến nay. Trong ví dụ của chúng tôi, vì chúng tôi đang tạo một phần tử đoạn văn, điều đó có nghĩa là chúng tôi đang làm việc với một đối tượng 
> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
1. Để xem danh sách đầy đủ tất cả các đối tượng phần tử HTML, hãy truy cập

Cũng lưu ý rằng phương thức 

> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
6 trả về một phần tử đoạn văn trống. Nếu chúng tôi muốn thêm văn bản hoặc thuộc tính, chúng tôi cần thực hiện điều đó như một bước riêng biệt

Đánh giá về tính kế thừa và cấu trúc trình duyệt

Hãy nhớ rằng các đối tượng phần tử HTML, như 

> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
1 hoặc 
> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
4, kế thừa chức năng từ nhiều đối tượng khác. MDN cung cấp một hình ảnh hữu ích trên trang tham khảo cho từng đối tượng phần tử HTML để cho chúng tôi thấy chuỗi chức năng kế thừa này. Ví dụ: nếu xem trang tham khảo 
> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
5, chúng ta sẽ thấy hình ảnh này trong phần mô tả ban đầu

Thêm phần tử vào bộ sưu tập html

Điều này cho chúng ta biết rằng một số thuộc tính và phương thức được kế thừa từ các đối tượng này

  • > const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
    6
  • > const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

    ​text​
    ​
> pElement.innerText;
"text"
    5
  • > const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
    8
  • > const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
    9

Chúng ta đã làm việc với các thuộc tính và phương thức từ tất cả các đối tượng trong danh sách này, ngoại trừ đối tượng 

> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
8 và chúng ta sẽ sớm tìm hiểu về đối tượng đó

Tất cả các đối tượng này (và nhiều đối tượng khác) kết hợp để tạo nên chức năng của DOM/HTML DOM và tất cả những đối tượng này được phân loại chung là API Web, các công cụ và tiêu chuẩn mô tả cách trình duyệt web hoạt động

API Web được chia thành hai loại

  • , chỉ đơn giản là các loại đối tượng, như 
    > const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

    Best Chocolate Chip Cookies
    
> firstH2.append(pElement);
> firstH2;

    Best Chocolate Chip Cookiestext and more text
    1, 
    > const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

    ​text​
    ​
> pElement.innerText;
"text"
    5, 
    > const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

    Best Chocolate Chip Cookies
    
> firstH2.append(pElement);
> firstH2;

    Best Chocolate Chip Cookiestext and more text
    3, 
    > const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

    Best Chocolate Chip Cookies
    
> firstH2.append(pElement);
> firstH2;

    Best Chocolate Chip Cookiestext and more text
    4, v.v.
  • , giống như DOM, đặt tên cho các tiêu chuẩn và chức năng của các công cụ web khác nhau. Thông số kỹ thuật (như DOM và các loại khác) luôn được tạo thành từ một hoặc nhiều giao diện (loại đối tượng)

Hy vọng rằng đây là một đánh giá khái niệm hữu ích về các cấu trúc và công cụ trình duyệt web mà chúng tôi đang sử dụng trong mã của mình. Khi chúng tôi nói về thông tin này, chúng tôi hoàn toàn "tìm hiểu sâu" về cách thức hoạt động của trình duyệt web. Có quá nhiều API Web. Nếu bạn xem trang chủ tài liệu MDN về API Web, bạn sẽ thấy một danh sách dài và rất có khả năng bạn sẽ không làm việc với phần lớn API Web trong toàn bộ sự nghiệp của mình với tư cách là nhà phát triển. Tuy nhiên, điều quan trọng là phải biết các cấu trúc cơ bản của web để chúng ta có thể biết nơi tham khảo thông tin mà chúng ta có thể cần trong tương lai

Nếu thông tin này quá nhiều, đừng lo lắng, bạn sẽ hiểu nó trong thời gian. Hiện tại, bạn chỉ cần tập trung vào việc lái xe. sử dụng các đối tượng, phương thức, thuộc tính và JavaScript mà chúng ta đã học cho đến nay

Thêm thuộc tính

Nhắc lại nhanh, nếu chúng ta muốn thêm, xóa hoặc lấy thuộc tính cho bất kỳ phần tử HTML nào, chúng ta cần sử dụng các phương thức này

Thêm văn bản

Chúng ta sẽ sử dụng phương pháp 

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5 để thêm văn bản vào một phần tử. Chúng tôi gọi phương thức này trên phần tử mà chúng tôi muốn thêm văn bản vào và đối số chúng tôi truyền vào sẽ là chuỗi có văn bản chúng tôi muốn thêm. Hãy nhìn vào mã

> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"

Thêm và xóa các phần tử vào/khỏi DOM

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5

Phương thức 

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5 cũng hoạt động để thêm các phần tử vào DOM. Phương thức 
> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5 sẽ thêm một phần tử mới bên trong và ở cuối phần tử mà chúng tôi đang nhắm mục tiêu

Đối số mà chúng tôi chuyển vào phần tử đại diện cho phần tử HTML mà chúng tôi đang thêm vào DOM. Hãy xem cách nó hoạt động. Bạn có thể thử đoạn mã sau trong DevTools trên bất kỳ trang web nào, vì gần như mọi trang web đều sử dụng phần tử div. Trong đoạn mã sau, chúng ta chỉ cần lấy div đầu tiên xuất hiện trong DOM và thêm một phần tử đoạn văn sau nó

________số 8_______

Với ví dụ đầu tiên này, vì chúng ta luôn lồng các phần tử khác bên trong div, nên phương thức 

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text


     (adsbygoogle = window.adsbygoogle || []).push({});
5 sẽ thêm phần tử mới vào cuối phần bên trong của div. Chúng ta sẽ thấy hành vi tương tự với UL và OL

Đối với các phần tử mà chúng ta không nên lồng các phần tử HTML khác vào bên trong, chẳng hạn như thêm thẻ đoạn văn bên trong tiêu đề, phương thức 

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5 vẫn sẽ thêm phần tử mới vào bên trong phần tử đó. Điều này là không tốt. Giả sử chúng tôi có phần tử tiêu đề H2 và chúng tôi đã thêm thẻ đoạn văn vào bên trong phần tử đó, phần tử H2 sẽ trông như thế này

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text

chúng tôi không muốn điều đó. Vì vậy, hãy cẩn thận về các trường hợp sử dụng của bạn

Chi tiết này về 

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5 có thể khó nhớ và có thể gây ra một số lỗi trong mã của chúng tôi nếu chúng tôi quên cách sử dụng nó đúng cách. Tuy nhiên, chúng ta không nên lo lắng về việc ghi nhớ các trường hợp sử dụng khác nhau cho 
> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5. Thay vào đó, chúng ta nên phát triển những thói quen tốt xung quanh việc tham khảo thông tin và gỡ lỗi. Một quy trình làm việc tốt ở đây sẽ là

  • Tham khảo tài liệu
  • Hãy dùng thử mã trong bảng điều khiển DevTools trước khi bạn thêm mã đó vào tập lệnh của mình
  • Sau khi bạn dùng thử trong bảng điều khiển DevTools, hãy kiểm tra các phần tử mới được thêm vào trong tab Thành phần của bảng điều khiển DevTools

Vì quy trình làm việc này rất quan trọng nên hãy xem lại một ví dụ về cách sử dụng tab Thành phần

Trong hình ảnh sau đây, chúng tôi đã tạo một thẻ p mới với văn bản 

> const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);
3. Sau đó, chúng tôi đã gắn thẻ p đó vào div đầu tiên trên trang chủ của LHTP tại learnhowtoprogram. com/bản nhạc. Chúng ta có thể thấy đoạn mới này thực sự trên trang web

> const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);

Thêm phần tử vào bộ sưu tập html

Nhưng làm cách nào để biết chính xác đoạn mới này đã được thêm vào đâu trong DOM? . Hình ảnh sau đây cho thấy kết quả của việc làm đó

Đây là sự cố về các điểm nổi bật khác nhau trong hình ảnh

  • Trước tiên, chúng tôi kích hoạt công cụ cho phép chúng tôi chọn một thành phần trên trang web để kiểm tra. Nút này được đánh dấu bằng vòng tròn màu đỏ. Khi chúng ta di chuột qua các phần tử khác nhau trên trang web bằng con trỏ chuột, trình kiểm tra DevTools sẽ tự động đánh dấu phần tử tương ứng trong HTML bên trong cửa sổ DevTools
  • Chúng tôi đã chọn đoạn văn mới 
    > const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);
    3 trên trang web bằng con trỏ, được đánh dấu trong hình chữ nhật màu đỏ
  • Trình kiểm tra đã hoàn thành công việc của mình bằng cách đánh dấu HTML cho thẻ p trong bảng điều khiển DevTools. Cái này được khoanh tròn trong hình chữ nhật màu cam
  • Hình chữ nhật màu xanh lá cây làm nổi bật div đầu tiên trên trang web. Bây giờ chúng tôi đã xác minh rằng mã 
    > const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);
    5 thực sự thêm thẻ p vào bên trong div ở cuối

Thêm phần tử vào bộ sưu tập html

> const p = document.createElement("p"); > p.append("This is a super cool p tag!"); > document.querySelector("div").append(p); 6

Phương thức 

> const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);
6 hoạt động giống hệt như phương thức 
> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5, chỉ khác là nó thêm một phần tử mới vào đầu và bên trong phần tử mà chúng ta gọi nó trên. Điều này rất tốt cho các phần tử 
> const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);
9, 
> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
0, 
> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
1, 
> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
2, 
> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
3 và các phần tử khác mà chúng tôi lồng các phần tử HTML bên trong

Nếu tôi muốn thêm một mục danh sách mới 

> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
4 vào đầu danh sách không có thứ tự, tôi sẽ sử dụng phương pháp 
> const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);
6

> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);

Lưu ý rằng bạn không thể in một phần tử nhiều lần bằng cách thêm trước hoặc thêm vào. Nếu chúng tôi làm như vậy, chúng tôi sẽ di chuyển cùng một phần tử xung quanh, đến đầu hoặc cuối phần tử, nhưng chúng tôi sẽ không in nhiều bản sao của cùng một phần tử. Ví dụ: đoạn mã sau sẽ chỉ để lại mục danh sách 

> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
4 ở cuối danh sách không có thứ tự

> const liElement = document.createElement("li");
> liElement.append("text");
> const firstUl = document.querySelector("ul");
> firstUl.prepend(liElement);
> firstUl.append(liElement);

Nếu chúng tôi muốn một mục danh sách được thêm vào trước và sau tiêu đề chúng tôi đang nhắm mục tiêu, chúng tôi sẽ phải tạo hai thành phần mục danh sách

> const li1 = document.createElement("li");
> const li2 = document.createElement("li");
> li1.append("text");
> li2.append("other text");
> const firstUl = document.querySelector("ul");
> firstUl.prepend(li1);
> firstUl.append(li2);

> const liElement = document.createElement("li"); > liElement.append("list item"); > const firstUL = document.querySelector("ul"); > firstUL.prepend(liElement); 7 và > const liElement = document.createElement("li"); > liElement.append("list item"); > const firstUL = document.querySelector("ul"); > firstUL.prepend(liElement); 8

Để thêm một phần tử vào trước hoặc sau một phần tử trong DOM chúng ta có thể sử dụng phương thức 

> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
7 hoặc 
> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
8. Những thứ này hoạt động theo cách tương tự như 
> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5 và 
> const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);
6

Chúng ta có thể thêm một phần tử trước hoặc sau một phần tử khác như vậy

> const p1 = document.createElement("p");
> const p2 = document.createElement("p");
> p1.append("text");
> p2.append("other text");
> const firstH2 = document.querySelector("h2");
> firstH2.before(p1);
> firstH2.after(p2);

Chúng tôi chỉ có thể sử dụng một phần tử mới được tạo một lần trong DOM. Trong ví dụ sau, phần tử đoạn mới tạo sẽ được thêm vào sau thẻ H2

> const p1 = document.createElement("p");
> p1.append("some text");
> const firstH2 = document.querySelector("h2");
> firstH2.before(p1);
> firstH2.after(p1);

Xóa một phần tử

Nếu chúng ta muốn xóa một phần tử khỏi DOM, chúng ta chỉ cần lấy nó bằng phương thức 

> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
4 và gọi phương thức 
> const liElement = document.createElement("li");
> liElement.append("text");
> const firstUl = document.querySelector("ul");
> firstUl.prepend(liElement);
> firstUl.append(liElement);
4 trên đó

> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
0

Thêm nhiều phần tử vào DOM cùng một lúc

Chúng ta có thể thêm nhiều phần tử cùng lúc bằng các phương thức 

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5, 
> const p = document.createElement("p");
> p.append("This is a super cool p tag!");
> document.querySelector("div").append(p);
6, 
> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
8 và 
> const liElement = document.createElement("li");
> liElement.append("list item");
> const firstUL = document.querySelector("ul");
> firstUL.prepend(liElement);
7 bằng cách chuyển vào một loạt đối số, mỗi đối số đại diện cho một phần tử HTML

Đây là một ví dụ với 

> const pElement = document.createElement("p");
> pElement.append("text and more text");
> const firstH2 = document.querySelector("h2");
> firstH2;

Best Chocolate Chip Cookies

> firstH2.append(pElement);
> firstH2;

Best Chocolate Chip Cookiestext and more text
5

> const pElement = document.createElement("p");
> pElement;

> pElement.append("text");
> pElement;

​text​
​
> pElement.innerText;
"text"
1

Bây giờ chúng tôi có một danh sách các hương vị kem yêu thích không theo thứ tự được thêm ngẫu nhiên vào cuối bên trong div đầu tiên của trang web mà chúng tôi đang truy cập

Thêm để khám phá trên MDN

Có nhiều phương pháp và thuộc tính hơn để khám phá giúp chúng tôi thêm văn bản và HTML vào trang web của mình. Chúng tôi sẽ không đề cập đến tất cả chúng trong chương trình giảng dạy, nhưng chúng tôi sẽ xem xét một số trong số chúng trong các bài học sắp tới. Như mọi khi, bạn có thể tự khám phá chúng — và bạn có thể chỉ thấy các ví dụ mã trực tuyến sử dụng các công cụ này

Tập hợp các phương thức và thuộc tính đầu tiên này trả về các đối tượng liên quan đến 

> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
8 hoặc 
> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
8 hoặc thuộc về chính đối tượng 
> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
8. Chúng ta sẽ xem lại những điều này trong khóa học JavaScript trung cấp và danh sách sau đây chỉ là một mẫu của nhiều phương thức và thuộc tính khác. Hãy nhớ rằng 
> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
8 là một đối tượng trong chuỗi chức năng kế thừa cho các đối tượng phần tử HTML như 
> const pElement = document.createElement("p");
> pElement.append("text");
> const firstDiv = document.querySelector("div");
> firstDiv.append(pElement);
5 và 
> const li1 = document.createElement("li");
> const li2 = document.createElement("li");
> li1.append("text");
> li2.append("other text");
> const firstUl = document.querySelector("ul");
> firstUl.prepend(li1);
> firstUl.append(li2);
5

Nhóm phương thức và thuộc tính thứ hai này chúng ta sẽ không đề cập trong giáo trình

Nếu bạn không quan tâm đến việc khám phá thêm, bạn chắc chắn không cần phải. Tất cả các phương pháp để thêm và xóa các phần tử HTML vào/khỏi DOM mà chúng tôi đã trình bày trong bài học này sẽ đáp ứng nhu cầu của chúng tôi đối với các trang web mà chúng tôi xây dựng

Bộ sưu tập HTML trực tiếp là gì?

Tập hợp "trực tiếp" trong JavaScript là tập hợp các phần tử DOM nơi các thay đổi đối với DOM được phản ánh trong đối tượng tập hợp (chẳng hạn như khi .

Làm cách nào tôi có thể tìm thấy số phần tử trong bộ sưu tập HTML?

Một HTMLCollection là một tập hợp (danh sách) các phần tử HTML dạng mảng. Các phần tử trong một bộ sưu tập có thể được truy cập theo chỉ mục (bắt đầu từ 0). Thuộc tính độ dài trả về số phần tử trong tập hợp .

programming html

Bài Viết Liên Quan

Bị gãy mũi thì vào viện nào tại hà nội năm 2024
Bị gãy mũi thì vào viện nào tại hà nội năm 2024

mẹo hay
18 là gì trong bảng tuần hoàn hóa học năm 2024
18 là gì trong bảng tuần hoàn hóa học năm 2024

là ai Hỏi Đáp Là gì Học Tốt Học Bảng hóa trị
Bài văn tả cây phượng vĩ lớp 2 văn mẫu năm 2024
Bài văn tả cây phượng vĩ lớp 2 văn mẫu năm 2024

mẹo hay Cây phượng
46 trần quang diệu phường long toàn là cty gì năm 2024
46 trần quang diệu phường long toàn là cty gì năm 2024

là ai ATYS shop ATYS CARDIGAN Áo khoác ATYS Áo ATYS
Mừng mùa lễ hội năm 2023 ngày nào năm 2024
Mừng mùa lễ hội năm 2023 ngày nào năm 2024

mẹo hay
Không còn hóa đơn đỏ hóa đơn điện tử năm 2024
Không còn hóa đơn đỏ hóa đơn điện tử năm 2024

mẹo hay thông tư 78/2024/tt-btc
Lời hẹn ước 10 năm của tfboys là gì năm 2024
Lời hẹn ước 10 năm của tfboys là gì năm 2024

là ai Hỏi Đáp Là gì
Bộ văn hóa thẻ thao và du lịch năm 2024
Bộ văn hóa thẻ thao và du lịch năm 2024

mẹo hay
Người k mập nhưng bụng to là bị gì năm 2024
Người k mập nhưng bụng to là bị gì năm 2024

là ai
Bài văn thuyết minh về cái mắt kính lớp 8 năm 2024
Bài văn thuyết minh về cái mắt kính lớp 8 năm 2024

mẹo hay
Mơ thấy mẹ chết là điềm gì năm 2024
Mơ thấy mẹ chết là điềm gì năm 2024

là ai
Văn khấn tổ tiên ngày rằm tháng 7 năm 2024
Văn khấn tổ tiên ngày rằm tháng 7 năm 2024

mẹo hay
Hóa 11 bài 21 sách giáo khoa nâng cao năm 2024
Hóa 11 bài 21 sách giáo khoa nâng cao năm 2024

mẹo hay Học Tốt Sách
Sử dụng điện thoại như thế nào cho hợp lý năm 2024
Sử dụng điện thoại như thế nào cho hợp lý năm 2024

mẹo hay Hỏi Đáp Thế nào
Top ca xuan ho ngoc ha thuy tien năm 2024
Top ca xuan ho ngoc ha thuy tien năm 2024

mẹo hay Top List Top
Chi phí thực tính tiếng anh là gì năm 2024
Chi phí thực tính tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Cost la gì
Bài tập toán 12 luỹ thừa mũ số thực năm 2024
Bài tập toán 12 luỹ thừa mũ số thực năm 2024

mẹo hay Khỏe Đẹp Bài tập Cấp số mũ Lớp 12 Công thức mũ
Hoạt động chung của 3 trường đại học là gì năm 2024
Hoạt động chung của 3 trường đại học là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Học Đại học
Bài tập sinh học lớp 10 bài 22 năm 2024
Bài tập sinh học lớp 10 bài 22 năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Học
Môn khoa học tiếng anh đọc là gì năm 2024
Môn khoa học tiếng anh đọc là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Học Tiếng anh

Quảng Cáo

Có thể bạn quan tâm

Bài tập chứng minh phương trình vi phân năm 2024
1 ngày trước . bởi FlourishingKangaroo
Người bảo lãnh du học tiếng anh là gì năm 2024
1 ngày trước . bởi FoolishCertainty
Hóa phân tích nguyễn tinh dung tập 3 năm 2024
1 ngày trước . bởi RubberyListener
Quá trình công nghiệp hóa hiện đại hóa là gì năm 2024
1 ngày trước . bởi Behind-the-scenesPhysique
Bài tập thì hiện tại tiếp diễn đơn giản năm 2024
1 ngày trước . bởi EverlastingBonding
Các phương pháp giải nhanh hóa vô cơ 12 năm 2024
1 ngày trước . bởi BouncingCaught
Ở đây sương khói mờ nhân ảnh nghĩa là gì năm 2024
1 ngày trước . bởi OverworkedJurisprudence
17 23 phố đồng lễ p đông hải thanh hóa năm 2024
1 ngày trước . bởi LumberingBarrymore
Khi biết em mang kiếp cầm ca là bài gì năm 2024
1 ngày trước . bởi WantedConfiguration
Quân đội thời trần gồm những bộ phận nào năm 2024
1 ngày trước . bởi MutedBonding

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Last seen recently nghĩa là gì năm 2024
1 tuần trước . bởi High-levelRelaxation
Dđiện trở các cặp dây máy nén là bao nhiêu năm 2024
1 tuần trước . bởi TelevisedNarration
Vietnam airline được ký gửi bao nhiêu kg năm 2024
1 tuần trước . bởi ProlongedSeating
Bài văn viết về sở thích bằng tiếng anh năm 2024
5 ngày trước . bởi SucceedingSubcommittee
Bê tông thương phẩm mác 250 là gì năm 2024
5 ngày trước . bởi AttentivePrivacy
Tuổi tân mùi hợp tuổi nào mở hàng khai trương năm 2024
3 ngày trước . bởi PatrioticBonding
Sữa tươi nào tốt nhất cho bà bầu năm 2024
1 tuần trước . bởi Cold-bloodedEaster
Quạt treo tường điều khiển từ xa loại nào tốt năm 2024
4 ngày trước . bởi IncapableCracker
Làm thế nào để cài nhạc chuông cho iphone 6 năm 2024
4 ngày trước . bởi NamedNylon
Sau when là quá khứ đơn trước when là gì năm 2024
5 ngày trước . bởi ImmortalSchooner

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 boxhoidap.com Inc.