DOM trong JavaScript

Phần này đề cập đến Mô hình đối tượng tài liệu JavaScript (DOM) và chỉ cho bạn cách thao tác các phần tử DOM một cách hiệu quả

Phần 1. Bắt đầu

  • Hiểu mô hình đối tượng tài liệu trong JavaScript

Phần 2. Lựa chọn các yếu tố

  • getElementById() – chọn một phần tử theo id
  • getElementsByName() – chọn phần tử theo tên
  • getElementsByTagName()  – chọn các phần tử theo tên thẻ
  • getElementsByClassName() – chọn các phần tử theo một hoặc nhiều tên lớp
  • querySelector()  – chọn các phần tử bằng bộ chọn CSS

Phần 3. các yếu tố đi ngang

  • Lấy phần tử cha – lấy nút cha của một phần tử
  • Nhận các phần tử con – lấy các phần tử con của một phần tử
  • Lấy anh chị em của một phần tử – get anh chị em của một phần tử

phần 4. Thao tác các yếu tố

  • createElement() – tạo một phần tử mới
  • appendChild()  – nối một nút vào danh sách các nút con của một nút cha đã chỉ định
  • textContent – ​​lấy và thiết lập nội dung văn bản của một nút
  • innerHTML – lấy và đặt nội dung HTML của một phần tử
  • bên trongHTML so với. createElement – ​​giải thích sự khác biệt giữa InternalHTML và createElement khi tạo các phần tử mới
  • DocumentFragment – tìm hiểu cách soạn các nút DOM và chèn chúng vào cây DOM đang hoạt động
  • after() – chèn một nút sau một phần tử
  • append() – chèn một nút sau nút con cuối cùng của nút cha
  • prepend() – chèn một nút trước nút con đầu tiên của nút cha
  • insertAdjacentHTML() – phân tích văn bản dưới dạng HTML và chèn các nút kết quả vào tài liệu tại một vị trí đã chỉ định
  • replaceChild() – thay thế phần tử con bằng phần tử mới
  • cloneNode() – sao chép một phần tử và tất cả các phần tử con của nó
  • removeChild() – loại bỏ các phần tử con của một nút
  • insertB Before () – chèn một nút mới trước một nút hiện có làm nút con của nút cha được chỉ định
  • hàm trợ giúp insertafter() – chèn một nút mới sau một nút hiện có làm nút con của một nút cha được chỉ định

Phần 5. Làm việc với các thuộc tính

  • Thuộc tính HTML & Thuộc tính của đối tượng DOM – hiểu mối quan hệ giữa các thuộc tính HTML & thuộc tính của đối tượng DOM
  • setAttribute() – đặt giá trị của một thuộc tính được chỉ định trên một phần tử
  • getAttribute() – lấy giá trị của một thuộc tính trên một phần tử
  • removeAttribute() – xóa thuộc tính khỏi phần tử đã chỉ định
  • hasAttribute() – kiểm tra xem một phần tử có thuộc tính được chỉ định hay không

Phần 6. Thao tác kiểu của phần tử

  • thuộc tính style – nhận hoặc đặt kiểu nội tuyến của một phần tử
  • getComputedStyle() – trả về kiểu tính toán của một phần tử
  • thuộc tính className – trả về danh sách các lớp CSS được phân tách bằng dấu cách
  • thuộc tính classList – thao tác các lớp CSS của một phần tử
  • Chiều rộng và chiều cao của phần tử – lấy chiều rộng và chiều cao của phần tử

Phần 7. Làm việc với Sự kiện

  • Sự kiện JavaScript – giới thiệu cho bạn các sự kiện JavaScript, mô hình sự kiện và cách xử lý sự kiện
  • Xử lý sự kiện – chỉ cho bạn ba cách để xử lý sự kiện trong JavaScript
  • Sự kiện tải trang – tìm hiểu về sự kiện tải và hủy tải trang
  • sự kiện tải – hướng dẫn bạn các bước xử lý sự kiện tải bắt nguồn từ các phần tử tài liệu, hình ảnh và tập lệnh
  • DOMContentLoaded – tìm hiểu cách sử dụng đúng sự kiện DOMContentLoaded
  • beforeunload event – ​​hướng dẫn bạn cách hiển thị hộp thoại xác nhận trước khi người dùng rời khỏi trang
  • sự kiện hủy tải – chỉ cho bạn cách xử lý sự kiện dỡ tải kích hoạt khi trang được tải xuống hoàn toàn
  • Sự kiện chuột – cách xử lý sự kiện chuột
  • Sự kiện bàn phím – cách xử lý sự kiện bàn phím
  • Sự kiện cuộn – cách xử lý sự kiện cuộn hiệu quả
  • scrollIntoView – tìm hiểu cách cuộn một phần tử vào chế độ xem
  • Sự kiện tiêu điểm – bao gồm các sự kiện tiêu điểm
  • sự kiện haschange – tìm hiểu cách xử lý sự kiện khi hàm băm URL thay đổi
  • Ủy quyền sự kiện – là một kỹ thuật tận dụng bong bóng sự kiện để xử lý các sự kiện ở cấp độ cao hơn trong DOM so với phần tử mà sự kiện bắt nguồn
  • công văn sự kiện – tìm hiểu cách tạo sự kiện từ mã và kích hoạt nó
  • Sự kiện tùy chỉnh – xác định sự kiện JavaScript tùy chỉnh và đính kèm nó vào một phần tử
  • MutationObserver – theo dõi các thay đổi của DOM và gọi lại một cuộc gọi lại khi các thay đổi xảy ra

Mục 8. Viết kịch bản biểu mẫu web

  • Biểu mẫu JavaScript – tìm hiểu cách xử lý sự kiện submit của biểu mẫu và thực hiện xác thực đơn giản cho biểu mẫu web
  • Radio Button – chỉ cho bạn cách viết JavaScript cho các nút radio
  • Checkbox – hướng dẫn bạn cách thao tác với checkbox trong JavaScript
  • Hộp chọn – tìm hiểu cách xử lý hộp chọn và tùy chọn của nó trong JavaScript
  • Thêm/Xóa Tùy chọn – chỉ cho bạn cách tự động thêm tùy chọn vào và xóa tùy chọn khỏi hộp chọn
  • Removing Items from