Hướng dẫn get all a tags javascript - nhận tất cả các thẻ javascript

Tôi đang cố gắng để có được tất cả các phần tử (thẻ) bên trong thẻ cơ thể của trang HTML trong một mảng bằng cách sử dụng JavaScript thuần túy. Ý tôi là không sử dụng bất kỳ khung nào (ví dụ: jQuery).

Tôi đã thấy rằng bạn có thể sử dụng document.all nhưng điều đó sẽ trả về tất cả các yếu tố bên trong toàn bộ tài liệu bao gồm các tập lệnh.

Có cách nào tôi có thể nhận được những thẻ đó không?

Hỏi ngày 10 tháng 10 năm 2012 lúc 15:41Oct 10, 2012 at 15:41

1

Nếu bạn muốn tất cả các yếu tố bên trong thẻ cơ thể, không chỉ trẻ em cấp độ đầu tiên, bạn chỉ cần sử dụng getElementsByTagName() với ký tự đại diện:

var elems = document.body.getElementsByTagName("*");

Đã trả lời ngày 10 tháng 10 năm 2012 lúc 16:06Oct 10, 2012 at 16:06

jfriend00jfriend00jfriend00

659K91 Huy hiệu vàng938 Huy hiệu bạc938 Huy hiệu Đồng91 gold badges938 silver badges938 bronze badges

3

Bạn có thể sử dụng document.querySelectorAll() cho điều đó.

Nếu bạn thực sự muốn tất cả (bao gồm cả thẻ lồng nhau), hãy sử dụng cái này

 var elements = document.querySelectorAll( 'body *' );

Nếu bạn chỉ muốn các nút trẻ em ngay lập tức, hãy sử dụng

 var elements = document.querySelectorAll( 'body > *' );

Đã trả lời ngày 10 tháng 10 năm 2012 lúc 15:43Oct 10, 2012 at 15:43

SirkosirkoSirko

71K19 Huy hiệu vàng144 Huy hiệu bạc178 Huy hiệu đồng19 gold badges144 silver badges178 bronze badges

4

• Nhận phần tử HTML theo tên lớp ..
• Nhận phần tử HTML theo tên ..

Nhận phần tử HTML theo tagName ..

// Get all HTML tags
const allHTMLTags = document.getElementsByTagName("*");

Ví dụ

Thay đổi nội dung HTML của phần tử đầu tiên trong danh sách:

const list = document.getElsByTagName ("ul") [0]; list.getelementsbytagname ("li") [0] .innerhtml = "sữa";
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Hãy tự mình thử »

Số lượng các yếu tố trong "MyDiv":

const phần tử = document.getEuityById ("myDiv"); const nút = phần tử.getElsByTagName ("p"); Đặt tê = nút.length;
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Hãy tự mình thử »

Thay đổi kích thước phông chữ của phần tử thứ hai trong "MyDiv":

const phần tử = document.getEuityById ("myDiv"); phần tử.getelementsByTagName ("p") [1] .style.fontsize = "24px";
element.getElementsByTagName("p")[1].style.fontSize = "24px";

Hãy tự mình thử »

Thêm ví dụ dưới đây.

Định nghĩa và cách sử dụng

Phương thức getElementsByTagName() trả về một tập hợp các phần tử con với một tên thẻ đã cho.

Phương thức getElementsByTagName() trả về một đối tượng Nodelist.

Nodelist

Một Nodelist là một bộ sưu tập giống như mảng (danh sách) các nút.

Các nút trong danh sách có thể được truy cập bởi Index. Chỉ số bắt đầu ở 0.

Độ dài poperty trả về số lượng nút trong danh sách.

Cú pháp

element.getElementsByTagName(tagname)

Thông số

Giá trị trả về

Giá trị trả về

Loại hình

Nodelist
const nodes = x.getElementsByTagName("P");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Hãy tự mình thử »

Các phần tử con của phần tử với tên tagname đã cho. Các yếu tố được sắp xếp khi chúng xuất hiện trong mã nguồn.

Nhiều ví dụ hơn
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Hãy tự mình thử »

Thay đổi màu nền của tất cả các yếu tố bên trong "MyDiv":

const div = document.getEuityById ("myDiv"); const nút = x.getElsByTagName ("p"); for (let i = 0; i

Thay đổi màu nền của phần tử thứ tư (chỉ mục 3) bên trong "MyDiv":
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Hãy tự mình thử »

const div = document.getEuityById ("myDiv"); div.getElsementByTagName ("*") [3] .style.backgroundColor = "Red";

Sử dụng tham số "*".

 var elements = document.querySelectorAll( 'body *' );

GetElementsByTagName trả lại gì?

TagName trong JavaScript là gì?

GetElementsByTagName có trả lại một mảng không?

Làm thế nào bạn có thể truy cập các phần tử HTML với JavaScript?