Thao tác với DOM trong JavaScript

Truy cập phần tử DOM

// Truy cập bằng ID
let header = document.getElementById("header");

// Truy cập bằng class
let items = document.getElementsByClassName("item");

// Truy cập bằng selector
let button = document.querySelector("#submit-btn");
let allButtons = document.querySelectorAll(".btn");

Thay đổi nội dung và thuộc tính

// Thay đổi nội dung văn bản
let title = document.getElementById("title");
title.textContent = "Hello JavaScript!";

// Thay đổi HTML
let container = document.getElementById("container");
container.innerHTML = "<p>New content</p>";

// Thay đổi thuộc tính
let image = document.getElementById("my-image");
image.src = "new-image.jpg";
image.alt = "New image description";

Thay đổi CSS

let box = document.getElementById("box");

// Thay đổi style trực tiếp
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "20px";

// Thêm/xóa class
box.classList.add("active");
box.classList.remove("inactive");
box.classList.toggle("hidden");

Xử lý sự kiện

let button = document.getElementById("my-button");

// Thêm event listener
button.addEventListener("click", function() {
  console.log("Button clicked!");
});

// Xử lý form submit
let form = document.getElementById("my-form");
form.addEventListener("submit", function(event) {
  event.preventDefault(); // Ngăn form submit mặc định
  console.log("Form submitted!");
});

Tạo và xóa phần tử

// Tạo phần tử mới
let newDiv = document.createElement("div");
newDiv.textContent = "I'm a new div!";
newDiv.className = "new-element";

// Thêm vào DOM
let container = document.getElementById("container");
container.appendChild(newDiv);

// Xóa phần tử
let oldElement = document.getElementById("old-element");
oldElement.remove();