- Trong HTML, việc hiển thị nội dung gì đó lên màn hình thật đơn giản, ta chỉ cần nhập trực tiếp nội dung muốn hiển thị là xong [Xem ví dụ]
- Còn đối với JavaScript thì không được hỗ trợ hiển thị dữ liệu trực tiếp giống như trong HTML, mà phải thông qua một phương thức [Xem ví dụ]
- Dưới đây là ba cách sử dụng cơ bản để hiển thị nội dung lên màn hình trong JavaScript
- Cách 1. Use alert[]
- cách 2. Sử dụng tài liệu. viết[]
- Cách 3. Sử dụng tài liệu. getElementById[]. bên trongHTML
1] Sử dụng alert[]
- Khi sử dụng alert[], nội dung mà bạn muốn hiển thị sẽ được hiển thị bên trong hộp thoại thông báo [Vui lòng bấm vào đây nếu bạn chưa biết "hộp thoại thông báo" trông như thế nào]
- Cú pháp
alert[nội dung muốn hiển thị];
Hiển thị câu "Web Tài Liệu Học Lập Trình" trong hộp thoại thông báo
Xem ví dụ2] Sử dụng tài liệu. viết[]
- Khi sử dụng tài liệu. write[], nội dung mà bạn muốn hiển thị sẽ được hiển thị đúng vị trí mà nó được đặt trong trang web
- Cú pháp
document.write[nội dung muốn hiển thị];
Tài liệu học HTML
Tài liệu học JavaScript
Xem ví dụ- Nếu sau khi trang web đã tải xong mà ta sử dụng lại tài liệu. write[] thì tất cả nội dung nằm bên trong phần tử sẽ được thay thế bởi nội dung mà bạn muốn hiển thị
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
Xem ví dụ3] Sử dụng tài liệu. getElementById[]. bên trongHTML
- Khi sử dụng tài liệu. getElementById[]. innerHTML, nội dung mà bạn muốn hiển thị sẽ được hiển thị bên trong một phần tử xác định
- Cú pháp
document.getElementById["id của phần tử"].innerHTML = nội dung muốn hiển thị;
Hiển thị dòng chữ "CSS tài liệu học" bên trong phần tử có id là skud
Xem ví dụ- Lưu ý. Sau khi sử dụng tài liệu. getElementById[]. innerHTML, nội dung mà bạn muốn hiển thị sẽ thay thế tất cả nội dung cấm đầu của phần tử
Tất cả nội dung bên trong phần tử có id là skud sẽ bị thay thế bởi câu "Lập Trình Web"
Tài liệu học HTML
Tài liệu học JavaScript
Tài liệu học CSS
Xem ví dụ4] Một vài vấn đề trong việc viết nội dung muốn hiển thị
- Nếu nội dung mà bạn muốn hiển thị là một chuỗi ký tự, thì chuỗi ký tự đó phải được đặt bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn
- Nếu nội dung mà bạn muốn hiển thị là một số, thì số đó có thể đặt [hoặc không đặt] bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn
Xem ví dụ- Nếu chuỗi ký tự được đặt bên trong cặp dấu nháy đơn thì chuỗi đó không được chứa các ký tự là dấu nháy đơn [tuy nhiên nó được phép chứa các ký tự là dấu nháy kép]
Để chèn HTML vào tài liệu thay vì thay thế nội dung của một phần tử, hãy sử dụng phương thức
document.body.innerHTML = "";
4Giá trị
Một chuỗi chứa tuần tự hóa HTML của hậu duệ của phần tử. Đặt giá trị của
document.body.innerHTML = "";
3 sẽ xóa tất cả các phần tử con của phần tử và thay thế chúng bằng các nút được tạo bằng cách phân tích cú pháp HTML được cung cấp trong chuỗi htmlStringngoại lệ
document.body.innerHTML = "";
6 document.body.innerHTML = "";
7Bị ném nếu cố gắng đặt giá trị của
document.body.innerHTML = "";
3 bằng cách sử dụng chuỗi không phải là HTML được định dạng đúngdocument.body.innerHTML = "";
9 document.body.innerHTML = "";
7Bị loại bỏ nếu cố gắng chèn HTML vào một nút có nút gốc là một
61ghi chú sử dụng
Thuộc tính
document.body.innerHTML = "";
3 có thể được sử dụng để kiểm tra nguồn HTML hiện tại của trang, bao gồm mọi thay đổi đã được thực hiện kể từ khi trang được tải lần đầuĐọc nội dung HTML của một phần tử
Việc đọc
document.body.innerHTML = "";
3 khiến tác nhân người dùng tuần tự hóa đoạn HTML hoặc XML bao gồm các phần tử con của phần tử. Chuỗi kết quả được trả về
9Điều này cho phép bạn xem đánh dấu HTML của các nút nội dung của phần tử
Ghi chú. Đoạn HTML hoặc XML được trả về được tạo dựa trên nội dung hiện tại của phần tử, do đó, đánh dấu và định dạng của đoạn được trả về có khả năng không khớp với đánh dấu trang gốc
Thay thế nội dung của một phần tử
Đặt giá trị của
document.body.innerHTML = "";
3 cho phép bạn dễ dàng thay thế nội dung hiện có của một phần tử bằng nội dung mớiGhi chú. Đây là rủi ro bảo mật nếu chuỗi được chèn có thể chứa nội dung độc hại tiềm ẩn. Khi chèn dữ liệu do người dùng cung cấp, bạn phải luôn cân nhắc sử dụng
65 để làm sạch nội dung trước khi chènVí dụ: bạn có thể xóa toàn bộ nội dung của tài liệu bằng cách xóa nội dung của thuộc tính
66 của tài liệudocument.body.innerHTML = "";
Ví dụ này tìm nạp đánh dấu HTML hiện tại của tài liệu và thay thế các ký tự
67 bằng thực thể HTML
68, do đó về cơ bản chuyển đổi HTML thành văn bản thô. Điều này sau đó được bao bọc trong một phần tử
69. Sau đó, giá trị của document.body.innerHTML = "";
3 được thay đổi thành chuỗi mới này. Do đó, nội dung tài liệu được thay thế bằng màn hình hiển thị toàn bộ mã nguồn của trang
6chi tiết hoạt động
Chính xác thì điều gì sẽ xảy ra khi bạn đặt giá trị là
document.body.innerHTML = "";
3? - Giá trị đã chỉ định được phân tích cú pháp dưới dạng HTML hoặc XML [dựa trên loại tài liệu], dẫn đến một đối tượng
02 đại diện cho tập hợp các nút DOM mới cho các phần tử mớiTài liệu học HTML Tài liệu học JavaScript
- Nếu phần tử có nội dung đang được thay thế là phần tử
03, thì thuộc tínhTài liệu học HTML Tài liệu học JavaScript
05 của phần tửTài liệu học HTML Tài liệu học JavaScript
03 được thay thế bằngTài liệu học HTML Tài liệu học JavaScript
02 mới được tạo ở bước 1Tài liệu học HTML Tài liệu học JavaScript
- Đối với tất cả các phần tử khác, nội dung của phần tử được thay thế bằng các nút trong
02 mớiTài liệu học HTML Tài liệu học JavaScript
Nối thêm HTML vào một phần tử
Đặt giá trị của
document.body.innerHTML = "";
3 cho phép bạn thêm nội dung mới vào phần tử hiện cóVí dụ: chúng tôi có thể nối một mục danh sách mới [
Tài liệu học HTML
Tài liệu học JavaScript
09] vào danh sách hiện có [
Tài liệu học HTML
Tài liệu học JavaScript
80]HTML
Tài liệu học HTML
Tài liệu học JavaScript
0JavaScript
Tài liệu học HTML
Tài liệu học JavaScript
8Xin lưu ý rằng việc sử dụng
document.body.innerHTML = "";
3 để nối các phần tử HTML [e. g.
Tài liệu học HTML
Tài liệu học JavaScript
82] sẽ dẫn đến việc loại bỏ mọi trình xử lý sự kiện đã đặt trước đó. Nghĩa là, sau khi bạn thêm bất kỳ phần tử HTML nào theo cách đó, bạn sẽ không thể nghe các trình xử lý sự kiện đã đặt trước đóCân nhắc về Bảo mật
Không có gì lạ khi thấy
document.body.innerHTML = "";
3 được sử dụng để chèn văn bản vào trang web. Điều này có khả năng trở thành phương tiện tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm ẩn
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
4Mặc dù điều này có vẻ giống như một cuộc tấn công kịch bản chéo trang, nhưng kết quả là vô hại. HTML chỉ định rằng thẻ
Tài liệu học HTML
Tài liệu học JavaScript
84 được chèn bằng document.body.innerHTML = "";
3 sẽ không được thực thiTuy nhiên, có nhiều cách để thực thi JavaScript mà không cần sử dụng các phần tử
Tài liệu học HTML
Tài liệu học JavaScript
84, do đó, vẫn có rủi ro bảo mật bất cứ khi nào bạn sử dụng document.body.innerHTML = "";
3 để đặt các chuỗi mà bạn không có quyền kiểm soát. Ví dụ
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
9Vì lý do đó, bạn nên sử dụng thay vì
document.body.innerHTML = "";
3
65 để khử trùng văn bản trước khi nó được chèn vào DOM
40 khi chèn văn bản thuần túy, vì thao tác này sẽ chèn dưới dạng văn bản thô thay vì phân tích dưới dạng HTMLTài liệu học HTML Tài liệu học CSS Tài liệu học JavaScript Tài liệu học MySQL Tài liệu học PHP Click here
Cảnh báo. Nếu dự án của bạn là dự án sẽ trải qua bất kỳ hình thức đánh giá bảo mật nào, việc sử dụng
document.body.innerHTML = "";
3 rất có thể sẽ khiến mã của bạn bị từ chối. Ví dụ: nếu bạn sử dụng document.body.innerHTML = "";
3 trong tiện ích mở rộng của trình duyệt và gửi tiện ích mở rộng đó cho addons. mozilla. org, nó có thể bị từ chối trong quá trình xem xét. Vui lòng xem Chèn nội dung bên ngoài vào trang một cách an toàn để biết các phương pháp thay thếví dụ
Ví dụ này sử dụng
document.body.innerHTML = "";
3 để tạo cơ chế ghi thông báo vào hộp trên trang webJavaScript
document.getElementById["id của phần tử"].innerHTML = nội dung muốn hiển thị;
6Hàm
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
44 tạo đầu ra nhật ký bằng cách lấy thời gian hiện tại từ đối tượng
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
45 bằng cách sử dụng
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
46 và tạo chuỗi có dấu thời gian và nội dung thông báo. Sau đó, thông báo được thêm vào hộp có lớp
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
47Chúng tôi thêm một phương thức thứ hai ghi lại thông tin về các sự kiện dựa trên
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
48 [chẳng hạn như
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
49,
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
90 và
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
91]
5Sau đó, chúng tôi sử dụng điều này làm trình xử lý sự kiện cho một số sự kiện chuột trên hộp chứa nhật ký của chúng tôi
6HTML
HTML khá đơn giản cho ví dụ của chúng tôi
document.body.innerHTML = "";
0
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
92 với lớp
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
93 chỉ là một bộ chứa nhằm mục đích bố trí, trình bày nội dung với một hộp bao quanh nó.
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
92 có lớp là
Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP
Click here
47 là vùng chứa cho chính văn bản nhật kýCSS
CSS sau tạo kiểu cho nội dung ví dụ của chúng tôi
document.body.innerHTML = "";
1Kết quả
Nội dung kết quả trông như thế này. Bạn có thể xem đầu ra trong nhật ký bằng cách di chuyển chuột vào và ra khỏi hộp, nhấp vào hộp đó, v.v.