Mục lục:
Video: Bài 1. Cách tính tổng 2 số với Javascript cực đơn giản 2025
Trong JavaScript, bạn có thể hiển thị các kiểu nút và các giá trị nút bằng cách sử dụng HTML DOM. Bạn cũng có thể thiết lập giá trị thuộc tính của các phần tử trong DOM sử dụng đối tượng Element. Khi bạn sử dụng JavaScript để thiết lập các thuộc tính của các phần tử DOM, các giá trị mới được phản ánh trong thời gian thực bên trong tài liệu HTML.
Thay đổi các thuộc tính của các phần tử trong một tài liệu web để phản ánh chúng ngay lập tức trong trình duyệt, mà không cần phải làm mới hoặc tải lại trang web, là một nền tảng của cái được gọi là web 2. 0.
< ! -1->innerHTML
Thuộc tính quan trọng nhất của một phần tử mà bạn có thể sửa đổi thông qua DOM là thuộc tính innerHTML.
Thuộc tính innerHTML của một phần tử chứa tất cả mọi thứ giữa thẻ bắt đầu và kết thúc của phần tử. Ví dụ, trong đoạn code sau đây, thuộc tính innerHTML của phần tử div chứa một phần tử p và nút con của nó:
Đây là một số văn bản.
Rất phổ biến trong lập trình web để tạo các phần tử div rỗng trong tài liệu HTML của bạn và sau đó sử dụng thuộc tính innerHTML để tự động chèn HTML vào các phần tử.
Để truy xuất và hiển thị giá trị của thuộc tính innerHTML, bạn có thể sử dụng mã sau:
var getTheInner = document. thân hình. firstChild. innerHTML; tài liệu. viết (getTheInner);
Trong đoạn mã trước, giá trị sẽ được xuất ra bởi tài liệu. write () là
Đây là một số văn bản.
Thiết lập thuộc tính innerHTML được thực hiện theo cách mà bạn thiết lập thuộc tính của bất kỳ đối tượng nào:
tài liệu. thân hình. firstChild. innerHTML = "Chào bạn! ";
Kết quả của việc chạy JavaScript trước đó sẽ là phần tử p và câu văn bản trong đánh dấu ban đầu sẽ được thay bằng các từ "Hi There! "Tài liệu HTML ban đầu vẫn không thay đổi, nhưng biểu diễn DOM và hiển thị của trang web sẽ được cập nhật để phản ánh giá trị mới. Bởi vì mô tả DOM của tài liệu HTML là những gì trình duyệt hiển thị, màn hình hiển thị của trang web của bạn cũng sẽ được cập nhật.
Thiết lập các thuộc tính
Để thiết lập giá trị của thuộc tính HTML, bạn có thể sử dụng phương pháp setAttribute ():
. thân hình. firstChild. innerHTML. setAttribute ("class", "myclass");
Kết quả chạy câu lệnh này là phần tử con đầu tiên của phần tử cơ thể sẽ được cấp một thuộc tính mới có tên là "class" với giá trị là "myclass".
