Giải Kinh Nghiệm về Hướng dẫn viết html trong javascript 2022
Pro đang tìm kiếm từ khóa Hướng dẫn viết html trong javascript được Update vào lúc : 2022-09-17 07:15:57 . Với phương châm chia sẻ Bí quyết về trong bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi đọc tài liệu vẫn ko hiểu thì có thể lại Comment ở cuối bài để Mình giải thích và hướng dẫn lại nha.
Trong bài này chúng ta sẽ tìm hiểu về DOM HTML trong Javascript, đây là nhóm DOM dùng để thay đổi nội dung thẻ HTML, cũng như thay đổi các thuộc tính của thẻ HTML.
Nội dung chính
- 1. Lấy nội dung trong thẻ HTML bằng Javascript2. Thay đổi thuộc tính thẻ html bằng Javascript3. Lời kết
Bài viết này được đăng tại freetuts, không được copy dưới mọi hình thức.
Khi làm việc
với Javascript thì việc lấy nội dung bên trong của một thẻ HTML là rất thường xuyên, và đôi khi bạn cũng cần gán nội dung vào các thẻ HTML để tạo các thông báo đến người dùng.
Ví dụ, bạn xây dựng chức năng validate dữ liệu của form đăng ký thành viên. Bạn có thể sử dụng hàm alert để thông báo những vi phạm của người dùng. Nhưng chuyên nghiệp hơn thì bạn sẽ tạo ra những thông báo trực tiếp trên trang html, bằng cách sử dụng javascript để bổ sung nội dung lỗi vào các vị trí đã xác định từ
trước.
1. Lấy nội dung trong thẻ HTML bằng Javascript
Để lấy nội dung bên trong một thẻ HTML thì chúng ta sử dụng cú pháp như sau:
Bài viết này được đăng tại [free tuts .net]
document.getElementById(“content”).innerHTML
Trong số đó innerHTML chính là thuộc tính của đối tượng html, công dụng của nó là dùng để lấy hoặc gán giá trị cho một thẻ html.
Để thay đổi nội dung cho một thẻ HTML thì ta dùng cú pháp sau:
document.getElementById(“content”).innerHTML = “<h2>Nội dung</h2>”;
Ví dụ: Trong ví dụ này ta sẽ
viết chương trình thay đổi nội dung bên trong của một thẻ div, và lấy nội dung bên trong của thẻ div đó.
<html>
<body>
<script language=”javascript”>
// Hàm thiết lập nội dung cho thẻ div#content
function set_content()
document.getElementById(“content”).innerHTML = “<h2>Nội dung đã được thay đổi</h2>”;
// Hàm lấy nội dung cho thẻ div#content
function get_content()
var html = document.getElementById(“content”).innerHTML;
alert(“Nội dung cần lấy là: ” + html);
</script>
<div id=”content”>Nội dung của thẻ DIV</div>
<input type=”button” value=”Lấy nội dung” id=”get_content” onclick=”get_content()” />
<input type=”button” value=”Thay đổi nội dung” id=”set_content” onclick=”set_content()” />
</body>
</html>
2. Thay đổi thuộc tính thẻ html bằng Javascript
Để thay đổi giá trị của thuộc tính HTML thì ta sử dụng cú pháp như sau:
document.getElementById(“element”).attributeName = “new value”;
Để lấy giá trị của thuộc tính HTML ta sử dụng cú pháp sau:
document.getElementById(“element”).attributeName;
Trong số đó attributeName là tên của thuộc tính mà bạn cần xử lý. Tùy vào mỗi thẻ html mà có các thuộc tính khác nhau.
Dưới đây là danh sách các thuộc tính thường dùng nhất.
Quá đơn giản phải không nào, rất giống với cách thay đổi và lấy nội dung bên trong thẻ HTML. Từ đây có thể suy ra rằng trong Javascript để thiết lập (set) và lấy (get) thì sử dụng chung một cú pháp, chỉ khác nhau ở chỗ gán bằng và không có gán bằng.
Ví dụ: Xây dựng chương trình khi click vào một button thì chuyển nó thành textbox, và tiếp tục click vào textbox thì sẽ đổi
thành button
<html>
<body>
<script language=”javascript”>
function change()
// Lấy đối tượng
var object = document.getElementById(“object”);
// lấy thuộc tính type
var type = object.type;
// kiểm tra thuộc tính type và thay đổi
if (type == “button”)
object.type=”text”;
else
object.type = “button”;
</script>
<input type=”button” value=”CLick me” onclick=”change()” id=”object” />
</body>
</html>
3. Lời kết
Như vậy là bạn đã biết hai cách xử lý thuộc tính và nội dung của thẻ HTML bằng javascript rất thông dụng rồi đấy, thực tế bạn có thể sử dụng những mánh khóe để xử lý bài toán một cách tốt hơn. Ví dụ bạn cần bổ sung một đoạn text vào trong một thẻ HTML thì sẽ không có hàm nào bổ trợ, tuy nhiên bạn có thể sử dụng một mẹo nhỏ thế này:
var content_append = ‘nội dung cần thêm vào’;
// Lấy đối tượng
var object = document.getElementById(“object”);
// Lấy nội dung hiện tại
var content_current = object.innerHTML;
// Bổ sung nội dung vào đối tượng
object.innerHTML = content_current + content_current;
Đấy, cho nên việc lập trình là vô vàn hướng giải và việc lựa chọn một hướng đi đúng
mới là vấn đề. Và qua bài này bạn thấy sức mạnh của DOM rồi phải không nào
Tải thêm tài liệu liên quan đến bài viết Hướng dẫn viết html trong javascript
programming
javascript
Event trong JavaScript
Bài tập JavaScript
innerHTML
Reply
3
0
Chia sẻ
Video Hướng dẫn viết html trong javascript ?
Bạn vừa đọc bài viết Với Một số hướng dẫn một cách chi tiết hơn về Video Hướng dẫn viết html trong javascript mới nhất
Share Link Cập nhật Hướng dẫn viết html trong javascript miễn phí
Bạn đang tìm một số ShareLink Download Hướng dẫn viết html trong javascript Free.
Giải đáp thắc mắc về Hướng dẫn viết html trong javascript
Nếu You sau khi đọc bài viết Hướng dẫn viết html trong javascript , bạn vẫn chưa hiểu thì có thể lại Comment ở cuối bài để Mình giải thích và hướng dẫn lại nha
#Hướng #dẫn #viết #html #trong #javascript
