Phương thức HTML DOM getElementsByTagName ()

Phương thức HTML DOM getElementsByTagName () được sử dụng để lấy bộ sưu tập của tất cả các phần tử trong tài liệu có tên thẻ nhất định. Nó trả về tất cả các phần tử đã cho dưới dạng một đối tượng NodeList. Bạn có thể truy cập bất kỳ phần tử nào trong đối tượng được trả về bằng cách sử dụng số chỉ mục.

HTMLcollection trả về vẫn đồng bộ với cây DOM mà không cần gọi lại phương thức getElementsByTagName () sau khi xóa hoặc thêm một số phần tử.

Cú pháp

Sau đây là cú pháp cho phương thức getElementsByTagName () -

element.getElementsByTagName(tagname)

Ở đây, tagname là một giá trị tham số bắt buộc cho biết tagname của phần tử con mà chúng ta muốn lấy.

Ví dụ

Chúng ta hãy xem một ví dụ cho phương thức getElementsByTagName () -

<!DOCTYPE html>
<html>
<head>
<script>
   function changePara() {
      var p = document.getElementsByTagName("P");
      p[0].innerHTML = "This text has been changed";
      p[1].style.color = "red";
      p[1].style.backgroundColor = "yellow";
   }
</script>
</head>
<body>
<h1>getElementsByTagName() example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>

Đầu ra

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

Phương thức HTML DOM getElementsByTagName ()

Khi nhấp vào nút THAY ĐỔI -

Phương thức HTML DOM getElementsByTagName ()

Trong ví dụ trên -

Chúng tôi đã tạo hai đoạn văn không có thuộc tính nào được liên kết với chúng -

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

Sau đó, chúng tôi đã tạo một nút CHANGE sẽ thực thi changePara () khi được người dùng nhấp vào -

<button onclick="changePara()">CHANGE</button>

Phương thức changePara () nhận cả hai phần tử

dưới dạng nodeListObject bằng cách sử dụng phương thức getElementsByTagName () trên đối tượng document và gán nó cho biến p. Sử dụng các số chỉ mục, chúng tôi thay đổi văn bản cho đoạn đầu tiên và áp dụng một số kiểu dáng cho đoạn thứ hai -

function changePara() {
   var p = document.getElementsByClassName("PARA1");
   p[0].innerHTML = "This text has been changed";
   p[1].style.color = "red";
   p[1].style.backgroundColor = "yellow";
}