Document trong JavaScript là gì
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. DOM cho bạn khả năng thay đổi mọi thứ của trang web, khi mà mọi nội dung đều có thể được thêm bớt xóa sửa để mang lại trải nghiệm và nội dung tốt nhất. Show Và Javascript là một ngôn ngữ được sử dụng trên các Browser nên nó đóng một vai trò quan trọng trong các website. Javascript giúp cho việc thao tác với các tài liệu HTML kết hợp với các cú pháp riêng của nó để tạo nên các trải nghiệm thân thiện của web. Để thao tác được với các thẻ HTML thì nó phải thông qua một cơ chế ta gọi là DOM. Tìm hiểu thêm các vị trí tuyển dụng Javascript tại đây DOM là gì?DOM là tên gọi viết tắt của (DocumentObjectModel tạm dịchMô hình Các Đối tượng Tài liệu). Là một chuẩn được định nghĩa bởi W3C (Tổ Chức Web Toàn Cầu World Wide Web Consortium). DOM được dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dụng như Javascript, PHP Trong mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ. Có thể thấy tất cả các thẻ HTML sẽ được quản lý trong đối tượng document. Thẻ cao nhất là thẻhtml, tiếp theo là phân nhánhbodyvàhead. Bên trongheadthì có những thẻ nhưstyle,title, và bên trongbodythì là vô số các thẻ HTML khác. Như vậy trongJavascript, để thao tác với các thẻ HTML ta phải thông qua đối tượngdocument. HTML DOM là gì?HTML DOM giúp thao tác dữ liệu theo mô hình hướng đối tượng. Các phần tử bên trong 1 tài liệu có cấu trúc được định nghĩa thành các đối tượng,phương thứcvàthuộc tính để có thể truy xuất dễ dàng mà vẫn đảm bảo tính cấu trúc. 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ư thêm, xóa, 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ử tùy thích, giúp cho nội dung và cấu trúc của trang web luôn cập nhật động. Nó định nghĩa sau đây:
Cây cấu trúc DOMNodeĐối với HTML DOM, mọi thành phần đều được xem là một node (nút), được biểu diễn trên 1 cây cấu trúc dạng cây gọi là DOM Tree. Các phần tử khác nhau sẽ được phân loại node khác nhau nhưng quan trọng nhất là 3 loại: node gốc (document node), node phần tử (element node), node văn bản (text node).
Quan hệ giữa các node
Các loại DOM trong JavascriptJavascript cung cấp cho chúng ta nhiều loại DOM để xử lí HTML và CSS dễ dàng hơn.
Thao tác với DOMMọi nội dung đều có thể được cập nhật động thông qua các thuộc tính và phương thức của DOM. Từ thay đổi định dạng chữ, nội dung chữ đến thay đổi cấu trúc các node và cả thêm node mới. Bạn cần hiểu rõ cách thao tác DOM và ý nghĩa của từng thuộc tính, phương thức. Các Thuộc tính và Phương thức thường gặpThuộc tính:
Phương thức:
Mặt khác, các phần tử DOM đều là các node 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 diễn sự phụ thuộc giữa các node 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 quan hệ và vị trí của các phần tử: Thuộc tính quan hệ:
Bạn có thể xem danh sách đầy đủ ởW3SCHOOLS Truy xuất các phần tử trong mô hình DOMChúng ta có thể truy xuất mọi phần tử html bằng cách sử dụng các phương thức :
Ví dụ: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM</title> </head> <body> <h2 id="txt1">Truy xuất bằng id</h2> </body> </html>ở ví dụ trên mình đã truy xuất và thay đổi nội dung của thẻ h2 bằng phương thức document.getElementById().
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
</head>
<body>
<h2 id="txt1">Truy xuất bằng TagName</h2>
</body>
</html>
ở ví dụ này đã truy xuất và thay đổi nội dung của thẻ h2 bằng document.getElementsByTagName() Chú ý:
Tham khảo các công việc it lương cao cho bạn tại Topdev.vn |