Javascript là một ngôn ngữ được sử dụng trong các trình duyệt Browser nên nó đóng một vai trò khá quan trọng trong các ứng dụng website. Và nhiệm vụ của Javascript là 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 sự ảo diệu của trang 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.
Vậy trong bài viết này chúng ta cùng tìm hiểu DOM là gì và cách thao tác với DOM bằng Js nhé!
DOM là gì?
DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML. Như các bạn biết 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ẻ,... DOM được dùng để truy xuất các tài liệu dạng HTML và XML, có dạng một cây cấu trúc dữ liệu, và thông thường mô hình DOM độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu.
Bạn có thể tham khảo hình vẽ dưới đây để hiểu rõ hơn về DOM.
Chúng ta 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ánh body và head. Bên trong head thì có những thẻ như style, title, ... và bên trong body thì là vô số các thẻ HTML khác. Như vậy trong Javascript, để thao tác với các thẻ HTML ta phải thông qua đối tượng document, để cho nóng thì các bạn xem ví dụ bên dưới trước khi tìm hiểu tiếp nhé :D
Trong ví dụ này mình có sử dụng một đoạn code xử lý javascript như sau:
document.getElementById["main-content"].innerHTML = "Chào mừng các bạn đến với website học lập trình online codelearn.io"Và đoạn code này có ý nghĩa rằng tìm thẻ có id="main-content"và gán nội dung HTML bên trong của thẻ này là dòng chữ "Chào mừng các bạn đến với website học lập trình online codelearn.io".
Với DOM, JavaScript được tất cả sức mạnh cần thiết để tạo ra HTML động:
- JavaScript có thể thay đổi tất cả các phần tử HTML trong trang
- JavaScript có thể thay đổi tất cả các thuộc tính HTML trong trang
- JavaScript có thể thay đổi tất cả các phong cách CSS trong trang
- JavaScript có thể loại bỏ các yếu tố HTML và thuộc tính hiện tại
- JavaScript có thể thêm các yếu tố HTML mới và các thuộc tính
- JavaScript có thể phản ứng với tất cả các sự kiện HTML hiện trong trang
- JavaScript có thể tạo ra các sự kiện HTML mới trong trang
HTML DOM là gì?
HTML DOM là một chuẩn mô hình object và programming interface cho HTML. nó định nghĩa:
- HTML elements như là objects
- properties của tất cả HTML elements
- methods để truy cập đến tất cả HTML elements
- events cho tất cả HTML elements
HTML DOM là một tiêu chuẩn cho phép bạn thực hiện những công việc thao tác với bất kì một trang web: get, change, add, or delete các thành phần của HTML.
Cây cấu trúc DOM
Nút
Đối với HTML DOM, cấu trúc dạng cây gọi là DOM Tree có nghĩa là mọi thành phần đều được xem là 1 nút [node], được biểu diễn trên 1 cây . Các phần tử 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 phần tử [element node], nút văn bản [text node].
Tương tự như với CSS, dưới đây mình sẽ lần lượt hướng dẫn bạn 03 cách để nhúng [chèn] JavaScript vào HTML. Tùy trường hợp mà bạn sẽ vận dụng cách tương ứng.Mục lục bài viết
Cách nhúng [chèn] JavaScript vào HTML
Cách một, nhúng JavaScript kiểu Internal
Nhúng Internal có thể hiểu là chúng ta chèn code JavaScript vào một cụm nào đó trong tập tin HTML. Thông thường thì anh em hay nhóm nó vào trong cặp thẻ và .
Các bạn thử 02 ví dụ nhúng HTML kiểu Internal dưới đây. Các bạn có thể dán code dưới đây vào một file định dạng .html bằng note pad và mở nó bằng trình duyệt để xem.
- Nhúng trong cặp thẻ :
Tiêu đề website
alert["Chào mừng bạn đến với Hocban.vn"];
Nội dung website
- Nhúng trong cặp thẻ :
Tiêu đề website
alert["Chào mừng bạn đến với Hocban.vn"];
Nội dung website
Cách hai, nhúng JavaScript kiểu inline
Đối với cách nhúng inline chúng ta có thể chèn ngay vị trí bất kỳ của một dòng code HTML.Trong ví dụ dưới đây mình sẽ tạo 03 vùng chọn tương ứng với 03 thẻ Các bạn dán code vào file html đã tạo và mở trong trình duyệt web để xem nhé ! Ví dụ này nó sẽ hơi dài so với các ví dụ trên mạng mà mọi người thấy khá nhiều. Tuy nhiên nó sẽ thể hiện được rất rõ việc chèn JavaScript kiểu Inline là như thế nào. Bạn nào đã theo mình nghịch thử trong 02 serie HTML và CSS tại Hocban.vn thì cái này cũng dễ hình dung thôi. Phần nội dung code các bạn không cần quan tâm, chúng ta sẽ tìm hiểu ý nghĩa của chúng trong các bài sau. Nếu cách một và cách 02 chúng ta nhúng file JavaScript vào trong văn bản HTML thì cách nhúng External sẽ khác một chút, để nhúng kiểu này đầu tiên các bạn dán code JavaScript vào một file txt và lưu lại với định dạng .JS Tiếp theo trong thẻ , để viết JavaScript thì chúng ta viết đường dẫn đến file JavaScript đã lưu sử dụng cú pháp bên dưới. Bạn có thể tạo một thư mục và copy 02 cái file HTML và JS vào trong đó. Ví dụ ở đây mình tạo một file JavaScript và dán vào nó đoạn code hiển thị lời chào như sau, tiếp theo đặt tên cho nó là ten-file-javascript, để lưu được file định dạng JS các bạn có thể sử dụng phần mềm Sublime Text. Bây giờ nhúng đường dẫn vào trong tập tin HTML với cấu trúc đã đưa ra ở trên, các bạn có thể dán nó vào trong cặp thẻ hay đều được hết nhé ! Các bạn làm được không nhỉ ? Vì làm việc với JavaScript có một số hạn chế với Codepen nên mình không khuyến khích dùng nó cho những bài mở đầu này. Các bạn nên dùng Sublime Text để soạn thảo code và chạy trên trình duyệt web như Chrome. Nhúng từ một file JavaScript có đường dẫn bất kỳ trên Internet, cách này có tên gọi là: External References. Cú pháp của nó có dạng như sau: Với cách này bạn có thể upload file JS của mình lên host, copy đường dẫn và thay thế đường dẫn của w3schools trong mẫu ở trên. Cái này bạn sử dụng trong trường hợp có nhiều file JS khác nhau, để nhúng vào HTML thì chúng ta sử dụng cấu trúc có dạng như sau: Đối với cách nhúng External thì chúng ta có thêm 02 kiểu bổ sung là nhúng nhiều file JS và nhúng file JS đã upload lên host như trên. Oke’, như vậy là bài này chúng ta đã tìm hiểu xong một số cách nhúng JavaScript vào HTML rồi đấy, cũng khá là dễ đúng không nào. Bạn nào xem qua, nếu có điều gì thắc mắc hoặc góp ý, hãy để lại bình luận bên dưới nhé !.vung-chon-tuy-y , và đặt vào nó một đoạn JavaScript cho nó làm việc.
.vung-chon-tuy-y{
background: #fffaca;
padding: 20px;
}
Chèn JavaScript kiểu Inline, ví dụ hiển thị thời gian hiện tại
Nhấn vào để xem thời gian
Cách ba, nhúng JavaScript kiểu External
alert["Chào mừng bạn đến với Hocban.vn !"];
Tiêu đề website
Nội dung website
Nhúng kiểu External References
Nhúng nhiều file kiểu External
Chủ Đề