Hướng dẫn chi tiết

DOM là gì?

DOM là tên gọi tắt của (Document Object Model – tạm dịch Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C 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ịch (scripting language) như Javascript, PHP, Python. Trong phạm vi bài học này, mình sẽ dùng ngôn ngữ Javascript và HTML DOM

Đối với HTML DOM, mọi thành phần đều được xem là 1 nút ( node ), được trình diễn trên 1 cây cấu trúc dạng cây gọi là DOM Tree. Các thành phần khác nhau sẽ được phân loại nút khác nhau nhưng quan trọng nhất là 3 loại : nút gốc ( document node ), nút thành phần ( element node ), nút văn bản ( text node ).

DOM – Xử lý các phần tử HTML trong Javascript DOM – Xử lý những thành phần HTML trong Javascript

Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ .

Nút phần tử: biểu diễn cho 1 phần tử HTML.

Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 nút văn bản. Đó có thể là tên trang web trong thẻ, tên đề mục trong thẻ, hay một đoạn văn trong thẻ .

Ngoài ra còn có nút thuộc tính (attribute node) và nút chú thích (comment node).

Mong các bạn dành vài giây cho QUẢNG CÁONói chung đây là một quảng cáo về Hosting Azdigi để Góc Làm Web sẽ có một ít tiền để duy trìMình đang sử dụng và thấy nó nhanh, rẻ và dễ sử dụng. Các bạn dùng thử nhé.Link đăng ký: https://my.azdigi.com/aff.php?aff=1612Các thuộc tính của nút phần tử element

Mình sẽ dùng chiêu thức trực tiếp, vì nó đúng mực vì thuận tiện hơn. Truy xuất và lấy giá trị, thuộc tính Truy xuất và lấy giá trị, thuộc tínhMuốn lấy giá trị, tất cả chúng ta phải xác lập được thành phần html. Các bạn xem ví dụ sau nhé :

Chúng ta sẽ lấy value và thuộc tính tự định nghĩa là gia_tri của input và xuất ra div bên dưới

Hướng dẫn:

+ Dùng phương thức getElementById(“input_1”) để xác định phần tử cần xử lý

+ Lấy tài liệu của thuộc tính value bằng cách truy xuất thuộc tính value của thành phần

+ Lấy dữ liệu của thuộc tính tự định nghĩa gia_tri bằng phương thức getAttribute(“gia_tri)

+ Lấy dữ liệu trong phần tử khối div bằng cách truy xuất thuộc tính innerHTML. Ngược lại, để gán giá trị bên trong khối div bằng cách gán thuộc tính innerHTML.

Thêm thuộc tính cho thành phần Vẫn với đoạn code bên trên, tất cả chúng ta sẽ thêm thuộc tính readonly cho input Set Read only + Dùng sự kiện onclick để chạy hàm js. Về phần sự kiện – event, mình sẽ nói rõ trong bài học kinh nghiệm sau .Xem thêm : Tên Thật Của An Nguy Tiết Lộ Tên Của Em Bé Sắp Chào Đời, Tiểu Sử An Nguy

+ Sử dụng phương thức setAttribute(“tên thuộc tính”, gái trị) để thêm thuộc tính.

Thêm xóa hoặc thay thế phần tử Thêm xóa hoặc thay thế sửa chữa thành phầnChúng ta sẽ thêm một thành phần vào bên trong một thành phần khác trong ví dụ sau : Khối sẽ được thêm thành phần vào bên trong Thêm thẻ h1 + Xác định thành phần sẽ thêm vào bằng phương pháp getElementById ( )

+ Khởi tạo phần tử con được thêm vào bằng phương thức createElement()

+ Thêm giá trị cho phần tử bằng cách gán thuộc tính innerHTML.

+ Dùng phương thức appendChild() để thêm phần tử được khởi tạo.

Truy xuất và thay đổi thuộc tính CSS của phần tử, thẻ html Truy xuất và đổi khác thuộc tính CSS của thành phần, thẻ htmlChúng ta có khối div màu xanh như sau : Chúng ta sẽ truy xuất là xem thuộc tính css là margin, và chỉnh sửa đổi màu cho khối này. + Xác định phần từ.

+ Truy xuất thuộc tính css của khối div bằng cách truy xuất thuộc tính style của phần tử vừa xác định.

+ Thay đổi thuộc tính background-color bằng cách gán lại thuộc tính style.backgroundColor cho phần tử.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Source: http://139.180.218.5
Category: Thuật ngữ đời thường