Hướng dẫn htmlcollection to array - htmlcollection thành mảng

Question

Tôi muốn có được tất cả các phần tử HTML với lớp "hộp" và sau đó bộ sưu tập đó chuyển đổi nó thành một mảng để tôi có thể kích hoạt từng phần tử thông qua vị trí.

Nội dung chính Show

dom đối tượng htmlcollection
Đối tượng HTMLCollection
Phương thức function BoxAppearence() { var BoxCollection = document.getElementsByClassName("Box"); var BoxArray = Array.from(BoxCollection); console.log("### BoxCollection ###"); console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection)); console.log(BoxCollection); console.log(BoxCollection[12]) console.log('\n\n'); console.log("### BoxArray ###"); console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray)); console.log(BoxArray); console.log(BoxArray[12]); } BoxAppearence();3 sẽ trả về một đối tượng function BoxAppearence() { var BoxCollection = document.getElementsByClassName("Box"); var BoxArray = Array.from(BoxCollection); console.log("### BoxCollection ###"); console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection)); console.log(BoxCollection); console.log(BoxCollection[12]) console.log('\n\n'); console.log("### BoxArray ###"); console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray)); console.log(BoxArray); console.log(BoxArray[12]); } BoxAppearence();4.
Nội dung chính Show
HTML HTMLCollection Length
Cây đối tượng DOM
Đối tượng document
getElementsByTagName
getElementsByClassName
Phần tử trong DOM - HTMLElement
Tổng kết

Đây là mã tôi đã làm:

function BoxAppearence() {
    
    var BoxCollection = document.getElementsByClassName("Box");
    console.log(BoxCollection)
    var Box = BoxCollection.split("");
    console.log(Box)
    
    console.log(Box[12])
}

BoxAppearence();

Hỏi ngày 8 tháng 7 năm 2021 lúc 15:21Jul 8, 2021 at 15:21

4

Như đã đề cập trong nhận xét, bạn có thể chuyển đổi bộ sưu tập HTML của mình thành một mảng bằng cách sử dụng

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

2.

Dù sao, nếu lý do duy nhất của bạn để chuyển đổi bộ sưu tập thành một mảng có thể truy cập một phần tử theo chỉ mục/vị trí của nó, như bạn có thể thấy từ đoạn mã bên dưới, bạn cũng có thể làm điều đó với một bộ sưu tập HTML (mặc dù thực sự bạn sẽ được sử dụng một "khóa" đối tượng thay vì chỉ mục).

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

Đã trả lời ngày 9 tháng 7 năm 2021 lúc 7:52Jul 9, 2021 at 7:52

Secansecansecan

2.4491 Huy hiệu vàng6 Huy hiệu bạc22 Huy hiệu đồng1 gold badge6 silver badges22 bronze badges

dom đối tượng htmlcollection

Đối tượng HTMLCollection

Phương thức

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

3 sẽ trả về một đối tượng

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

4.

Nội dung chính ShowShow

dom đối tượng htmlcollection
Đối tượng HTMLCollection

Phương thức

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

3 sẽ trả về một đối tượng

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

4.

Nội dung chính Show
HTML HTMLCollection Length
Cây đối tượng DOM
Đối tượng document
Chọn phần tử trong DOM
getElementsByClassName
Phần tử trong DOM - HTMLElement
Tổng kết

Toàn bộ cấu trúc HTML của trang được mô tả trong

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

3, Javascript truy cập tới DOM thông qua đối tượng xây dựng sẵn là

const myCollection = document.getElementsByTagName("p");

9

Tìm một phần tử trong DOM bằng cách sử dụng các phương thức:

5,

6,

7

Mỗi phần tử DOM lại có các thuộc tính, phương thức quá đó có thể tương tác với HTML một cách dễ dàng. Các phần sau chúng ta sẽ tìm cách tương tác với các phần tử DOM

const myCollection = document.getElementsByTagName("p");

dom đối tượng htmlcollection

Đối tượng HTMLCollection

myCollection[1]

Phương thức

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

3 sẽ trả về một đối tượng
function BoxAppearence() { var BoxCollection = document.getElementsByClassName("Box"); var BoxArray = Array.from(BoxCollection); console.log("### BoxCollection ###"); console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection)); console.log(BoxCollection); console.log(BoxCollection[12]) console.log('\n\n'); console.log("### BoxArray ###"); console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray)); console.log(BoxArray); console.log(BoxArray[12]); } BoxAppearence();
4.

Nội dung chính Show Chỉ mục bắt đầu từ 0.

Phương thức function BoxAppearence() { var BoxCollection = document.getElementsByClassName("Box"); var BoxArray = Array.from(BoxCollection); console.log("### BoxCollection ###"); console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection)); console.log(BoxCollection); console.log(BoxCollection[12]) console.log('\n\n'); console.log("### BoxArray ###"); console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray)); console.log(BoxArray); console.log(BoxArray[12]); } BoxAppearence();3 sẽ trả về một đối tượng function BoxAppearence() { var BoxCollection = document.getElementsByClassName("Box"); var BoxArray = Array.from(BoxCollection); console.log("### BoxCollection ###"); console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection)); console.log(BoxCollection); console.log(BoxCollection[12]) console.log('\n\n'); console.log("### BoxArray ###"); console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray)); console.log(BoxArray); console.log(BoxArray[12]); } BoxAppearence();4.

Nội dung chính ShowHTMLC.

HTML HTMLCollection Length

Mỗi phần tử DOM lại có các thuộc tính, phương thức quá đó có thể tương tác với HTML một cách dễ dàng. Các phần sau chúng ta sẽ tìm cách tương tác với các phần tử DOM

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

Phương thức

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

3 sẽ trả về một đối tượng
function BoxAppearence() { var BoxCollection = document.getElementsByClassName("Box"); var BoxArray = Array.from(BoxCollection); console.log("### BoxCollection ###"); console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection)); console.log(BoxCollection); console.log(BoxCollection[12]) console.log('\n\n'); console.log("### BoxArray ###"); console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray)); console.log(BoxArray); console.log(BoxArray[12]); } BoxAppearence();
4.

Nội dung chính Show
Tập hợp HTMLC có thể giống như một mảng, nhưng không phải là mảng.
Chúng ta có thể lặp qua danh sách và tham chiếu đến các phần tử bằng một chỉ mục (giống như một mảng).
Tuy nhiên, chúng ta không thể sử dụng các phương thức mảng như

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

9,

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

0,

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

1 hoặc

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

2 trên HTMLCollection.

HTML HTMLCollection LengthDocument Object Model gọi tắt là

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

3, đối tượng này là mô hình logic biểu diễn cấu trúc của trang HTML.

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

3 của văn bản HTML biểu diễn bởi cây là tập hợp các hộp phần tử lồng nhau.

Cây đối tượng DOM

Đối tượng document

Nội dung chính Show

HTML HTMLCollection Length

Cây đối tượng DOM

Đối tượng document
Chọn phần tử trong DOM
getElementById
getElementsByTagName

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

4 là một danh sách (tập hợp) các phần tử HTML giống như một mảng.

HTML HTMLCollection Length

Cây đối tượng DOM

Đối tượng document

Chọn phần tử trong DOM

getElementById

Cây đối tượng DOM

Đối tượng document

Chọn phần tử trong DOM

Đối tượng document

Chọn phần tử trong DOM


    
        DEMO JAVASCRIPT
    
    
        Demo select Element

getElementsByTagName

Phương thức

myCollection[1]

6 tìm tất cả các phần tử có tên thẻ trong tham số hàm. Nó trả về một tập hợp HTMLCollection trong nó chứa các phần tử HTMLElement tìm thấy. Bạn có thể sử dụng thuộc tính

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

7 để biết số lượng phần tử trả về, từ dó có thể duyệt qua tập hợp này dễ dàng

Ví dụ tìm tất cả các phần tử đoạn văn (thẻ

myCollection[1]

8). Sau đó đổi toàn bộ nội dung các đoạn văn thành

myCollection[1]

9

DEMO JAVASCRIPT

hi

hello

hi

Đoạn mã trên biến đổi nội dung các thẻ p thành: Hello World!

getElementsByClassName

Phương thức

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

0 tìm tất cả các phần tử có thuộc tính class (lớp) đưa ra. Nó cũng trả về HTMLCollection

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

0

Phần tử trong DOM - HTMLElement

Mỗi một phần tử trong

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

3 đều có các thuộc tính và phương thức cung cấp thông tin về phần tử đó trong

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

3

Các thuộc tính của phần tử trong

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

3:

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

4 : trả về mảng các phần tử con của nó

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

5 : phần tử con đầu tiên

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

6 : phần tử con cuối cùng

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

7 : trả về

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

8 nếu có phần tử con, ngược lại là

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

9

0 : phần tử cùng cấp tiếp theo

1 : phần tử cùng cấp trước

2 : trả về nút cha

Đầy đủ các thuộc tính của phần tử HTML xem tại HTML ELEMENT

Xem ví dụ:

function BoxAppearence() {
  var BoxCollection = document.getElementsByClassName("Box");
  var BoxArray = Array.from(BoxCollection);
  
  console.log("### BoxCollection ###");
  console.log("Is 'BoxCollection' an array?", Array.isArray(BoxCollection));
  console.log(BoxCollection);
  console.log(BoxCollection[12])
  console.log('\n\n');
  console.log("### BoxArray ###");
  console.log("Is 'BoxArray' an array?", Array.isArray(BoxArray));
  console.log(BoxArray);
  console.log(BoxArray[12]);
}

BoxAppearence();

1

Tổng kết

Toàn bộ cấu trúc HTML của trang được mô tả trong

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13

3, Javascript truy cập tới DOM thông qua đối tượng xây dựng sẵn là

const myCollection = document.getElementsByTagName("p");

9

Tìm một phần tử trong DOM bằng cách sử dụng các phương thức:

5,

6,

7

Mỗi phần tử DOM lại có các thuộc tính, phương thức quá đó có thể tương tác với HTML một cách dễ dàng. Các phần sau chúng ta sẽ tìm cách tương tác với các phần tử DOM

programming html HTMLCollection vs array Filter HTMLCollection HTMLCollection forEach HTMLCollection to JSON

Hướng dẫn htmlcollection to array - htmlcollection thành mảng

dom đối tượng htmlcollection

Đối tượng HTMLCollection

Nội dung chính Show

HTML HTMLCollection Length

Cây đối tượng DOM

Đối tượng document

getElementsByTagName

getElementsByClassName

Phần tử trong DOM - HTMLElement

Tổng kết

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