Nắm vững DOM Manipulation để tạo trang web động và tương tác! Bài viết này sẽ hướng dẫn bạn chi tiết cách truy cập, thay đổi nội dung và thuộc tính của các phần tử HTML bằng JavaScript. Tìm hiểu các phương thức chọn lọc phổ biến như getElementById, querySelector, và cách cập nhật textContent, innerHTML, cùng với quản lý class hiệu quả. Khám phá ví dụ thực tế và các mẹo tối ưu SEO để đảm bảo trang web của bạn không chỉ linh hoạt mà còn thân thiện với công cụ tìm kiếm.
Chào bạn,
Dưới đây là một bài viết chi tiết và chuẩn SEO về "DOM Manipulation: Truy cập, thay đổi nội dung và thuộc tính của các phần tử HTML." Bài viết này được tối ưu hóa để thân thiện với công cụ tìm kiếm và cung cấp thông tin hữu ích cho người đọc.
---
Trước khi đi sâu vào kỹ thuật, hãy cùng tìm hiểu về DOM. DOM (Document Object Model) là một giao diện lập trình ứng dụng (API) cho các tài liệu HTML và XML. Nó định nghĩa cấu trúc logic của tài liệu và cách mà tài liệu được truy cập và thao tác. Nói một cách đơn giản, khi trình duyệt tải một trang web, nó sẽ tạo ra một cây DOM, trong đó mỗi nút (node) đại diện cho một phần tử HTML, thuộc tính hoặc đoạn văn bản.
DOM Manipulation chính là quá trình sử dụng JavaScript để tương tác với cây DOM này. Chúng ta có thể:
id, class, src, href, style, v.v.Tầm quan trọng của DOM Manipulation:
---
Để thay đổi một phần tử, trước tiên chúng ta cần truy cập được nó. JavaScript cung cấp nhiều phương thức mạnh mẽ để chọn các phần tử dựa trên các tiêu chí khác nhau:
document.getElementById():id của nó.null nếu không tìm thấy.
const myElement = document.getElementById('myId');
document.getElementsByClassName():class của chúng.HTMLCollection (giống như một mảng) chứa tất cả các phần tử có cùng class.
const elementsWithClass = document.getElementsByClassName('myClass');
// Duyệt qua các phần tử
for (let i = 0; i < elementsWithClass.length; i++) {
console.log(elementsWithClass[i]);
}
document.getElementsByTagName():HTMLCollection.
const paragraphs = document.getElementsByTagName('p');
document.querySelector():id, class, tên thẻ, thuộc tính, hoặc kết hợp chúng.
const firstParagraph = document.querySelector('p');
const elementById = document.querySelector('#myId');
const elementByClass = document.querySelector('.myClass');
const nestedElement = document.querySelector('div.container p.text');
document.querySelectorAll():querySelector(), nhưng trả về một NodeList chứa tất cả các phần tử khớp với bộ chọn CSS.NodeList bằng vòng lặp for hoặc forEach.
const allParagraphs = document.querySelectorAll('p');
allParagraphs.forEach(p => {
console.log(p.textContent);
});
Mẹo SEO: Sử dụng id và class rõ ràng, có ý nghĩa để dễ dàng truy cập và quản lý DOM, đồng thời giúp công cụ tìm kiếm hiểu rõ hơn về cấu trúc nội dung.
---
Sau khi đã truy cập được phần tử, chúng ta có thể dễ dàng thay đổi nội dung bên trong nó.
element.textContent:
<p id="myParagraph">Đây là <strong>nội dung gốc</strong>.</p>
const myParagraph = document.getElementById('myParagraph');
myParagraph.textContent = 'Nội dung mới đã được cập nhật.';
// Kết quả: <p id="myParagraph">Nội dung mới đã được cập nhật.</p>
element.innerHTML:innerHTML không đúng cách có thể dẫn đến lỗ hổng bảo mật XSS (Cross-Site Scripting) nếu bạn chèn nội dung không đáng tin cậy từ người dùng. Luôn lọc (sanitize) dữ liệu đầu vào.
<div id="myDiv"></div>
const myDiv = document.getElementById('myDiv');
myDiv.innerHTML = '<h2>Tiêu đề mới</h2><p>Đoạn văn bản có <strong>định dạng in đậm</strong>.</p>';
// Kết quả: <div id="myDiv"><h2>Tiêu đề mới</h2><p>Đoạn văn bản có <strong>định dạng in đậm</strong>.</p></div>
Mẹo SEO: Khi thay đổi nội dung, hãy đảm bảo rằng nội dung mới vẫn giữ được ngữ cảnh và ý nghĩa, không làm mất đi các từ khóa quan trọng hoặc thông tin cốt lõi mà công cụ tìm kiếm đã index.
---
Mỗi phần tử HTML đều có các thuộc tính (attributes) như src (đối với ảnh), href (đối với liên kết), class, id, style, v.v. Chúng ta có thể thay đổi các thuộc tính này bằng JavaScript.
element.attributeName (Cách truy cập trực tiếp):id, className (lưu ý className thay vì class vì class là từ khóa trong JavaScript), href, src, value, bạn có thể truy cập chúng trực tiếp như một thuộc tính của đối tượng DOM.
<a id="myLink" href="old-link.html">Link cũ</a>
<img id="myImage" src="old-image.jpg" alt="Ảnh cũ">
<input type="text" id="myInput" value="Giá trị cũ">
const myLink = document.getElementById('myLink');
myLink.href = 'new-link.html';
myLink.textContent = 'Link mới';
const myImage = document.getElementById('myImage');
myImage.src = 'new-image.png';
myImage.alt = 'Ảnh mới';
const myInput = document.getElementById('myInput');
myInput.value = 'Giá trị mới đã nhập';
element.setAttribute(name, value):
<div id="myDiv"></div>
const myDiv = document.getElementById('myDiv');
myDiv.setAttribute('data-custom', 'giá trị tùy chỉnh');
myDiv.setAttribute('title', 'Đây là div của tôi');
myDiv.setAttribute('class', 'active highlight'); // Thay thế tất cả các class hiện có
element.getAttribute(name):
const dataValue = myDiv.getAttribute('data-custom'); // Kết quả: "giá trị tùy chỉnh"
element.removeAttribute(name):
myDiv.removeAttribute('title');
class (classList API):className.classList cung cấp các phương thức tiện lợi như add(), remove(), toggle(), contains().
<button id="myButton" class="btn primary"></button>
const myButton = document.getElementById('myButton');
myButton.classList.add('active'); // Thêm class 'active'
myButton.classList.remove('primary'); // Xóa class 'primary'
myButton.classList.toggle('highlight'); // Thêm 'highlight' nếu chưa có, xóa nếu có
const hasActive = myButton.classList.contains('active'); // Kiểm tra có class 'active' không (true/false)
Mẹo SEO: Khi thay đổi thuộc tính alt của ảnh hoặc title của liên kết, hãy đảm bảo rằng chúng mô tả chính xác nội dung để tăng khả năng tiếp cận và tối ưu hóa cho SEO hình ảnh/liên kết.
---
Hãy cùng xem một ví dụ đơn giản để thấy cách kết hợp các kỹ thuật trên:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ DOM Manipulation</title>
<style>
.highlight {
background-color: yellow;
border: 1px solid orange;
}
.text-blue {
color: blue;
}
</style>
</head>
<body>
<h1 id="pageTitle">Chào mừng bạn đến với trang web</h1>
<p class="intro-text">Đây là một đoạn giới thiệu đơn giản.</p>
<button id="changeContentBtn">Thay đổi nội dung</button>
<button id="toggleClassBtn">Thay đổi Class</button>
<img id="myImage" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Ảnh+gốc" alt="Ảnh Placeholder Màu Xanh">
<script src="app.js"></script>
</body>
</html>
// 1. Truy cập các phần tử
const pageTitle = document.getElementById('pageTitle');
const introText = document.querySelector('.intro-text');
const changeContentBtn = document.getElementById('changeContentBtn');
const toggleClassBtn = document.getElementById('toggleClassBtn');
const myImage = document.getElementById('myImage');
// 2. Thay đổi nội dung của tiêu đề khi trang tải
pageTitle.textContent = 'DOM Manipulation: Mạnh mẽ và Đa năng!';
// 3. Thay đổi nội dung và thuộc tính khi click nút "Thay đổi nội dung"
changeContentBtn.addEventListener('click', () => {
introText.innerHTML = 'Đoạn này đã được <strong>cập nhật</strong> bằng JavaScript!';
myImage.src = 'https://via.placeholder.com/200/FF0000/FFFFFF?text=Ảnh+mới';
myImage.alt = 'Ảnh Placeholder Màu Đỏ Mới';
});
// 4. Thay đổi class khi click nút "Thay đổi Class"
toggleClassBtn.addEventListener('click', () => {
introText.classList.toggle('highlight'); // Thêm/xóa class highlight
introText.classList.toggle('text-blue'); // Thêm/xóa class text-blue
});
Trong ví dụ này:
getElementById và querySelector.textContent của h1.innerHTML để chèn HTML mới vào p.src và alt của img.classList.toggle để thêm/xóa các lớp CSS, thay đổi kiểu dáng của p.---
Mặc dù DOM Manipulation là công cụ mạnh mẽ, việc sử dụng không đúng cách có thể ảnh hưởng đến SEO:
requestAnimationFrame cho các thay đổi animation, và trì hoãn (defer) việc thực thi JavaScript không cần thiết.href của liên kết hoặc src, alt của hình ảnh, hãy đảm bảo rằng các giá trị mới là hợp lệ, có ý nghĩa và thân thiện với SEO.---
DOM Manipulation là một kỹ năng cốt lõi trong phát triển web front-end. Nắm vững cách truy cập, thay đổi nội dung và thuộc tính của các phần tử HTML sẽ giúp bạn xây dựng những trang web tương tác, năng động và giàu trải nghiệm người dùng. Luôn nhớ tối ưu hóa hiệu suất và cân nhắc các yếu tố SEO khi thao tác DOM để đảm bảo trang web của bạn không chỉ đẹp mà còn được công cụ tìm kiếm đánh giá cao.
Hy vọng bài viết này đã cung cấp cho bạn cái nhìn toàn diện về DOM Manipulation. Hãy thực hành thường xuyên để thành thạo kỹ năng quan trọng này!
![[SSH] - Configuring SSH on MacBook](/upload/img/news/ssh-la-gi-4.jpeg)
![[Magento] - How to create a button and retrieve selected data from the list displayed in the modal](/upload/img/news/magento-217.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/img/news/magento-2.png)
![[Macbook] - How to disable live captions](/upload/images/Screenshot%202023-10-23%20at%2020_34_57.png)
![[Magento] - Cách viết css bằng file scss và chèn css vào magento](/upload/img/news/magento-29.png)
![[Magento] - cách lập trình 1 theme trong magento](/upload/img/news/magento-211.png)
![[Magento] - cách tạo module trong magento](/upload/img/news/magento-212.png)
.jpg)
