Đối tượng htmlcollection thành chuỗi trong javascript

Bạn đã bao giờ muốn lặp lại một đối tượng giống như mảng chưa? . Chúng bao gồm các đối tượng có thuộc tính độ dài, chẳng hạn như HTMLCollection, NodeList, danh sách đối số và thậm chí cả chuỗi. Hôm nay tôi sẽ chỉ cho bạn cách làm cho các đối tượng này hữu ích hơn một chút, bằng cách chuyển đổi chúng thành các mảng JavaScript

Hãy bắt đầu với một kịch bản đơn giản nơi chúng ta có 5 div. Mỗi div có cùng một lớp và chúng tôi truy vấn HTMLCollection bằng cách sử dụng 'getElementsByClassName'

Dưới đây là 4 cách để chuyển đổi HTMLCollection trả về thành một mảng

Chuyển đổi thành mảng bằng toán tử trải rộng

Toán tử trải rộng sẽ cho phép chúng tôi mở rộng các giá trị của đối tượng giống như mảng của chúng tôi và đẩy chúng vào một mảng mới. Điều này hoạt động vì HTMLCollection có thể lặp lại. Mã trông giống như thế này

const boxArray = [...document.getElementsByClassName['box']];

Chuyển thành mảng sử dụng Array. từ[]

Mảng. từ nó nghe như thế nào; . Đây là phương pháp ưa thích của tôi để chuyển đổi thành mảng vì nó rất dễ đọc về mặt ngữ nghĩa trong nháy mắt. Bạn nên lưu ý rằng phương pháp này không thực sự được hỗ trợ bởi Internet Explorer, nhưng dù sao bây giờ ai quan tâm đến Internet Explorer…

const boxes = Array.from[document.getElementsByClassName['box']];

Chuyển thành mảng sử dụng Array. nguyên mẫu. lát cắt. cuộc gọi[]

Được hỗ trợ rộng rãi hơn, chúng ta có thể sử dụng Array. nguyên mẫu. lát cắt. gọi [] [hoặc []. lát cắt. gọi tắt] các phương thức chuyển đổi. Về cơ bản, chúng tôi đang sử dụng phương thức mảng 'slice' [trả về một bản sao của một mảng] trên một đối tượng giống như mảng với một phương thức 'gọi', sau đó lưu bản sao vào một đối tượng mảng mới

var boxes = Array.prototype.slice.call[document.getElementsByClassName['box']];

var boxes = [].slice.call[document.getElementsByClassName['box']];

Chuyển đổi thành mảng bằng vòng lặp iterator

Cuối cùng, nhưng không kém phần quan trọng, bạn có thể giải quyết vấn đề này theo cách cổ điển; . Từ đây, chúng ta có thể lặp đối tượng giống như mảng của mình 'nguyên trạng' hoặc đẩy từng lần lặp sang một mảng mới [trong trường hợp này là 'boxArray'] để sử dụng trong tương lai

Một

const p = document.getElementsByTagName['p'][2]

1 là một đối tượng dạng mảng đại diện cho một tập hợp các phần tử HTML được trích xuất từ ​​tài liệu. Nó luôn hoạt động và được sắp xếp, điều đó có nghĩa là các sửa đổi đối với DOM sẽ tự động được áp dụng cho các thành phần của bộ sưu tập

Trong bài viết này, chúng ta sẽ xem xét chi tiết về

const p = document.getElementsByTagName['p'][2]

1, nó là gì và cách sử dụng nó trong JavaScript. Chúng ta cũng sẽ thảo luận ngắn gọn về sự khác biệt giữa một

const p = document.getElementsByTagName['p'][2]

1 và một NodeList, một đối tượng khác tương tự như

const p = document.getElementsByTagName['p'][2]

1

Tạo một

const p = document.getElementsByTagName['p'][2]

1

const p = document.getElementsByTagName['p'][2]

2 trả về một đối tượng

const p = document.getElementsByTagName['p'][2]

1. Ví dụ sau chọn tất cả các phần tử

const p = document.getElementsByTagName['p'][2]

4 trong tài liệu

const elems = document.getElementsByTagName['p']

Các phần tử trong bộ sưu tập có thể được truy cập bằng chỉ số, tên hoặc ID. Để truy cập

const p = document.getElementsByTagName['p'][2]

4 thứ ba trong bộ sưu tập, bạn có thể viết

const p = document.getElementsByTagName['p'][2]

Để truy cập phần tử theo tên hoặc ID,

const p = document.getElementsByTagName['p'][2]

1 cung cấp phương thức

const p = document.getElementsByTagName['p'][2]

7. Ví dụ sau lấy thẻ

const p = document.getElementsByTagName['p'][2]

4 có ID

const p = document.getElementsByTagName['p'][2]

9 từ bộ sưu tập

const boxArray = [...document.getElementsByClassName['box']];

2

Chiều dài của

const p = document.getElementsByTagName['p'][2]

1

Cũng giống như

const boxArray = [...document.getElementsByClassName['box']];

21,

const p = document.getElementsByTagName['p'][2]

1 cũng hỗ trợ thuộc tính

const boxArray = [...document.getElementsByClassName['box']];

23 trả về tổng số phần tử bên trong tập hợp

const boxArray = [...document.getElementsByClassName['box']];

5

Thuộc tính

const boxArray = [...document.getElementsByClassName['box']];

23 rất hữu ích khi bạn muốn lặp qua các phần tử HTML trong bộ sưu tập

const boxArray = [...document.getElementsByClassName['box']];

7

Lặp lại trên một

const p = document.getElementsByTagName['p'][2]

1

Ngoài vòng lặp for cổ điển mà chúng ta đã thảo luận ở trên, câu lệnh

const boxArray = [...document.getElementsByClassName['box']];

26 cũng có thể được sử dụng để lặp lại một

const p = document.getElementsByTagName['p'][2]

1

const boxArray = [...document.getElementsByClassName['box']];

9

Không giống như

const boxArray = [...document.getElementsByClassName['box']];

21,

const p = document.getElementsByTagName['p'][2]

1 không hỗ trợ phương pháp

const boxArray = [...document.getElementsByClassName['box']];

50. Tuy nhiên, bạn có thể sử dụng phương thức

const boxArray = [...document.getElementsByClassName['box']];

51 để chuyển đổi

const p = document.getElementsByTagName['p'][2]

1 thành một mảng bình thường, sau đó sử dụng

const boxArray = [...document.getElementsByClassName['box']];

50 để lặp lại nó

const boxes = Array.from[document.getElementsByClassName['box']];

4

Hãy xem hướng dẫn này để tìm hiểu về các cách khác nhau để lặp lại các phần tử DOM

const p = document.getElementsByTagName['p'][2]

1 so với. Mảng

Một đối tượng

const p = document.getElementsByTagName['p'][2]

1 có thể trông giống như một mảng, nhưng nó không phải là một mảng. Cả hai là hai điều hoàn toàn khác nhau. Giống như một mảng, bạn có thể lặp qua bộ sưu tập và tham chiếu đến các phần tử của nó bằng một số chỉ mục

Tuy nhiên, bạn không thể sử dụng các phương thức mảng phổ biến như

const boxArray = [...document.getElementsByClassName['box']];

56,

const boxArray = [...document.getElementsByClassName['box']];

57,

const boxArray = [...document.getElementsByClassName['box']];

58 và

const boxArray = [...document.getElementsByClassName['box']];

59 trên một

const boxArray = [...document.getElementsByClassName['box']];

70

const p = document.getElementsByTagName['p'][2]

1 so với.

const boxArray = [...document.getElementsByClassName['box']];

21

Cả

const p = document.getElementsByTagName['p'][2]

1 và

const boxArray = [...document.getElementsByClassName['box']];

21 đều là tập hợp các phần tử DOM. Sự khác biệt duy nhất là trong các phương thức họ cung cấp và loại nút họ có thể lưu trữ

Một

const p = document.getElementsByTagName['p'][2]

1 chỉ có thể chứa các phần tử HTML, trong khi một

const boxArray = [...document.getElementsByClassName['box']];

21 có thể chứa bất kỳ thứ gì, các phần tử HTML, nhận xét, thuộc tính, văn bản, v.v.

Một

const p = document.getElementsByTagName['p'][2]

1 cung cấp các phương thức giống như một

const boxArray = [...document.getElementsByClassName['box']];

21 và một phương thức bổ sung

const boxArray = [...document.getElementsByClassName['box']];

79 để truy cập các phần tử bộ sưu tập theo tên hoặc ID. Các phần tử

const boxArray = [...document.getElementsByClassName['box']];

21 chỉ có thể truy cập bằng một chỉ mục số

Cả

const boxArray = [...document.getElementsByClassName['box']];

21 và

const p = document.getElementsByTagName['p'][2]

1 đều không phải là mảng, vì vậy bạn không thể sử dụng các phương thức mảng như

const boxArray = [...document.getElementsByClassName['box']];

56,

const boxArray = [...document.getElementsByClassName['box']];

57,

const boxArray = [...document.getElementsByClassName['box']];

58 và

const boxArray = [...document.getElementsByClassName['box']];

59 cho cả hai

Tóm lược

Trong bài viết này, chúng ta đã tìm hiểu về đối tượng

const p = document.getElementsByTagName['p'][2]

1 và cách sử dụng nó trong JavaScript. Tóm lại

Đối tượng HTMLCollection trong JavaScript là gì?

HTMLCollection có phải là một mảng không?

Tùy chọn nào sau đây sẽ trả về một đối tượng HTMLCollection?

HTMLCollection trực tiếp là gì?