DOM HTML trong Javascript - Javascript căn bản
Chúng ta đã được học DOM Elements trong javascript rồi nhỉ, vậy thì trong bài này chúng ta tiếp tục tìm hiểu một nhóm khác đó là DOM HTML chuyên xử lý các vấn đề liên quan đến nội dung, thuộc tính của thẻ HTML. Đáng lẽ mình sẽ trình bày xuyên suốt DOM luôn nhưng nhận thấy việc làm ví dụ mà ...
Chúng ta đã được học DOM Elements trong javascript rồi nhỉ, vậy thì trong bài này chúng ta tiếp tục tìm hiểu một nhóm khác đó là DOM HTML chuyên xử lý các vấn đề liên quan đến nội dung, thuộc tính của thẻ HTML.
Đáng lẽ mình sẽ trình bày xuyên suốt DOM luôn nhưng nhận thấy việc làm ví dụ mà không kết hợp với sự kiện trong javascript thì rất khó học cho nên mình đã chèn hai bài vào rồi mới trình bày các thành phần tiếp theo của DOM .
Say đây là nội dung chúng ta sẽ được học trong bài này:
- Cách thay đổi, lấy nội dung của thẻ HTML
- Cách thay đổi, lấy nội dung của thuộc tính HTML
1. Thay đổi và lấy nội dung bên trong thẻ HTML
Để lấy nội dung bên trong một thẻ HTML thì chúng ta sử dụng cú pháp như sau:
var html = document.getElementById("content").innerHTMLVà để thay đổi nội dung cho một thẻ HTML thì ta dùng cú pháp sau:
var html = document.getElementById("content").innerHTML = "<h1>Nội dung</h1>";Ví dụ: Trong ví dụ này ta sẽ viết chương trình thay đổi nội dung HTML của một thẻ DIV và lấy nội dung bên trong của một thẻ DIV
XEM DEMO
<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 = "<h1>Nội dung đã được thay đổi</h1>";
}
// 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 và lấy giá trị thuộc tính thẻ HTML bằng Javascript
Để thay đổi giá trị của một thuộc tính HTML bất kì thì ta sử dụng cú pháp sau:
document.getElementById("element").attributeName = "new value";Để lấy giá trị của một thuộc tính HTML ta sử dụng cú pháp sau:
var value = document.getElementById("element").attributeName;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
XEM DEMO
<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 
