10. DOM Elements trong lập trình JavaScript

Trong lập trình JavaScript, DOM (Document Object Model) Elements đại diện cho các phần tử HTML trong tài liệu (trang web). DOM là một cơ chế cho phép các ngôn ngữ lập trình như JavaScript tương tác với và thay đổi nội dung, cấu trúc và kiểu dáng của trang web. Các DOM Elements cho phép bạn thực hiện các thao tác như lấy giá trị của phần tử, thay đổi nội dung, thêm/xóa/điều chỉnh thuộc tính và kiểu dáng của phần tử.

Dưới đây là một số cách để truy cập và thao tác với các DOM Elements 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/loại bỏ lớp (class) và thuộc tính của DOM Elements: Để thêm/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(), 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");

4. 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!");
});

Trong các ví dụ trên, chúng ta đã truy cập và thực hiện một số thao tác trên DOM Elements. JavaScript cho phép bạn thực hiện rất nhiều thao tác khác nhau để tương tác và điều khiển các phần tử trong trang web của bạn.