Html bên ngoài trong javascript
Đối với lập trình Web, kiến thức về DOM và khả năng thao tác DOM là hai yếu tố quan trọng nhất. Đơn giản vì DOM cho bạn nỗ lực thay đổi mọi thứ của trang web, khi mà mọi nội dung đều có thể thêm, bớt, xóa, chỉnh sửa để mang lại trải nghiệm và nội dung tốt nhất. Bài viết này sẽ giúp bạn hiểu bản chất và cách sử dụng DOM Định nghĩa DOM DOM là viết tắt của Mô hình đối tượng tài liệu, là một tiêu chuẩn được định nghĩa bởi W3C được sử dụng để truy xuất dữ liệu trên các tài liệu có cấu trúc HTML hoặc XML bằng các ngôn ngữ thông dịch như javascript, PHP,. . Ngoài ra, DOM giúp thao tác dữ liệu theo hướng đối tượng mô hình. Các phần tử bên trong tài liệu có cấu trúc được định nghĩa thành các đối tượng, phương thức và thuộc tính để có thể truy xuất dễ dàng mà vẫn đảm bảo cấu trúc tính toán. Mỗi phần tử là một đối tượng, sở hữu các thuộc tính và các phương thức để làm việc với các thuộc tính như bổ sung, xóa, chỉnh sửa, cập nhật. Bên cạnh đó, bạn cũng có thể thêm bớt các phần tử thùy thích, giúp nội dung cấu trúc của trang web luôn cập nhật động CÂY TRÚC DOM NÚT Đối với HTML DOM, mọi thành phần đều được xem là một nút. Được biểu diễn trên một cấu trúc cây gọi là cây DOM. Các phần tử khác nhau sẽ được phân loại thành các loại nút khác nhau. Nhưng quan trọng nhất là 3 loại. nút gốc (nút tài liệu), nút phần tử (nút phần tử), nút văn bản (nút văn bản)
Ví dụ cụ thể cho các nút
Trong ví dụ trên Quan hệ giữa các nút
Thao tác với DOM Mọi nội dung của trang web đều có thể được cập nhật thông tin qua các thuộc tính của DOM. Tất cả từ thay đổi định dạng chữ, nội dung chữ đến thay đổi nút và thêm nút mới. Do đó, để sáng tạo nội dung tốt, bạn cần bám vào công thức cách thao tác DOM và ý nghĩa của từng thuộc tính, phương thức Thuộc tính và phương thức thường gặp You can see fullđử ở. http. //www. w3schools. com/jsref/dom_obj_all. asp Một số thuộc tính
One some method
Mặt khác, các phần tử DOM đều là các nút trên cây cấu trúc DOM. Chúng sở hữu thêm các thuộc tính quan hệ để biểu thị sự phụ thuộc giữa các nút với nhau. Nhờ các thuộc tính quan hệ này, chúng ta có thể truy xuất DOM gián tiếp dựa trên vị trí và quan hệ của các thành phần tử Một số thuộc tính quan hệ
Truy xuất DOM Truy xuất gián tiếp Thao tác truy xuất các nút gián tiếp theo vị trí trên DOM còn được gọi là DOM duyệt. Mỗi nút trên DOM đều có 6 thuộc tính quan hệ giúp bạn truy xuất gián tiếp theo vị trí của nút
Xem bên dưới để xác định danh sách hơn Truy xuất trực tiếp Truy xuất trực tiếp sẽ nhanh hơn và đơn giản hơn khi bạn không cần phải biết nhiều về quan hệ và vị trí của nút. Có 3 phương thức sử dụng để truy xuất trực tiếp được hỗ trợ bởi mọi trình duyệt
Tạo thêm hoặc di chuyển DOM chuyên nghiệp với appendChild Như bạn đã biết, mọi nút trên cây cấu trúc DOM đều bắt nguồn sâu từ nút gốc và bắt buộc phải có một nút cha. Do đó, khi một DOM mới được tạo ra, bạn cần thực hiện thêm thao tác là tìm một nút trên cây DOM để tạo nút cha cho nút vừa tạo thì quá trình tạo nút mới đã hoàn tất. Để tạo nút mới, bạn sử dụng một trong 2 phương pháp sau
Một lưu ý khi tạo thêm DOM. nút mới được tạo sẽ có thuộc tính như một nút DOM thực sự. Tuy nhiên, các thuộc tính của nút mới ở trạng thái mặc định hoặc trống, nên bạn cần thiết lập thêm các thuộc tính cần thiết Phương thức appendChild còn được sử dụng để tổ chức lại các nút DOM. Nếu như 1 nút DOM đang có 1 nút cha nhưng lại có quan hệ với 1 nút cha khác thông qua phương thức appendChild thì nó sẽ không còn quan hệ với nút cha ban đầu Loại bỏ DOM với removeChild Khi bạn loại bỏ một nút, nút đó sẽ vẫn tồn tại trong bộ nhớ đệm của máy tính. Bạn sẽ không thể truy cập đến nút đó được nữa, trừ khi bạn đã lưu tham chiếu đến nó ở 1 biết khác Khi loại bỏ DOM, nút cha sẽ sử dụng phương thức removeChild() để loại bỏ một hoặc nhiều nút con SỰ KIỆN DOM Sự kiện và hàm xử lý sự kiện DOM là một phần quan trọng của Javascript. Sự kiện sẽ xảy ra khi có sự tương tác từ người dùng (như sự kiện onClick(), di chuyển chuột,…) hoặc từ trang web chính (sự cố onload khi một phần tử DOM nào đó đã được tải xuống hoặc khi có Sử dụng các điều kiện và hàm xử lý sự kiện Cách 1. Chèn trực tiếp vào thẻ HTML Cách sử dụng này sẽ nhanh chóng và dễ dàng thực hiện với trình lập trình viên, nhưng sẽ làm cho mã hóa phức tạp, không thuận tiện khi xây dựng các ứng dụng lớn cách 2. Chèn vào các thuộc tính của DOM Cách 3. Use method addEventListener() Phương thức addEventListener() đang được sử dụng rộng rãi cho các trình duyệt hiện tại từ sau năm 2012. Nếu bạn quan tâm đến mã chất lượng hoặc muốn xây dựng ứng dụng theo mô hình hướng đối tượng thì hãy quan tâm đến cách này Support Tool Khi làm việc với DOM, bạn không cần thêm một công cụ hỗ trợ nào khác. Bất cứ khi nào bạn muốn sử dụng, bạn có thể nhấn nút F12, hoặc nhấp chuột phải chọn Kiểm tra phần tử trên màn hình trình duyệt của bạn, |