11. DOM HTML trong lập trình JavaScript

Trong lập trình JavaScript, DOM (Document Object Model) HTML là một biểu diễn cho các phần tử HTML và cấu trúc của tài liệu (trang web). DOM HTML cho phép bạn truy cập và thao tác các phần tử HTML, thêm, sửa đổi hoặc xóa chúng từ JavaScript. Các thao tác trên DOM HTML giúp bạn thay đổi nội dung, kiểu dáng và cấu trúc của trang web một cách động.

Dưới đây là một số phương thức và thuộc tính phổ biến để làm việc với DOM HTML trong JavaScript:

1. Lấy DOM Elements: Bạn có thể lấy DOM Element bằng cách sử dụng các phương thức như getElementById, getElementsByClassName, getElementsByTagName, hoặc querySelector.

html

<!-- Ví dụ HTML -->
<div id="myDiv">Đây là một div</div>

javascript

// Lấy DOM Element bằng id
const myDivElement = document.getElementById("myDiv");

// Lấy DOM Elements bằng class name
const elementsByClassName = document.getElementsByClassName("someClass");

// Lấy DOM Elements bằng tag name
const elementsByTagName = document.getElementsByTagName("p");

// Lấy DOM Element bằng selector (CSS selector)
const elementByQuerySelector = document.querySelector("#myDiv");

2. Thay đổi nội dung của DOM Elements: Bạn có thể thay đổi nội dung của DOM Elements bằng cách sử dụng thuộc tính textContent hoặc innerHTML.

javascript

const myDivElement = document.getElementById("myDiv");
myDivElement.textContent = "Nội dung mới";
// Hoặc
myDivElement.innerHTML = "<strong>Nội dung mới có định dạng</strong>";

3. Thêm và loại bỏ các phần tử mới: Bạn có thể thêm và loại bỏ các phần tử mới trong DOM bằng cách sử dụng các phương thức createElement, appendChild và removeChild.

javascript

// Tạo một phần tử mới
const newElement = document.createElement("p");
newElement.textContent = "Đây là một phần tử mới";

// Thêm phần tử mới vào trong phần tử gốc (ví dụ: body)
document.body.appendChild(newElement);

// Loại bỏ phần tử
const elementToRemove = document.getElementById("elementToRemove");
document.body.removeChild(elementToRemove);

4. Thêm và loại bỏ các lớp và thuộc tính của DOM Elements: Để thêm và loại bỏ lớp hoặc thuộc tính của DOM Elements, bạn có thể sử dụng các phương thức classList.add(), classList.remove(), setAttribute() và removeAttribute().

javascript

const myDivElement = document.getElementById("myDiv");

// Thêm một lớp mới
myDivElement.classList.add("newClass");

// Loại bỏ một lớp
myDivElement.classList.remove("oldClass");

// Thêm một thuộc tính mới
myDivElement.setAttribute("data-custom", "value");

// Loại bỏ một thuộc tính
myDivElement.removeAttribute("data-custom");

5. Lắng nghe và xử lý các sự kiện trên DOM Elements: Để lắng nghe và xử lý các sự kiện trên DOM Elements, bạn có thể sử dụng các phương thức addEventListener().

javascript

const myButton = document.getElementById("myButton");

myButton.addEventListener("click", function() {
  alert("Bạn đã nhấn nút!");
});

Các ví dụ trên giúp bạn làm việc với DOM HTML trong JavaScript, tương tác và thay đổi các phần tử và cấu trúc của trang web của bạn.