getElementById

Bài học 3 trên 13 trong khóa học Các phương thức DOM trong JavaScript của Coddy.

Hàm getElementById() lấy phần tử đầu tiên có thuộc tính id khớp, ví dụ:

const element = document.getElementById("elementId");

Đoạn code trên lấy phần tử có id là elementId và lưu vào biến có tên element.

Lưu ý tiền tố document, đây là DOM của tệp HTML.

Sau khi lấy một phần tử, bạn có thể thao tác với nó bằng JavaScript!

Thuộc tính đầu tiên chúng ta sẽ học là textContent, thuộc tính này chứa nội dung văn bản của phần tử. Bạn có thể sửa văn bản như sau:

const element = document.getElementById("elementId");
element.textContent = "some text";

Sau đoạn code này, văn bản của #elementId sẽ là some text

Thử thách

Dễ

Bạn được cung cấp đoạn code HTML có tiêu đề với một ID.

Chỉ sử dụng JavaScript, hãy đổi văn bản của phần tử này thành “Hello!”:

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <h1 id="heading">Welcome!</h1>
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Các phương thức DOM trong JavaScript

1Giới thiệu

2Phương thức DOM I

3Các phương thức DOM II

Tự luyện tập: Playground Web