Nếu các bạn chưa xem bài viết trước thì dưới đây là link nhé:

Ở bài viết này, tôi sẽ làm rõ hơn về mối liên hệ giữa HTML và Javascript. Thêm vào đó là cách sử dụng Javascript để làm việc với DOM (hay có thể hiểu nó là các thẻ HTML)

DOM là gì? và Javascript có thể làm gì với DOM

DOM là viết tắt của Document Object Model, hiểu đơn gián thì nó là 1 cây đối tượng

Cây đối tượng DOM
Cây đối tượng DOM (Xem ảnh gốc)

Mỗi Element được thể hiện ở hình trên được gọi là 1 DOM Node. Thông qua cây đổi tượng này Javascript có khả năng thực hiện các xử lý sau:

  • thay đổi tất cả các thẻ HTML
  • thay đổi toàn bộ HTML attribute
  • thay đổi toàn bộ giá trị CSS
  • có thể xóa bỏ các thẻ HTML và thuộc tính của nó
  • tạo mới thẻ HTML và thuộc tính của nó
  • tác động tới tất cả sự kiện của tất cả các thẻ HTML
  • tạo mới sự kiện cho thẻ HTML

Chúng ta sẽ tìm hiểu lần lượt các khả năng trên sau

Sử dụng Javascript để làm việc với DOM

Tiếp theo, để làm việc với DOM thông thường chúng ta cần làm quen với các công việc sau

  • Tìm kiếm DOM
  • Thay đổi nội dung của DOM
  • Thay đổi style
  • Thêm, xóa thẻ DOM
  • Thêm hiệu ứng cho thẻ DOM

1/ Tìm kiếm DOM

Có kha khá cách sử dụng javascript để thao tác với DOM, các bạn có thể tham khảo tại đây

Tuy nhiên, cách tìm kiếm dễ dàng nhất là sử dụng querySelector. Có 2 cách để sử dụng api này như sau:

  • querySelector(".example"): tìm kiếm chỉ 1 DOM có class là .example
  • querySelectorAll(".example"): tìm kiếm tất cả DOM có class là .example

Xem xét ví dụ sau để rõ hơn về cách sử dụng (tham khảo thêm)

// document.querySelector(<css selector>)
// chỉ trả về 1 DOM
document.querySelector('.title')
document.querySelector('#content p')
document.querySelector('div')
document.querySelector('p')

// document.querySelectorAll(<css selector>)
// trả về toàn bộ DOM phù hợp với <css selector>
document.querySelectorAll('.content')

2/ Thay đổi style

Để thay đổi style sử dung Javascript ta có thể sử dụng thuộc tính style

const div = document.querySelector('div')

div.style.color = 'red'
div.style.background = 'blue'

const allPTags = document.querySelectorAll('p')
// do querySelectorAll trả về 1 mảng 
// nên cần phải loop trước khi sử dụng
allPTags.forEach(p => {
  p.style.color = 'red'
  p.style.background = 'blue'
})

Lưu ý rằng, để sử dụng được thuộc tính style, trước hết bạn cần phải tìm được DOM.

Danh sách các thuộc tính khác của style có thể được tham khảo tại đây

3/ Thay đổi nội dung của DOM

Tiếp theo, ngoài việc thay đổi style của DOM, bạn có thể thay đổi cả nội dung của DOM. Xem ví dụ sau

// Giả sử ta có thẻ HTML sau
// <p>Nội dung cần thay đổi</p>

const p = document.querySelector('p')

p.innerHTML = 'Nội dung mới'
// kết quả là: <p>Nội dung mới</p>

4/ Thêm, xóa thẻ DOM

Cần phân biệt việc thêm mới DOM và thay đổi nội dung DOM

  • Thay đổi nội dung DOM là XÓA toàn bộ nội dung hiện tại và thay bằng nội dung mới sử dụng .innerHTML
  • Thêm mới DOM là bổ sung vào nội dung hiện tại 1 hoặc nhiều DOM mới sử dụng .createElement và .appendChild

Nếu các bạn đã đọc bài viết trước của tôi thì sẽ không lạ lẫm gì với ứng dụng Todo. Ứng dụng cho phép user thêm mới 1 todo vào 1 danh sách có sẵn. Việc thêm mới này được thực hiện sử dụng javascript như sau

// tìm thẻ <ul>
const list = document.querySelector('ul')

// tạo ra 1 thẻ mới là <li>
const li = document.createElement('li')

// do nó chưa có nội dung nào, 
// nên ta có thể cập nhật nội dung mới cho nó
item.innerHTML = 'Item 1'

// giờ thì sử dụng .appendChild để chèn thẻ <li> vào cuối <ul>
list.appendChild(li)

Giở nếu muốn xóa 1 thẻ đang tồn tại thì sao ? Đơn giản, chỉ việc gọi hàm .remove()

const list = document.querySelector('ul')
list.remove()

Tham khảo thêm tài liệu về append và tài liệu về remove

Mối quan hệ giữa các DOM Node

Lưu ý, mối quan hệ giữa DOM Node với nhau khác hoàn toàn với mối liên hệ giữa HTML và Javascript

Mối quan hệ của DOM Node
Mối quan hệ của DOM Node (Xem ảnh gốc)

Cùng xem xét hình minh họa trên, mỗi Node đều có mối quan hệ gia đình dòng họ với nhau 😆

  • <html> - là node gốc và nó không có node cha nào cả
  • <html> - là node cha của <head> và <body>
  • <h1> và <p> - là node anh em của nhau

Các thuộc tính nào thể hiện mối quan hệ này trong Javascript

Mối quan hệ trên cũng được thể hiện trong Javacsript qua các thuộc tính:

  • parentNode
  • children[nodenumber]
  • firstElementChild
  • lastElementChild
  • nextElementSibling
  • previousElementSibling

Những thuộc tính này hữu ích trong 1 số TH cụ thể.

Áp dụng vào ví dụ thực tiễn

Ví dụ ta có chức năng sau: khi user đổi trạng thái checkbox, dòng text mô tả sẽ bị gạch ngang thể hiện rằng todo này đã được hoàn thành

Danh sách Todo
Danh sách Todo (Xem ảnh gốc)

Sử dụng các thuộc tính quan hệ trên ta có thể thực hiện chức năng này như sau

// VD: Mỗi todo sẽ có cấu trúc HTML như sau
//     <div>
//        <input />
//        <p></p>
//    </div>

const input = document.querySelector('input')
input.addEventListener('change', function(){
    const input = this;
    // tìm node anh em nằm bên cạnh input
    const p = input.nextElementSibling;
    
    p.style.textDecoration = 'line-through'
})

Tạm kết

Trên đây là 1 số các làm việc với DOM tiêu biểu, hi vọng các bạn đã có thể thực hiện các bước thao tác cơ bản. Ở bài viết tiếp theo, tôi sẽ hướng dẫn các bạn cách tạo sự kiện DOM