Nội dung

36.5 JavaScript DOM Hiểu rõ getAttribute và setAttribute Understanding getAttribute vs setAttribute

video này tập trung vào việc sử dụng JavaScript để tương tác với DOM (Document Object Model) của trang web. Trong video, chúng ta khám phá hai phương thức quan trọng: `getAttribute` và `setAttribute`. Trước tiên, chúng ta sử dụng `querySelector` để chọn phần tử đầu tiên có thẻ `a` trên trang. Sau đó, chúng ta kiểm tra xem liệu có thẻ `a` nào được tìm thấy hay không, và nếu có, chúng ta lấy giá trị của thuộc tính `href` của thẻ đó. Tiếp theo, chúng ta thêm một thuộc tính `target="_blank"` vào thẻ `a` đầu tiên bằng cách sử dụng `setAttribute`, điều này sẽ làm cho liên kết mở trong một cửa sổ hoặc tab mới khi được nhấp vào. Sau đó, chúng ta sử dụng `querySelectorAll` để chọn tất cả các thẻ `a` bên trong một phần tử `ul`. Lưu ý rằng `querySelectorAll` trả về một danh sách các phần tử, do đó chúng ta phải lặp qua từng phần tử và sử dụng `setAttribute` để thêm thuộc tính `target="_blank"` vào từng thẻ `a` trong danh sách. Video này cung cấp một cái nhìn tổng quan về cách sử dụng JavaScript để thao tác với các phần tử trên trang web, giúp bạn hiểu rõ hơn về cách sử dụng `getAttribute` và `setAttribute` để truy cập và thay đổi thuộc tính của các phần tử HTML.