07/09/2018, 15:05

Tài liệu HTML DOM trong JavaScript

Đố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 ...

Đố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
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0