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

Phương thức getElementsByTagName() trả về tập hợp (collection) tất cả các phần tử trong tài liệu có tên thẻ (tag name) cho trước. Kết quả là đối tượng NodeList (HTMLCollection), cho phép truy xuất phần tử bằng chỉ số index. Tập hợp này tự động cập nhật (live) khi DOM thay đổi (thêm/xóa phần tử) mà không cần gọi lại phương thức.

Cú pháp

element.getElementsByTagName(tagName)

• tagName (bắt buộc): Tên thẻ của các phần tử con cần lấy.

Ví dụ

Ví dụ thay đổi nội dung và kiểu dáng của các đoạn văn <p>:

<!DOCTYPE html>
<html>
<head>
<script>
  function changePara() {
    var paragraphs = document.getElementsByTagName("P");
    paragraphs[0].innerHTML = "Văn bản này đã được thay đổi";
    paragraphs[1].style.color = "red";
    paragraphs[1].style.backgroundColor = "yellow";
  }
</script>
</head>
<body>
<h1>Ví dụ getElementsByTagName()</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation...</p>
<button onclick="changePara()">THAY ĐỔI</button>
</body>
</html>

Kết quả

Ban đầu hai đoạn văn hiển thị văn bản lorem ipsum bình thường.

Sau khi nhấn nút "THAY ĐỔI": đoạn đầu tiên thay nội dung thành "Văn bản này đã được thay đổi", đoạn thứ hai chuyển màu chữ đỏ, nền vàng.

Giải thích

• Hai đoạn văn <p> không có thuộc tính nào.
• Nút "THAY ĐỔI" gọi hàm changePara().
• Hàm lấy tất cả <p> qua document.getElementsByTagName("P"), gán vào biến paragraphs (NodeList).
• Dùng chỉ số [0] và [1] để truy xuất từng phần tử và thay đổi innerHTML, style.color, style.backgroundColor.