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
