Các thao tác với phần tử HTML

Các thao tác với phần tử HTML

Đối tượng HTML DOM sở hữu toàn bộ các đối tượng khác trong trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về các thao tác với phần tử HTML


Đối tượng document trong HTML DOM

Đối tượng document đại diện cho toàn bộ trang web.

Nếu muốn truy xuất bất kì thành phần nào trong trang HTML, chúng ta phải sử dụng đến đối tượng “document”.

Dưới đây là những ví dụ mà các bạn có thể tham khảo để truy xuất và xử lý HTML.


Các thao tác với phần tử HTML

Tìm kiếm các phần tử HTML

Phương thứcMô tả
document.getElementById(id)Tìm một thành phần dựa vào id
document.getElementsByTagName(name)Tìm các thành phần dựa vào tên thẻ 
document.getElementsByClassName(name)Tìm các thành phần dựa vào tên class

Thay đổi phần tử HTML

Thuộc tínhMô tả
element.innerHTML =  nội dung html mớiThay đổi nội dung bên trong của thành phần HTML
element.attribute = giá trị mớiThay đổi giá trị thuộc tính của một thành phần HTML
element.style.property = style mớiThay đổi style của một thành phần HTML
Phương thứcMô tả
element.setAttribute(attribute, value)Thy đổi giá trị thuộc tính của thành phần HTML

Thêm và xóa các phần tử HTML

Phương thứcMô tả
document.createElement(element)Tạo một thành phần HTML mới
document.removeChild(element)Xóa một thành phần HTML
document.appendChild(element)Chèn thêm một thành phần mới HTML (vào cuối nội dung)
document.replaceChild(new, old)Thay thế một thành phần HTML đã có
document.write(text)Xuất giá trị ra giao diện

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận