Vòng lặp qua tất cả các thành phần DOM bằng cách sử dụng JavaScript #
Để lặp qua tất cả các yếu tố DOM:
- Sử dụng phương thức getElementsByTagName() để có được HTMLCollection chứa tất cả các thành phần DOM.
- Sử dụng vòng lặp for...of để lặp lại trong bộ sưu tập.
Đây là HTML cho các ví dụ trong bài viết này.
Copied!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <script src="index.js"></script> </body> </html>Và đây là mã JavaScript liên quan.
Copied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); }Phương thức tài liệu.getelementsByTagName trả về một HTMLCollection chứa các phần tử với tên thẻ được cung cấp.
Nếu phương thức được truyền Asterisk Copied!
Chúng tôi đã sử dụng một ... vòng lặp để lặp lại trong bộ sưu tập.
Lưu ý rằng bạn có thể sử dụng từ khóa
Copied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 1 để thoát ra khỏi vòng lặpCopied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 2 nếu đáp ứng điều kiện nhất định.Copied!
const allElements = document.getElementsByTagName('*'); for (const element of allElements) { console.log(element); if (element.textContent === 'Box 2') { break; } }Bộ chọn ở trên chứa tất cả các phần tử DOM, bao gồm phần tử
Copied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 3, phần tửCopied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 4, v.v.Nếu bạn chỉ cần lặp lại các phần tử có trong thẻ
Copied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 5, hãy sử dụng phương thứcCopied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 6.Copied!
const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); }Phương thức QuerySelectorall lấy một chuỗi chứa bộ chọn CSS làm tham số và trả về
Copied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 7 chứa các phần tử phù hợp.Chúng tôi đã sử dụng vòng lặp for...of để lặp lại
Copied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 7, tuy nhiên bạn cũng có thể sử dụng phương pháp Foreach.Copied!
const allInBody = document.querySelectorAll('body > *'); allInBody.forEach(element => { console.log(element); });Hàm chúng tôi đã chuyển sang phương thức
Copied!
const allElements = document.getElementsByTagName('*'); for (const element of allElements) { console.log(element); if (element.textContent === 'Box 2') { break; } } 0 được gọi với mỗi phần tử trongCopied!
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); } 7.Lưu ý rằng từ khóa Copied! Copied!
Phương pháp
Copied!
const allElements = document.getElementsByTagName('*'); for (const element of allElements) { console.log(element); if (element.textContent === 'Box 2') { break; } } 4 có thể truyền một hoặc nhiều bộ chọn phân tách bằng dấu phẩy.Ví dụ sau đây chọn tất cả các yếu tố với các lớp
Copied!
const allElements = document.getElementsByTagName('*'); for (const element of allElements) { console.log(element); if (element.textContent === 'Box 2') { break; } } 5 vàCopied!
const allElements = document.getElementsByTagName('*'); for (const element of allElements) { console.log(element); if (element.textContent === 'Box 2') { break; } } 6.Copied!
const elements = document.querySelectorAll( '.my-class, .your-class' ); elements.forEach(element => { console.log(element); });Bạn có thể vượt qua nhiều bộ chọn phân tách bằng dấu phẩy cho phương pháp khi cần thiết.
Đây có thể là một giải pháp hiệu quả hơn nếu bạn không cần lặp lại mọi yếu tố trong DOM.