11/08/2018, 20:32

CƠ BẢN VỀ DOM JAVASCRIPT

Những bài viết trước, tôi đã giới thiệu với các bạn kiến thức cơ bản về mặt ngôn ngữ của JavaScript. Bài viết này tôi sẽ giới thiệu sự liên kết của JavaScript với trình duyệt. Và cái đầu tiên mà tôi muốn nói đến, chính là DOM . DOM là gì? DOM là viết tắt của Document Object Model - một ...

Những bài viết trước, tôi đã giới thiệu với các bạn kiến thức cơ bản về mặt ngôn ngữ của JavaScript. Bài viết này tôi sẽ giới thiệu sự liên kết của JavaScript với trình duyệt. Và cái đầu tiên mà tôi muốn nói đến, chính là DOM.

DOM là gì?

DOM là viết tắt của Document Object Model - một thành phần javascript cơ bản. Hiểu đơn giản thì DOM chính là những phần tử biểu diễn cấu trúc dữ liệu của một trang web. Hãy xem xét một ví dụ đơn giản sau:

<!doctype html>
<html>
  <head>
    <title>My home page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>I also wrote a book! Read it
      <a href="http://eloquentjavascript.net">here</a>.</p>
  </body>
</html>

Đây là cấu trúc đơn giản của một trang web. Cơ bản về DOM JavaScript 1 - Complete JavaScript - completejavascript.com

Ở đây, mỗi hình vuông cùng với nội dung bên trong nó chính là DOM.

Cấu trúc biểu diễn DOM

Thực tế, cấu trúc dữ liệu của một trang web được biểu diễn dạng cây (tree). Trong đó, mỗi node sẽ tương ứng với một DOM. Mỗi DOM node sẽ có thuộc tính nodeType - là một số nguyên - để biểu diễn kiểu của node, với giá trị như sau:

  • document.ELEMENT_NODE (1) : node thông thường như html, head, body, title, h1, p,...
  • document.TEXT_NODE (3) : thành phần text trên trang web
  • document.COMMENT_NODE (8) : thành phần comment.

Ví dụ trên được biểu diễn dạng cây: Cơ bản về DOM JavaScript 2 - Complete JavaScript - completejavascript.com

Liên kết giữa các DOM node trong cây

Mỗi DOM node luôn chứa rất nhiều liên kết đến các DOM node khác. Cơ bản về DOM JavaScript - Complete JavaScript - completejavascript.com

Node.parentNode

trỏ đến node cha của một node. Nếu một node không có node cha (document) thì parentNode là null. Ví dụ: với mỗi node ph1 thì parentNodebody.

Node.childNodes

trỏ đến một đối tượng gần giống với array, chứa những node con của một node. Tại sao lại là "gần giống với array" ? Vì đối tượng này không chứa các method như slice, forEach. Ví dụ: với node body, childNodes là một danh sách với các node con là h1, p, p.

Node.firstChild

trỏ đến node con đầu tiên của một node trong childNodes. Ví dụ: với node body, firstChildh1.

Node.lastChild

trỏ đến node con cuối cùng của một node trong childNodes. Ví dụ: với node body, lastChildp (thứ 2).

Node.previousSibling

trỏ đến node liền kề phía trước (có cùng parentNode). Ví dụ: với node p (thứ nhất), previousSiblingh1.

Node.nextSibling

trỏ đến node liền kề phía sau (có cùng parentNode). Ví dụ: với node p (thứ nhất), nextSibling là p(thứ 2).

Một số phương thức phổ biến khi sử dụng DOM

Node.getElementsByTagName('tagName')

trả về một danh sách các node con, cháu của một node với tag là 'tagName'. Ở đây, tagName có thể là body, h1, p, img, ...

Node.getElementsByClassName('className')

Tương tự như phương thức trên, phương phức này trả về một danh sách các node con, cháu của một node với thuộc tính class = 'className'.

Node.getElementById('id')

trả về node có thuộc tính id = 'id'.

Node.removeChild(child)

bỏ đi node child của một node và trả về node bị bỏ đi.

Node.appendChild(child)

thêm node child vào cuối danh sách childNodes của một node.

Node.insertBefore(newNode, referenceNode)

chèn thêm node newNode vào phía trước node referenceNode.

Node.replaceChild(newChild, oldChild)

thay thế node oldChild bằng node newChild.

Document.createTextNode(data)

Tạo ra một node kiểu text với giá trị text là data.

Document.createElement(tagName)

Tạo ra một node mới có kiểu là tagName (h1, h2, p, img, div,...)

Document.querySelector(selectors)

Trả về node đầu tiên thoả mãn selectors. Trong đó, selectors là một string chứa một hay nhiều CSS-selector phân cách nhau bằng dấu phẩy.

Document.querySelectorAll(selectors)

Trả về danh sách các node thoả mãn selectors, theo thứ tự sử dụng thuật toán DFS. Perfect practice makes perfect - Complete JavaScript - completejavascript.com

Ví dụ sử dụng DOM

"Cách học tốt nhất là học từ thực hành". Sau đây là một số bài tập thực hành sử dụng DOM và các phương thức trên mà tôi đã thực hiện (phần đề bài ở trang mà tôi đã tham khảo, xem phía dưới).

Build a table

Tham khảo code tại đây.

Elements by Tag Name

Tham khảo code tại đây.

The cat's hat

Tham khảo code tại đây.

Tham khảo

  • http://eloquentjavascript.net/13_dom.html

Xin chào và hẹn gặp lại trong bài viết tiếp theo trong series JavaScript cơ bản. Thân ái,

Bản gốc: Blog Complete JavaScript

Theo dõi Lam Pham trên Kipalog để nhận thông báo khi có bài viết mới nhất:

  • Facebook Fanpage: Complete JavaScript
  • Facebook Group: Hỏi đáp JavaScript VN
  • Portfoflio : Lam Pham
Bài liên quan

Cơ bản về Async Await trong Javascript

Khi bắt đầu lập trình với Nodejs , vì Javascript (JS) là bất đồng bộ (asynchoronous) nên mình gặp khó khăn trong việc tổ chức code giống như trong lập trình đồng bộ (synchoronous). Việc cho các đoạn code vào trong các callback khiến mình cảm thấy code trở lên khó đọc theo luồng như ...

Trần Trung Dũng viết 16:51 ngày 07/09/2018

Cơ bản về Javascript

Xin chào các bạn! Javascript (Js) là một trong những ngôn ngữ "hot" ở thời điểm hiện tại. Trong bài viết này, mình sẽ tổng hợp các vấn đề do cá nhân đã tìm hiểu được về ngôn ngữ này, mình thấy hay và khác biết so với các ngôn ngữ khác. Bài viết không hướng tới cú pháp của Js (khai báo biến ra làm ...

Hoàng Hải Đăng viết 17:33 ngày 12/08/2018

Cơ bản về DOM attribute và property

Trong bài cơ bản này mình sẽ trình bày lại các khái niệm cơ bản về HTML và DOM. Bài viết này chủ yếu giải thích về các khái niệm xung quanh HTML và DOM. HTML là chữ viết tắt của Hypertext Markup Language, là ngôn ngữ được sử dụng rộng rãi nhất để viết các trang Web. Như các bạn đã biết HTML ...

Trịnh Tiến Mạnh viết 14:44 ngày 12/08/2018

Những khái niệm cơ bản về DOM

HTML là gì? HTML đã quá quen với lập trình viên, vậy nó được hiểu như thế nào? Như các bạn đã biết HTML là ngôn ngữ đánh dấu siêu văn bản, nó là một XML namespace, hay được hiểu là tập các thẻ XML mà trình duyệt nào cũng có thể đọc được. Chúng ta nhìn vào một file HTML thì nhìn thấy text, còn ...

Hoàng Hải Đăng viết 13:49 ngày 12/08/2018

Cơ bản về REST

I. Giới thiệu Xu hướng thiết kế web service trước kia từng là SOAP, WSDL ... nhưng hiện nay đã có một phương pháp tốt hơn đó là: REST (Representation State Stranfer). REST làm cho ứng dụng trở nên rõ ràng hơn: Rõ ràng về URLs: REST URL đại diện cho resource chứ không phải là một hành ...

Bùi Văn Nam viết 22:24 ngày 11/08/2018
0