Summary: DOM modification techniques

Sửa đổi một yếu tố hiện có

Chúng tôi đã đề cập đến nhiều cách khác nhau để bạn có thể sửa đổi các khía cạnh của một yếu tố hiện có:

Sửa đổi thuộc tính

Bạn có thể đặt thuộc tính trên một thành phần bằng cách đặt thuộc tính cùng tên. Ví dụ, để thay đổi src một :

imgEl.src = "http://www.dogs.com/dog.gif";

Ngoài ra, bạn cũng có thể sử dụng setAttribute phương thức, như vậy:

imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");

Nếu bạn muốn xóa một thuộc tính, bạn nên làm điều đó với removeAttribute như loại bỏ disabledthuộc tính khỏi một nút, cho phép nó có hiệu quả:

imgEl.removeAttribute("disabled");

Sửa đổi phong cách

Bạn có thể thay đổi kiểu giống như cách bạn thay đổi thuộc tính, bằng cách truy cập thuộc style tính của phần tử và đặt thuộc tính tương ứng. Ví dụ: để thay đổi màu:

headingEl.style.color = "hotpink";

Hãy nhớ "camelCase" tên thuộc tính CSS nhiều từ, vì dấu gạch nối không phải là tên thuộc tính JS hợp lệ:

headingEl.style.backgroundColor = "salmon";

Sửa đổi tên lớp

Để thêm một lớp vào một phần tử, bạn có thể đặt thuộc className tính:

mainEl.className = "warning";

Điều đó sẽ ghi đè bất kỳ lớp nào hiện có, vì vậy bạn nên làm điều này thay vào đó nếu bạn chỉ muốn thêm vào danh sách các lớp:

mainEl.className += " warning";

Trong các trình duyệt mới hơn , bạn có thể sử dụng classList chức năng thay thế:

mainEl.classList.add("warning");

Sửa đổi HTML / văn bản bên trong

Để thay thế hoàn toàn nội dung của một phần tử bằng chuỗi HTML tùy ý, hãy sử dụng innerHTML:

mainEl.innerHTML = "cats are the cutest";

Nói chung, bạn nên cẩn thận khi sử dụng một trong hai thuộc tính này, bởi vì chúng cũng sẽ loại bỏ các trình lắng nghe sự kiện (mà chúng tôi dạy trong hướng dẫn tiếp theo).

Tạo các yếu tố từ đầu

Có một tập hợp các hàm mà bạn có thể sử dụng để tạo các phần tử hoàn toàn mới và thêm chúng vào trang.

Để tạo một phần tử mới, sử dụng tên được đặt khéo léo createElement:

document.body.appendChild(imgEl);

Tương tự, bạn cũng có thể sử dụng insertBefore, replaceChild, removeChild, và insertAdjacentHTML.