Hướng dẫn loop through html elements javascript - lặp qua các phần tử html javascript

Question

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:

Nội dung chính Show

Vòng lặp qua tất cả các thành phần DOM bằng cách sử dụng JavaScript #
Làm thế nào để tôi lặp lại thông qua một phần tử HTML?
Làm thế nào để bạn tạo một vòng lặp trong HTML?
Tôi có thể sử dụng cho vòng lặp trong HTML không?
Làm cách nào để lặp qua tất cả các thành phần DOM trên một trang?

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!
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);
}

0 dưới dạng tham số, nó sẽ trả về một bộ sưu tập chứa tất cả các phần tử DOM.

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ặp

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);
}

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ức

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);
}

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ử trong

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.

Lưu ý rằ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 không được hỗ trợ khi sử dụng phương thức

Copied!
const allElements = document.getElementsByTagName('*');
for (const element of allElements) {
console.log(element);
if (element.textContent === 'Box 2') {
break;
}
}

3.

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.

Làm thế nào để tôi lặp lại thông qua một phần tử HTML?

Để lặp lại các phần tử đã chọn, bạn có thể sử dụng phương thức foreach () (được hỗ trợ bởi hầu hết các trình duyệt web hiện đại, không phải IE) hoặc chỉ sử dụng vòng lặp cũ đơn giản.use forEach() method (supported by most modern web browsers, not IE) or just use the plain old for-loop.

Làm thế nào để bạn tạo một vòng lặp trong HTML?

Examples..

.

Tôi có thể sử dụng cho vòng lặp trong HTML không?

Cách tiếp cận 1: Sử dụng vòng lặp For: Các phần tử HTML có thể được lặp lại bằng cách sử dụng JavaScript thông thường cho vòng lặp.Số lượng các phần tử được lặp lại có thể được tìm thấy bằng cách sử dụng thuộc tính chiều dài.Vòng lặp cho ba phần, khởi tạo, biểu thức điều kiện và biểu thức tăng/giảm.The HTML elements can be iterated by using the regular JavaScript for loop. The number of elements to be iterated can be found using the length property. The for loop has three parts, initialization, condition expression, and increment/decrement expression.

Làm cách nào để lặp qua tất cả các thành phần DOM trên một trang?

Để lặp qua tất cả các phần tử DOM: Sử dụng phương thức getElsionByTagName () để có được một htmlCollection chứa tất cả các phần tử DOM. Sử dụng một vòng lặp để lặp lại trong bộ sưu tập.Use the getElementsByTagName() method to get an HTMLCollection containing all DOM elements. Use a for...of loop to iterate over the collection.

programming javascript Iterate html collection