Tài liệu HTML DOM trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Tài liệu HTML DOM trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Đối tượng tài liệu HTML DOM là chủ sở hữu của tất cả các đối tượng khác trong trang web của bạn.

Đối tượng tài liệu HTML DOM

Đối tượng tài liệu đại diện cho trang web của bạn. Nếu bạn muốn truy cập vào bất kỳ phần tử nào trong một trang HTML, bạn luôn bắt đầu với việc truy cập đối tượng tài liệu.

Dưới đây là một số ví dụ về cách bạn có thể sử dụng đối tượng tài liệu để truy cập và thao tác HTML.

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

Phương thức Mô tả
document.getElementById(id) Tìm một phần tử theo id
document.getElementsByTagName(name) Tìm các phần tử theo tên thẻ
document.getElementsByClassName(name) Tìm các phần tử theo tên lớp

Thay đổi phần tử HTML

Phương thức Mô tả
element.innerHTML =  new html content Thay đổi HTML bên trong của một phần tử
element.attribute = new value Thay đổi giá trị thuộc tính của một phần tử HTML
element.setAttribute(attribute, value) Thay đổi giá trị thuộc tính của một phần tử HTML
element.style.property = new style Thay đổi định dạng của một phần tử HTML

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

Phương thức Mô tả
document.createElement(element) Tạo một phần tử HTML
document.removeChild(element) Bỏ một phần tử HTML
document.appendChild(element) Thêm một phần tử HTML
document.replaceChild(element) Thay thế một phần tử HTML
document.write(text) Viết vào luồng đầu ra HTML

Thêm bộ quản lý sự kiện

Phương thức Mô tả
document.getElementById(id).onclick = function(){code} Thêm mã trình xử lý sự kiện vào sự kiện onclick

Tìm đối tượng HTML

HTML DOM Level 1 (1998) đầu tiên đã xác định 11 đối tượng HTML, bộ sưu tập đối tượng và thuộc tính. Các giá trị này vẫn hợp lệ trong HTML5.

Sau đó, trong HTML DOM Cấp 3, nhiều đối tượng, bộ sưu tập và thuộc tính đã được thêm.

Thuộc tính Mô tả DOM
document.anchors Trả về tất cả phần tử <a> có một tên thuộc tính 1
document.applets Trả về tất cả các phần tử <applet> (Không dùng trong HTML5 nữa) 1
document.baseURI Trả về cơ sở tuyệt đối URI của tài liệu 3
document.body Trả về phần tử <body> 1
document.cookie Trả về cookie của tài liệu 1
document.doctype Trả về loại tài liệu 3
document.documentElement Trả về phần tử <html> 3
document.documentMode Trả về chế độ được trình duyệt sử dụng 3
document.documentURI Trả về URI của tài liệu 3
document.domain Trả về tên miền của máy chủ tài liệu 1
document.domConfig Lỗi thời. Trả về cấu hình DOM 3
document.embeds Trả về tất cả các phần tử <embed> 3
document.forms Trả về tất cả các phần tử <form> 1
document.head Trả về phần tử <head> 3
document.images Trả về tất cả các phần tử <img> 1
document.implementation Trả về thực hiện DOM 3
document.inputEncoding Trả về mã hoá của tài liệu (bộ ký tự) 3
document.lastModified Trả về ngày và thời gian tài liệu được cập nhật 3
document.links Trả về tất cả các phần tử <area> và <a> có thuộc tính href 1
document.readyState Trả về trạng thái (đang tải) của tài liệu 3
document.referrer Trả về URI của người giới thiệu (tài liệu liên kết) 1
document.scripts Trả về tất cả các phần tử <script> 3
document.strictErrorChecking Trả về nếu kiểm tra lỗi được thi hành 3
document.title Trả về phần tử <title> 1
document.URL Trả về URL đầy đủ của tài liệu 1