Ôn tập mô hình DOM

Ôn tập mô hình DOM nhắc bạn các kiến thức cần nhớ về DOM như loại node, các hàm, các thuộc tính, các sự kiện của node.

1.  DOM là gì

DOM là mô hình phân cấp diễn tả cấu trúc tag HTML trong trang web.  Mỗi thành phần trong DOM được gọi là 1 node hay element.

Mỗi node trong DOM có rất nhiều thuộc tính và nhiều hàm. Và có nhiều loại Node trong DOM như Element node, TextNode, Attribute node, Comment node

a.  Hình dung về DOM

Giả sử bạn có 1 trang web với code như sau:

<head>
   <title>Trang chủ</title>
   <meta charset="utf-8"/>
</head>
<body>
   <header>
      <h1 class="tieude">Hướng dẫn web</h1>
      <a id="lk" href="https://longnv.name.vn">Thầy Long Web</a>
   </header>
   <main>
      <article id="cotrai"></article>
      <aside id="cotphai"></aside>
   </main>
</body>

Khi đọc code html như trên, trình duyệt sẽ tạo ra trong RAM một cây phân cấp diễn tả cấu trúc đã gõ (gọi là mô hình DOM) với các node như sau:

mo-hinh-dom
Mô hình DOM

Nhờ DOM, bạn dùng các lệnh js để tương tác vào: thêm / xóa / chỉnh/ duyệt qua các node rất dễ dàng.

b.  Các thuộc tính thường dùng của node trong DOM

  1. id: id của node trong dom. Ví dụ : <article id=”cottrai”> </article>
  2. innerHTML: code html bên trong node.
  3. innerText : text bên trong node
  4. value: value của node
  5. className: class css của node
  6. attributes: các thuộc tính của node
  7. parentNode: node cha

c.  Các hàm thường dùng để tương tác với DOM

  1. getElementById(“<id>”) : chọn node theo id. Kết quả trả về là 1 node
  2. getElementsByTagName(“<tag>”): chọn node theo tag. Kết quả là 1 array. Ví dụ:  arr = document.getElementsByTagName(“img”); => Kết  quả arr là 1 mảng chứa tất cả các hình trong trang.
  3. getElementsByName(“<ten>”) : chọn các node có thuộc tính name là ten. Kết quả là 1 array
  4. getElementsByClassName(“<classCss>”): chọn vác node có class css là classCss. Kết quả là 1 array. Ví dụ:  arr = document.getElementsByClassName(“tieude”); => Kết  quả arr là 1 mảng chứa tất cả các taf có class css là tieude
  5. querySelector(selector): Chọn 1 node thõa điều kiện diễn tả trong selector
  6. querySelectorAll(selector): Chọn các node thõa điều kiện trong selector
  7. setAttribute(“<tênThuộcTính>”, “<giá trị>”)  => gán vào thuộc tính của node một giá trị nào đó
  8. getAttribute(“<tênThuộcTính>”) => lấy ra giá trị thuộc tính của node
  9. appendChild(node): Thêm node con vào node hiện tại
  10. remove():  xóa node hiện tại khỏi DOM
  11. removeChild(node) : xóa node con của node hiện tại khỏi DOM

d. Các sự kiện thường dùng trong DOM

Mỗi node trong DOM có rất nhiều sự kiện xảy ra. Với mỗi sự kiện, bạn có thể chạy 1 lệnh javascript hoặc gọi 1 hàm cũng được. Sau đây là một số sự kiện của các node trong DOM:

  1. Sự kiện onload: là sự kiện xảy ra khi trình duyệt nạp xong trang web (tức các tài nguyên cho trang: hình, css, js… đã được tải xong)
  2. Sự kiện onclick: là sự kiện xảy ra khi nhắp chuột vào 1 tag nào đó
  3. Sự kiện ondbclick: xảy ra khi nhắp đúp chuột vào 1 tag nào đó
  4. Sự kiện onblur: xảy ra khi rời khỏi 1 tag nào đó, tức chuyển focus sang tag khác
  5. Sự kiện onfocus: xảy ra khi 1 tag có focus (tức được nhắp chuột vào hoặc tab nhảy đến)
  6. Sự kiện onsubmit: xảy ra khi submit 1 form, tức nhắp chuột vào nút submit
  7. Sự kiện oninput: xảy ra khi user nhập liệu vào 1 tag input
  8. Sự kiện onkeypress / onkeydown / onkeyup: xảy ra khi user gõ 1 phím / đè 1 phím / buông 1 phím
  9. Sự kiện onchange: xảy ra khi value của tag được thay đổi
  10. Sự kiện onmouseup / onmousedown / onmousemove / mouseover / mouseout : xảy ra khi nhả chuột / đè chuột / di chuyển chuột  / đưa chuột vào / đưa chuột ra một tag nào đó.

Chú ý: muốn cấm (hay bỏ qua) 1 sự kiện thì dùng lệnh return flase trong sự kiện. Ví dụ sau là cấm sự kiện click của liên kết :

<a href="https://longnv.name.vn" onclick="return false;"> Thầy Long Web </a>

e. Ví dụ về các hàm thường dùng tương tác với DOM

f.  Ví dụ về các sự kiện trong DOM

BÀI VIẾT LIÊN QUANXEM THÊM