Computer >> Máy Tính >  >> Lập trình >> Javascript

JavaScript:Làm thế nào để lặp qua tất cả các phần tử DOM trên một trang và hiển thị kết quả trên bảng điều khiển?

Để lặp lại tất cả các phần tử DOM trên một trang, hãy sử dụng document.getElementsByTagName (‘*’). Lặp lại độ dài của nó và hiển thị kết quả trong bảng điều khiển như trong đoạn mã dưới đây -

var tags = document.getElementsByTagName("*");
for (var i=0, max=tags.length; i < max; i++) {
   console.log(tags[i]);
}

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Demo</h1>
<label>
Enter the name:
<input type="text" id="txtName">
</label>
<button type="submit">Save</button>
<script>
   var tags = document.getElementsByTagName("*");
   for (var i=0, max=tags.length; i < max; i++) {
      console.log(tags[i]);
   }
</script>
</body>
</html>

Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.

Đầu ra

Điều này sẽ tạo ra kết quả sau -

JavaScript:Làm thế nào để lặp qua tất cả các phần tử DOM trên một trang và hiển thị kết quả trên bảng điều khiển?