Kịch bản thuyết trình: Slides 107, 108, 109

Mình tiếp tục với slide 107, 108 và 109 về JavaScript HTML DOM - Truy cập & thay đổi phần tử trong DOM.

Để thay đổi nội dung hoặc style của trang web, trước tiên ta cần tìm và truy cập đến phần tử HTML mà mình muốn thao tác. JavaScript cung cấp nhiều cách để làm việc này:

2.1. Get qua id của thẻ bằng cú pháp document.getElementById("id")

Nó sẽ trả về một phần tử duy nhất (vì id là duy nhất trong trang).

Ví dụ: trong HTML ta có thẻ <p> như sau: <p id="demo">Hello!</p>

Để truy cập vào thẻ <p> này của HTML thì bên JAVASCRIPT ta viết như sau:

let element = document.getElementById("demo");

Tuy nhiên nếu chỉ dừng lại ở đây thì ta chỉ mới tạo ra một biến tên là element. Biến này đang trỏ đến phần tử HTML có id = "demo". Nhưng chưa làm gì cả với phần tử đó.

Nếu muốn thay đổi gì đó cho thẻ <p>, bạn phải thêm lệnh phía sau, ví dụ:

Đổi nội dung:

element.innerHTML = "Hello DOM!";

element.innerHTML: có nghĩa là lấy nội dung HTML bên trong thẻ & Thay đổi nội dung HTML bên trong thẻ.

Đổi màu chữ:

element.style.color = "red";

Lúc này thì JS mới thật sự tác động lên phần tử HTML.

2.2. Get qua class của thẻ bằng cú pháp document.getElementsByClassName("className")

Tìm tất cả phần tử có cùng class.

Trả về một HTMLCollection (giống mảng, nhưng không hoàn toàn là mảng).

Ví dụ:

<p class="note">Note 1</p>
<p class="note">Note 2</p>

let elements = document.getElementsByClassName("note");
elements[0].style.color = "red"; // Change the color of the first element

Ở đây, elements là một collection chứa tất cả các thẻ có class="note". Để truy cập từng phần tử, mình dùng index như mảng: elements[0], elements[1], ...

Ngoài ra, còn có một số cú pháp truy cập khác (bạn có thể tự tham khảo thêm):

2.3. document.getElementsByTagName("tagName")

  • Tìm tất cả phần tử theo tên thẻ (vd: "p", "div", "h1"...).
  • Kết quả trả về một HTMLCollection (giống mảng, có thể duyệt qua).

2.4. document.querySelector("selector")

  • Dùng cú pháp CSS selector để tìm phần tử.
  • Chỉ trả về phần tử đầu tiên khớp.
  • Rất linh hoạt: có thể tìm theo #id, .class, tag, hoặc kết hợp selector phức tạp.

2.5. document.querySelectorAll("selector")

  • Cũng dùng CSS selector, nhưng trả về tất cả phần tử khớp.
  • Kết quả là một NodeList (có thể duyệt bằng forEach).

So sánh & khi nào dùng?

  • getElementById → Nhanh nhất, dùng khi phần tử có id duy nhất.
  • getElementsByClassName / TagName → Dùng khi muốn lấy nhiều phần tử theo class hoặc thẻ.
  • querySelector / querySelectorAll → Linh hoạt nhất, cú pháp giống CSS. Thường dùng trong thực tế vì dễ viết, dễ đọc.

Như vậy là mình đã trình bày xong các cách truy cập và thao tác với phần tử HTML thông qua JavaScript DOM.