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

Phương thức HTML DOM getElementById () được sử dụng để trả về một phần tử bằng cách chuyển một id làm tham số cho hàm này. Đây là một trong những phương pháp được sử dụng phổ biến nhất và dễ dàng nhất để thao tác các phần tử sau này. Nếu Id được chỉ định không tồn tại, nó sẽ trả về NULL.

Cú pháp

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

document.getElementById(elementID)

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
<script>
   function changeLink() {
      var l = document.getElementById("LINK1");
      l.style.color = "red";
      l.style.fontSize="40px";
   }
</script>
</head>
<body>
<h1>getElementById() example</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>Click the below button to apply styling to the above link</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html>

Đầu ra

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

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

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

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

Trong ví dụ trên -

Trước tiên, chúng tôi đã tạo một phần tử liên kết với id “LINK1” và giá trị thuộc tính href được đặt thành “https://www.google.com”.

<a id="LINK1" href="https://www.google.com">GOOGLE</a>

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

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

Phương thức changeLink () nhận phần tử bằng cách sử dụng phương thức getElementById () của đối tượng tài liệu và chuyển id phần tử làm tham số. Sau đó, nó trả về phần tử mà chúng ta gán cho biến l. Sử dụng thuộc tính kiểu toàn cục, chúng tôi đặt giá trị thuộc tính color và fontSize cho thẻ liên kết -

function changeLink() {
   var l = document.getElementById("LINK1");
   l.style.color = "red";
   l.style.fontSize="40px";
}