JavaScript - DOM HTML trong Javascript

20/03/2019, 9:57 AM | 20/03/2019, 10:11 AM | 951 | 022

Sau khi sử dụng DOM Element để tìm các thẻ HTML rồi thì ta sẽ dùng DOM HTML để lấy nội dung, thay đổi nội dung hoặc thuộc tính của thẻ đó.
1. Lấy nội dung, thay đổi nội dung bên trong thẻ HTML
Để lấy nội dung của thẻ HTML ta dùng cú pháp sau :

document.getElementById("IdName").innerHTML

Trong đó :
- document.getElementById("IdName") là cách lấy đối tượng ta đã học ở bài DOM Element mình sẽ không nhắc lại nữa.
- innerHTML là lấy nội dung của thẻ đó.
Ví dụ :

Xem DEMO

// lấy nội dung thẻ
var noidung = document.getElementById("IdName").innerHTML;
// in ra kết quả
document.write(noidung);

Để thay đổi nội dung của thẻ ta dùng cú pháp sau :

document.getElementById("IdName").innerHTML = "Nội dung mới";

Ví dụ :

Xem DEMO

    // thay đổi nội dung của thẻ
    var noidung = document.getElementById("IdName").innerHTML = "have a nice day !";
    // in ra kết quả
    document.write(noidung);

Ngoài ra bạn cũng có thể sử dụng innerText để lấy nội dung và thay đổi nội dung của thể dưới dạng Text. Sử dụng innerText giống với innerHTML
ví dụ :

// lấy nội dung thẻ
var noidung = document.getElementById("IdName").innerText;
// in ra kết quả
document.write(noidung);

Lưu ý là trình duyệt firefox từ bản 45 trở xuống không hỗ trợ innerText.

2. Lấy giá trị, thay đổi thuộc tính (attribute) của thẻ HTML
Để lấy giá trị thuộc tính của thẻ ta dùng cú pháp sau :

document.getElementById("IdName").attributeName;

Để thay đổi giá trị thuộc tính của thẻ ta dùng cú pháp sau :

document.getElementById("IdName").attributeName = 'Giá trị';

Ví dụ :

Xem DEMO

<html>
    <body>
        <script language="javascript">
          function EditAttribute()
          {
             // Lấy đối tượng
             var IdElement = document.getElementById("IdName");
         
             // lấy thuộc tính type
             var type = IdElement.type;
		    
             // kiểm tra thuộc tính type
             // nếu đang là button thì đổi thành text và ngược lại
            if (type == "button"){
          
               IdElement.type = 'text';
              
               // thay đổi value
               IdElement.value = 'type text';
            }
            else{
                IdElement.type = "button";
               
                // thay đổi value
                IdElement.value = 'type Button';
            }
        
          }
        </script>
        <input type="button" value="type Button" onclick="EditAttribute()" id="IdName" />
    </body>
</html>

Bạn cũng có thể dùng getAttribute, setAttribute để lấy giá trị và thay đổi giá trị thuộc tính của thẻ
Cú pháp của getAttribute như sau :

document.getElementById("IdName").getAttribute('AttrName');

cú pháp của setAttribute như sau :

document.getElementById("IdName").getAttribute('AttrName', 'AttrValue');

Ví dụ : cũng như ví dụ ở phần trên nhưng ta dùng getAttribute và setAttribute cũng cho kết quả tương tự

Xem DEMO

<html>
    <body>
        <script language="javascript">
          function EditAttribute()
          {
             // Lấy đối tượng
             var IdElement = document.getElementById("IdName");
         
             // lấy thuộc tính type
	     var type = IdElement.getAttribute('type');

             // kiểm tra thuộc tính type
             // nếu đang là button thì đổi thành text và ngược lại
            if (type == "button"){
               IdElement.setAttribute('type','text');

               // thay đổi value
               IdElement.value = 'type text';
            }
            else{
                IdElement.setAttribute('type','button');

                // thay đổi value
                IdElement.value = 'type Button';
            }
        
          }
        </script>
        <input type="button" value="type Button" onclick="EditAttribute()" id="IdName" />
    </body>
</html>

Thao tác với nội dung và thuộc tính của thẻ cơ bản là như vậy, chúc bạn lập trình vui vẻ.