Giới thiệu về DOM Scripting

Khi bạn tạo một trang web và tải nó vào trình duyệt web, khi này DOM (Document Object Model) sẽ bắt đầu làm việc. Nó nhận hồ sơ đã viết và chuyển hồ sơ này thành một đối tượng document. Nếu bạn đã học một ngôn ngữ lập trình nào đó thì nói đến đối tượng chắc bạn cũng hiểu, vậy ở đây DOM cũng tương tự.

- Các biến kết hợp với một đối tượng thì được gọi là các thuộc tính của đối tượng.

- Trong khi các hàm thực hiện một chức năng nào đó của đối tượng thì được gọi là các phương thức của đối tượng.

Ví dụ: getElementById() là một phương thức của đối tượng document, phương thức này nhận đối số là thuộc tính id của phần tử bạn muốn lấy. getElementsByTagName() là phương thức của đối tượng document chúng ta có thể lấy một mảng các phần tử có cùng tên trong hồ sơ.

Trên thực tế bạn có thể hiểu rằng mỗi phần tử trong hồ sơ đều là một đối tượng và nó cũng có các thuộc tính và phương thức.

Mỗi đối tượng trong hồ sơ đều có rất nhiều thuộc tính ví dụ các thuộc tính chứa thông tin vị trí của phần tử trong hồ sơ như parentNode, nextsibling, previousSibling, childNode, firstChild, lastChild. Một số khác lại chỉ thông tin về bản thân phần tử như nodeType, nodeName.

Nãy giờ tôi có nhăc đến khái niệm hồ sơ và nút vậy chúng là gì?

Hồ sơ đang được nhắc đến ở đây chính là đối tượng document chúng được bắt đầu từ thẻ mở và đóng, các nút ở đây chính là các đối tượng trong hồ sơ.

Nút thì có nhiều loại khác nhau như nút phần tử, nút văn bản, nút thuộc tính... tuy nhiên các nút thuộc tính lại chứa trong nút phần tử vì chúng nằm trong thẻ mở của phần tử, nút văn bản nằm trong nút phần tử vì nó nằm giữa thẻ mở và đóng của phần tử, nhưng không phải tất cả các nút phần tử đều đều có nút văn bản. Chúng ta hãy cùng xem một ví dụ về việc tác động làm thay đổi cấu trúc hồ sơ để bạn hiểu DOM làm việc như thế nào.

window.onload = function(){
   // tạo ra nút phần tử p
   var para = document.createElement("p");
   // tạo ra nút văn bản
   var txt1 = document.createTextNode("Day la ");
   // gán nút văn bản cho nút phần tủ p
   para.appendChild(txt1);
   // tạo ra nút phần tử em
   var emphasis =document.createElement("em");
   // tạo ra nút văn bản
   var txt2 = document.createTextNode("not dung ");
   // gán nút văn bản cho nút phần tử em
   emphasis.appendChild(txt2);
   // gán nút phần tử em là con nút phần tử p
   para.appendChild(emphasis);
   // tạo ra nút văn bản
   var txt3 = document.createTextNode("cua toi");
   // gán nút văn bản cho nút phần tử p
   para.appendChild(txt3);
   // lấy ra phần tử id="testdiv"
   var testdiv = document.getElementById("testdiv");
   // gán nút phần tử p là con nút phần tử testdiv
   testdiv.appendChild(para);
}

Trong ví dụ trên ta có thể lấy, tạo ra phần tử và chèn nó và hồ sơ. DOM thực sự mạnh mẽ để tác động đến trình bày trên web, nói đến Javascript thì không thể không nói đến DOM , chúng ta sử dụng Javascript để viết hành động chúng ta cần tác động đến DOM. Với sự phát triển mạnh mẽ của công nghệ cùng với đội ngũ các nhà phát triển web đông đảo trên thế giới thì ngôn ngữ cũng có những phát triển, Jquery là một thư viện tuyệt vời để viết các ứng dụng tác động đến trình bày mà bản chất Jquery được xây dựng từ Javascript - DOM, Jquery đã làm cho việc viết ứng dụng bằng DOM trở nên ngắn gọn và giễ ràng hơn rất nhiều, nhưng chúng ta  cũng có thể viết ứng dụng bằng DOM và tôi nghĩ rằng nó sẽ chạy nhanh hơn khi bạn viết bằng Jquery.  Với một vài hành động đơn giản thì bạn cũng không nhất thiết phải lạm dụng quá nhiều vào Jquery.

Trong những bài kế tiếp tôi sẽ viết một seri bài về DOM, chúng ta sẽ tìm hiểu về các phương thức và thuộc tính phổ biến trên DOM.