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í.
Đâ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
3 sẽ trả về một đối tượngfunction 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.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[];
- 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:
document.body.innerHTML = "Some text";5,
document.body.innerHTML = "Some text";6,
document.body.innerHTML = "Some text";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
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.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[];
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.
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[];
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[];
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
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.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[];
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
document.body.innerHTML = "Some text";
Chọn phần tử trong DOM
getElementById
Cây đối tượng DOM
Đối tượng document
Đối tượng document
Chọn phần tử trong DOM
DEMO JAVASCRIPTDemo select Elementvar ele = document.getElementById['demo']; ele.innerHTML = "Hello World!";
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àngVí 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]
9DEMO JAVASCRIPThi
hello
hi
var arr = document.getElementsByTagName["p"]; for [var x = 0; x < arr.length; x++] { arr[x].innerHTML = "Hello World!"; }
Đ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[];
0Phầ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
3Cá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êndocument.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ùngdocument.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"; } }]
9document.body.innerHTML = "Some text";
0 : phần tử cùng cấp tiếp theodocument.body.innerHTML = "Some text";
1 : phần tử cùng cấp trướcdocument.body.innerHTML = "Some text";
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[];
1Tổ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:
document.body.innerHTML = "Some text";5,
document.body.innerHTML = "Some text";6,
document.body.innerHTML = "Some text";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