[JS Basics] Thao tác DOM với JavaScript: Hướng dẫn chi tiết cho người mới

Bạn đã bao giờ tự hỏi làm thế nào các trang web có thể phản hồi lại tương tác của người dùng một cách tức thì, thay đổi nội dung mà không cần tải lại trang? "Phép thuật" đằng sau đó chính là DOM và khả năng thao tác với nó bằng JavaScript.

Thao tác DOM với JavaScript

Bài viết này sẽ là hướng dẫn thật toàn diện, giúp bạn từ một người mới bắt đầu trở thành một chuyên gia trong việc "điều khiển" các thành phần trên trang web của mình.

DOM là gì? Tại sao nó lại quan trọng?

Hãy tưởng tượng trang web của bạn như một ngôi nhà. HTML chính là bản thiết kế, xác định các phòng (các thẻ như <div>, <p>, <h1>). Nhưng để có thể sơn lại một bức tường, di chuyển một món đồ hay bật tắt đèn, bạn cần một mô hình 3D của ngôi nhà đó, cho phép bạn tương tác với từng vật thể.

Đó chính là DOM (Document Object Model). Trình duyệt web tạo ra một cấu trúc dạng cây từ mã HTML của bạn, trong đó mỗi phần tử, thuộc tính và đoạn văn bản đều trở thành một "nút" (node) trong cây này. JavaScript có thể truy cập và "nói chuyện" với cây DOM này, cho phép chúng ta:

Thay đổi nội dung: Cập nhật văn bản, hình ảnh, hoặc bất kỳ nội dung nào trên trang.
Thay đổi thuộc tính: Sửa đổi các thuộc tính của thẻ HTML như src của ảnh hay href của liên kết.
Thay đổi CSS: Thêm, xóa hoặc chỉnh sửa trực tiếp các style của phần tử để thay đổi giao diện.
Phản hồi sự kiện: Lắng nghe các hành động của người dùng như click chuột, gõ phím, và thực thi các đoạn mã tương ứng.
Tạo và xóa phần tử: Thêm các phần tử mới vào trang hoặc loại bỏ những phần tử không cần thiết một cách linh hoạt.

DOM là gì? Tại sao nó lại quan trọng?

Nắm vững thao tác DOM là một kỹ năng nền tảng và cực kỳ quan trọng đối với bất kỳ nhà phát triển web nào.

Bước 1: "Chọn mặt gửi vàng" - Truy cập các phần tử DOM

Trước khi có thể thay đổi bất cứ thứ gì, bạn cần phải chọn đúng phần tử mình muốn thao tác. JavaScript cung cấp nhiều phương thức mạnh mẽ để làm việc này.

Các phương thức phổ biến nhất:

getElementById('id'): Phương thức nhanh và hiệu quả nhất để chọn một phần tử duy nhất thông qua thuộc tính id của nó.
```
const mainTitle = document.getElementById('main-title')
```
getElementsByClassName('ten-class'): Trả về một tập hợp (HTMLCollection) tất cả các phần tử có cùng một lớp CSS.
```
const noteItems = document.getElementsByClassName('note')
```
getElementsByTagName('ten-the'): Trả về một tập hợp tất cả các phần tử có cùng một tên thẻ (ví dụ: p, li, div).
```
const allParagraphs = document.getElementsByTagName('p')
```
querySelector('css-selector'): Một phương thức cực kỳ linh hoạt, cho phép bạn sử dụng bất kỳ bộ chọn CSS nào (ví dụ: #id, .class, tag[attribute]) để tìm và trả về phần tử đầu tiên nó tìm thấy.
```
const firstButton = document.querySelector('.btn-primary')
```
querySelectorAll('css-selector'): Tương tự như querySelector, nhưng nó trả về một danh sách (NodeList) tất cả các phần tử khớp với bộ chọn CSS.
```
const allImportantLinks = document.querySelectorAll('a[target="_blank"]')
```

Mẹo nhỏ: querySelector và querySelectorAll thường được ưa chuộng hơn vì sự linh hoạt và cú pháp quen thuộc với các nhà phát triển đã làm việc với CSS.

Bước 2: "Thay áo mới" - Chỉnh sửa phần tử DOM

Một khi đã "nắm trong tay" phần tử mong muốn, bạn có thể bắt đầu thay đổi nó.

Thay đổi nội dung:

textContent: Lấy hoặc thiết lập nội dung văn bản thuần túy bên trong một phần tử, bỏ qua mọi thẻ HTML.

const greeting = document.getElementById('greeting')
greeting.textContent = 'Chào mừng bạn đến với thế giới DOM!'

innerHTML: Lấy hoặc thiết lập toàn bộ nội dung HTML bên trong một phần tử. Hãy cẩn thận khi sử dụng innerHTML với dữ liệu từ người dùng vì nó có thể dẫn đến các lỗ hổng bảo mật XSS (Cross-Site Scripting).
```
const userInfo = document.getElementById('user-info')
userInfo.innerHTML = '<h3>Tên người dùng</h3><p>John Doe</p>'
```

Thay đổi thuộc tính và Style:

Thiết lập thuộc tính: Sử dụng phương thức setAttribute('ten-thuoc-tinh', 'gia-tri').

const profileImage = document.getElementById('profile-pic')
profileImage.setAttribute('src', 'images/new-avatar.jpg')

Thay đổi Style: Truy cập thuộc tính style của phần tử và thiết lập các thuộc tính CSS. Lưu ý rằng tên thuộc tính CSS sẽ được chuyển thành dạng camelCase (ví dụ: background-color thành backgroundColor).
```
const notification = document.getElementById('notification')
notification.style.backgroundColor = 'lightblue'
notification.style.padding = '20px'
notification.style.border = '1px solid blue'
```

Làm việc với Class: Thuộc tính classList cung cấp các phương thức tiện lợi để quản lý các lớp CSS.

const menu = document.getElementById('main-menu')
menu.classList.add('active') // Thêm class 'active'
menu.classList.remove('hidden') // Xóa class 'hidden'
menu.classList.toggle('expanded') // Thêm 'expanded' nếu chưa có, xóa nếu đã có

Bước 3: "Thêm thành viên" - Tạo và chèn phần tử mới

Bạn hoàn toàn có thể tạo ra các phần tử HTML mới từ đầu và thêm chúng vào cây DOM.

Tạo phần tử mới: document.createElement('ten-the')
Tạo nội dung cho nó (nếu cần): Gán textContent hoặc innerHTML.
Thêm vào DOM:
- parentElement.appendChild(newElement): Chèn phần tử mới làm con cuối cùng của phần tử cha.
- parentElement.insertBefore(newElement, referenceElement): Chèn phần tử mới vào trước một phần tử con đã có.

Ví dụ: Thêm một mục mới vào danh sách

<ul id="my-list">
  <li>Mục 1</li>
</ul>

// 1. Chọn danh sách cha
const list = document.getElementById('my-list')

// 2. Tạo phần tử <li> mới
const newItem = document.createElement('li')

// 3. Thêm nội dung cho nó
newItem.textContent = 'Mục 2'

// 4. Chèn vào danh sách
list.appendChild(newItem)

Bước 4: "Lắng nghe nhịp đập" - Xử lý sự kiện

Đây là phần thú vị nhất: làm cho trang web của bạn có thể tương tác. Bằng cách sử dụng "bộ lắng nghe sự kiện" (event listeners), bạn có thể thực thi một hàm JavaScript khi một sự kiện cụ thể xảy ra trên một phần tử.

Phương thức phổ biến và mạnh mẽ nhất là addEventListener().

Cú pháp: element.addEventListener('ten-su-kien', ham-xu-ly);

Các sự kiện phổ biến:

click: Khi người dùng nhấp chuột vào phần tử.
mouseover: Khi con trỏ chuột di chuyển vào phần tử.
mouseout: Khi con trỏ chuột di chuyển ra khỏi phần tử.
keydown: Khi một phím được nhấn xuống.
submit: Khi một biểu mẫu (form) được gửi đi.

Ví dụ: Thay đổi văn bản khi nhấp vào nút

<p id="message">Nhấn vào nút nhé!</p>
<button id="action-btn">Thay đổi!</button>

const message = document.getElementById('message')
const button = document.getElementById('action-btn')

button.addEventListener('click', function () {
  message.textContent = 'Bạn đã thay đổi thành công!'
  message.style.color = 'green'
})

Bằng cách kết hợp các kỹ thuật lựa chọn, sửa đổi và lắng nghe sự kiện, bạn có thể tạo ra những trải nghiệm người dùng phong phú và năng động, từ việc xác thực biểu mẫu, tạo các hiệu ứng hình ảnh, cho đến xây dựng các ứng dụng web phức tạp. Hành trình làm chủ giao diện web của bạn bắt đầu từ chính những thao tác DOM cơ bản này.

Chúc bạn thành công trên con đường chinh phục JavaScript!