Bài 6. DOM và sự kiện

Chọn phần tử

const tieuDe = document.querySelector("h1");
const cacNut = document.querySelectorAll(".nut");
const o = document.getElementById("ten");

Thay đổi trang

tieuDe.textContent = "Tiêu đề mới";
tieuDe.classList.add("noi-bat");
tieuDe.style.color = "green";
o.setAttribute("placeholder", "Nhập tên");

Sự kiện

const nut = document.querySelector("#nut");
nut.addEventListener("click", () => {
  alert("Đã bấm");
});

document.querySelector("#ten").addEventListener("input", e => {
  console.log(e.target.value);
});

Tạo phần tử động

const li = document.createElement("li");
li.textContent = "Việc mới";
document.querySelector("ul").appendChild(li);
li.remove();

<input id="o"><button id="them">Thêm</button><ul id="ds"></ul>

const ds = document.querySelector("#ds");
document.querySelector("#them").onclick = () => {
  const o = document.querySelector("#o");
  if (!o.value.trim()) return;
  const li = document.createElement("li");
  li.textContent = o.value;
  ds.appendChild(li);
  o.value = "";
};
ds.addEventListener("click", e => e.target.remove());